Generador de favicons

¿Qué es un favicon y por qué ya no basta un único ICO?

El favicon — abreviación de «favorite icon» — es la imagen pequeña que muestra cada pestaña del navegador, marcador y resultado de búsqueda junto al título de la página. Introducido en 1999 por Internet Explorer 5 como ICO de 16×16 px en la raíz del sitio, fue durante mucho tiempo una sola imagen para todas las plataformas.

Con el auge de pantallas Retina, sistemas móviles, Progressive Web Apps y la visibilidad permanente de pestañas, el panorama ha cambiado. Hoy, un sitio totalmente compatible necesita al menos entre cinco y siete tamaños de imagen distintos más un Web App Manifest para atender correctamente todos los destinos:

• 16×16 / 32×32 — pestañas clásicas, empaquetadas en favicon.ico
• 48×48 — anclaje de sitio en Windows
• 96×96 — tamaño de favicon Chrome moderno
• 180×180 — apple-touch-icon iOS (desde iOS 7)
• 192×192 / 512×512 — icono Android Home Screen y manifest PWA

Esta herramienta genera el set completo desde una sola plantilla — localmente en el navegador, sin servidor, sin subida.

Visión del pipeline — ¿qué pasa en el navegador?

Logo (PNG / JPG / SVG)
    ↓
[1] Decodificación ImageBitmap  ─→ lectura del tamaño nativo
    ↓
[2] Rasterización Canvas         ─→ 7 tamaños (16/32/48/96/180/192/512)
                                    con clip de máscara opcional para 192/512
    ↓
[3] Codificación PNG por capa    ─→ canvas.toBlob('image/png')
    ↓
[4] Codificador ICO propio       ─→ 16/32/48 → favicon.ico (PNG-in-ICO, Vista+)
    ↓
[5] Quantizer median-cut         ─→ theme-color light + dark
    ↓
[6] site.webmanifest             ─→ JSON.stringify con array de iconos
    ↓
[7] Snippet HTML                 ─→ etiquetas <link> y <meta>
    ↓
[8] client-zip                   ─→ todo en un ZIP

Todos los pasos corren en una pestaña del navegador. El codificador ICO es un módulo TypeScript embebido de 2 KB — escribe directamente en un ArrayBuffer y empaqueta las capas PNG en el formato ICO estándar con cabecera correcta (00 00 01 00), tabla ICONDIRENTRY y cálculo de offset.

Maskable safe zone — ¿qué es y por qué importa?

Un icono Android Launcher clásico es un cuadrado: 192×192 o 512×512 px con contenido hasta los bordes. Desde Android Oreo (2017), sin embargo, cada SO aplica su propia máscara al icono — el Pixel 9 muestra círculos, los Samsung muestran squircles, los Pixel antiguos teardrops. Quien envía un icono cuadrado ve en algunos dispositivos bordes blancos y en otros logos recortados.

La solución es el formato Maskable Icon, anclado en la spec del manifest PWA desde 2019. Define una safe zone del 80 % en el centro de la imagen:

   192px maskable PNG
   ┌─────────────────────┐
   │     mask-zone       │
   │  ┌───────────────┐  │
   │  │               │  │   Círculo interior: 80 % del lado
   │  │   safe-zone   │  │   (radio = tamaño × 0,4)
   │  │  (siempre     │  │   = a 192 px: radio 76,8 px
   │  │   visible)    │  │   los píxeles aquí permanecen visibles
   │  │               │  │   sea cual sea la máscara.
   │  └───────────────┘  │
   │     mask-zone       │
   └─────────────────────┘

Lo que cae fuera de la safe zone puede recortarse en algunos dispositivos. La herramienta muestra el círculo del 80 % en el editor en vivo como línea punteada. Con los controles de escala y offset coloca el logo de modo que todos los píxeles de marca queden dentro.

Las cuatro formas de máscara en el picker muestran cómo se ve el icono en cada dispositivo:

• Círculo — Pixel 9, iOS antiguos, launchers redondos clásicos
• Squircle — iOS 18+ (aproximación a superelipse), Samsung One UI 6+
• Rounded Square — Android Material 3, OnePlus, Realme
• Teardrop — Google Pixel con tema teardrop activado

SVG dark mode — ¿por qué y para qué navegadores?

Si su favicon SVG funciona bien como símbolo oscuro sobre tema claro, en tema oscuro puede ser difícil de leer — el fondo oscuro absorbe los trazos oscuros. Solución: un único SVG con @media (prefers-color-scheme: dark) incrustado, que cambia automáticamente su color de fill.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    path { fill: #0F0F0F; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F5F5F5; }
    }
  </style>
  <path d="…su logo…" />
</svg>

Soporte de navegador del SVG favicon con media query:

• ✅ Chrome 76+, Edge 79+ — totalmente funcional desde 2019
• ✅ Firefox 67+ — totalmente funcional
• ⚠️ Safari (todas las versiones) — bug WebKit abierto desde 2020 (#262971); Safari renderiza los SVG favicons con @media como imagen estática
• ✅ Mobile Chrome / Firefox — funcional

Aun así entregamos favicons PNG clásicos para que Safari tenga un fallback limpio. En la práctica, un usuario Safari en dark mode ve, por tanto, el fallback PNG de 32 px, que según el diseño del logo puede ser suficientemente neutro. Para soporte de dark mode completo en Safari habría que hoy (todavía) alojar dos favicons separados y alternar por JavaScript — mantenemos el alcance mínimo y entregamos la vía SVG single-file, que funciona limpiamente en tres de los cuatro navegadores principales.

¿Qué distingue a este generador de los conversores en línea?

La mayoría de los generadores gratuitos de favicons siguen un esquema similar: subida → procesamiento en servidor → enlace de descarga. Ese modelo tiene varias desventajas:

1. Privacidad — los logos son activos de marca. Una subida implica que su marca reside al menos temporalmente en infraestructura ajena. Para diseños prelanzamiento, logos de cliente o materiales de branding confidenciales es un problema real.
2. Falta de editor Maskable — la mayoría de las herramientas en línea recortan logos sin previsualizar las máscaras del SO. Resultado: apps con bordes blancos en Pixel, logos recortados en Samsung.
3. Falta total de SVG dark mode — ningún generador gratuito ofrece el SVG dark mode single-file. La función está estandarizada desde 2019, pero no ha llegado a los flujos UI.
4. Theme-color manual — nadie extrae la theme-color automáticamente del logo. Los usuarios la adivinan con un color picker.

Este generador hace los cuatro puntos de otra forma:

• Pure-client — el logo permanece en la pestaña. Visible en el panel Red: sin POST, sin subida.
• Editor Maskable con previsualización en vivo — el círculo safe zone del 80 % siempre es visible, cuatro formas de máscara conmutables.
• SVG dark mode con @media incrustado — un único archivo SVG para ambos modos (Chrome, Firefox, Edge).
• Extracción de color de marca median-cut — el tono dominante y el de acento aterrizan automáticamente en las etiquetas meta theme-color.

¿Qué lagunas intencionadas tiene el generador?

Construimos un generador de favicons, no un Logo Maker. Lo deliberadamente ausente:

• Generación de logos por IA — servicios como iconikai o AutopptAI construyen logos a partir de prompts. Pertenece al flujo de diseño de logo previo, no al nuestro.
• Cuenta / huecos de guardado / historial de proyecto — vulnera nuestra promesa pure-client. Si cierra la pestaña, el resultado desaparece — es feature, no bug.
• Microsoft Tile XML (browserconfig.xml) — Edge ha eliminado los Live Tiles en Windows 11; el archivo es obsoleto.
• Favicon animado (APNG, SVG-SMIL) — soporte de navegador inconsistente y caso de uso estrecho. Quien necesite animaciones las aloja por su cuenta.
• Temas de color de marca / plantillas — somos un conversor, no un diseñador de logos. Las propuestas de theme-color son algorítmicas, no curadas.

La herramienta hace una cosa bien y dice claramente dónde está el límite.

¿Qué herramientas relacionadas encajan en el workflow favicon?

Otras herramientas del ecosistema kittokit para el tratamiento de imagen:

• SVG a PNG — si solo necesita tamaños PNG individuales a partir de su SVG, no el set completo.
• Conversor de formato de imagen — PNG a WebP o AVIF para entrega web; ambos más pequeños que PNG con la misma calidad.
• Optimizador SVG — antes de generar el favicon, limpie las rutas SVG y quite los metadatos.