Cómo funcionan los formatos de favicon
Cuando se rompe un favicon, adivinar es una pérdida de horas. Comprender los directorios ICO, la compresión PNG-in-ICO, las consultas de medios SVG y la lógica de selección del navegador le permite depurar con intención. Esta inmersión profunda incluye comportamiento a nivel de bytes, ejemplos, preguntas frecuentes y rutas de solución de problemas para cada modo de falla común.
La canalización de solicitudes favicon
Cuando carga una página, el navegador analiza HTML <head>, descubre candidatos <link rel="icon"> y también puede buscar /favicon.ico si no hay nada que coincida. Utilice nuestro [generador favicon](herramienta:generador favicon), [convertidor PNG a ICO](herramienta:png-to-ico), [convertidor SVG a ICO](herramienta:svg-to-ico) y [probador favicon en vivo](utilidad:favicon-tester) para crear y verificar su conjunto de iconos, y lea el [complementario guía](guía:mejor-favicon-formato) para ver un tutorial condensado.
Cada candidato incluye sugerencias: URL href, tipo MIME, atributo de tamaños y consultas de medios sobre contenido SVG.
La pila de red descarga bytes, decodifica el contenedor, rasteriza en un mapa de bits para la pestaña y almacena en caché de manera agresiva, a menudo ignorando los encabezados de caché HTTP estándar.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
El contenedor .ico
Un archivo .ico comienza con un encabezado de directorio que enumera imágenes incrustadas. Cada entrada registra el ancho, el alto, la profundidad del color y el desplazamiento de bytes.
Los bytes de ancho y alto de 0 significan 256 píxeles, una peculiaridad histórica de la especificación de formato.
Los decodificadores buscan el desplazamiento, leen un mapa de bits BMP o un blob PNG y entregan píxeles al kit de herramientas de la interfaz de usuario. Sólo se decodifica un fotograma por solicitud.
PNG dentro de .ico
Para fotogramas de 64×64 y mayores, la compresión PNG reduce drásticamente el contenedor sin pérdida visible en los iconos planos.
El blob PNG es un archivo PNG normal textualmente, que incluye fragmentos IHDR e IDAT, anidados dentro de la estructura ICO.
Los generadores que aún emiten BMP a 256 × 256 no tienen especificaciones incorrectas, pero desperdician ancho de banda. Prefiera entradas comprimidas PNG cuando estén disponibles.
SVG favicons
El motor SVG del navegador representa un SVG favicon en tamaño de pestaña, similar al SVG en línea en una página.
El CSS integrado puede hacer referencia a prefers-color-scheme, lo que permite que un archivo presente apariencias claras y oscuras sin una segunda solicitud de red.
Las referencias externas (fuentes, filtros, imágenes remotas) pueden bloquearse en el contexto favicon. Mantenga SVG autónomo.
Cómo eligen los navegadores
Cuando existen varias etiquetas <link rel="icon">, los navegadores califican a los candidatos por tipo de soporte, coincidencia de tamaños y, a veces, orden de declaración.
Chromium generalmente prefiere SVG cuando se establece type="image/svg+xml" y el archivo se carga correctamente.
Safari aún puede mostrar ICO en algunos contextos mientras se usa el ícono táctil de Apple PNG para la pantalla de inicio iOS: rutas de código separadas.
Si todos los candidatos fallan, el navegador muestra un ícono de documento genérico y puede volver a intentar /favicon.ico en la siguiente navegación.
Ejemplos de depuración
La pestaña Red muestra 200 para favicon.svg, pero la pestaña usa ICO: SVG falló en el rastreo MIME: corrija el tipo de contenido en el servidor.
ICO se descarga pero parece tener un tamaño incorrecto: ábralo en un visor hexadecimal; es posible que solo tenga un marco de 16 × 16 dentro.
El modo oscuro SVG funciona en Firefox, no en Chrome: verifique la sintaxis de CSS dentro de <estilo>; Chrome es más estricto con los selectores no válidos.
Icono de manifiesto ignorado: error de sintaxis JSON: valide site.webmanifest en el panel de la aplicación DevTools.
Preguntas frecuentes
¿Los favicon se almacenan en caché para siempre? A menudo, durante días por perfil, independientemente del caché de la página.
¿Los favicon siguen CORS? Generalmente no: se cargan como imágenes sin verificación previa de CORS.
¿Puedo usar WebP para favicon? Soporte limitado; quédese con ICO, PNG, SVG para una cobertura amplia.
¿Por qué 48×48 dentro de ICO? Tamaños de carcasa heredados Windows; Barato para incluir en el paquete.
Solución de problemas
Icono faltante intermitente: carrera entre el análisis HTML y la recuperación /favicon.ico: declara <enlace> temprano en <head>.
Correcto localmente, incorrecto en CDN: caché perimetral obsoleta para .ico: purgue o versione el nombre del archivo.
Icono volteado o colores incorrectos: orientación EXIF en la fuente PNG: elimina EXIF antes de generar ICO.
Dos íconos diferentes en www y apex: implementaciones separadas: unificar archivos o redirigir nombres de host.
Breve historia del formato
Los favicons comenzaron como archivos ICO de 16 × 16 en los favoritos de Internet Explorer. La ruta de facto /favicon.ico se mantuvo incluso cuando los formatos evolucionaron.
Las etiquetas de enlace PNG llegaron a medida que las pantallas ganaban densidad. Apple introdujo el ícono táctil de Apple como una relación de enlace separada para las pantallas de inicio de iOS.
SVG favicons ganó fuerza después de que los navegadores implementaron la representación segura del subconjunto SVG en la interfaz de usuario de Chrome, no solo en el contenido de la página.
Los manifiestos de la aplicación web formalizaron los requisitos 192 y 512 PNG para las auditorías de instalación en Chromium.
Comprender esta línea de tiempo explica por qué ningún formato ganó: cada capa resolvió un problema que la anterior no pudo.
Herramientas para inspeccionar bytes favicon
Chrome El panel DevTools Network filtra por tipo de recurso Img o por nombre de archivo. Deshabilite el caché durante la depuración.
curl -I https://yoursite.com/favicon.ico revela el estado, el tipo de contenido y los encabezados de la caché sin interferencia de la caché del navegador.
ImageMagick identifica favicon.ico enumera marcos y dimensiones incrustados en la línea de comando.
Los analizadores ICO en línea muestran entradas de directorio sin instalar software, lo que resulta útil en portátiles corporativos bloqueados.
Para SVG, abra el archivo en un editor de texto y confirme que no haya puntos xlink:href externos fuera del dominio.
Compare el tamaño de bytes antes y después de la regeneración. Una caída de tamaño de 10× generalmente significa que la compresión PNG reemplazó a BMP dentro de ICO.
Tipos MIME que los servidores deben publicar
favicon.ico — imagen/x-icon o imagen/vnd.microsoft.icon. Los navegadores son tolerantes, pero el MIME correcto ayuda a los proxies.
favicon.svg — imagen/svg+xml. El texto incorrecto/sin formato hace que algunos motores omitan SVG.
Iconos PNG — imagen/png. Gzip o Brotli en la capa CDN está bien.
Los bloques de tipos de nginx mal configurados son una de las principales causas de que SVG favicon funcione localmente (servidor de desarrollo Vite) pero falle en producción.
Dónde leer las especificaciones
La estructura ICO está documentada en los primeros formatos de recursos Windows y modernizada según los estándares de facto PNG-in-ICO.
WHATWG HTML define el comportamiento del enlace rel=icon que los navegadores implementan con ajustes del proveedor.
El manifiesto de la aplicación web del W3C especifica el esquema de matriz de iconos para su instalación.
Los SVG favicon siguen las reglas del subconjunto SVG Tiny que los navegadores aplican en la interfaz de usuario de Chrome; no todas las funciones SVG 2 son compatibles.
Cuando las especificaciones no estén de acuerdo, pruebe en los navegadores de destino. El comportamiento de facto prevalece sobre las publicaciones de blogs de hace una década.
Mantenga un archivo de notas local con los umbrales de versión del navegador cuando su equipo deje de admitir clientes heredados exclusivos de ICO.
Manual de respuesta a incidentes
Si los favicon se rompen en todo el sitio después de la implementación, revierta primero los activos estáticos; los cambios HTML rara vez son los culpables cuando solo fallan los íconos.
Verifique los registros CDN 404 para favicon.ico y apple-touch-icon.png dentro de los cinco minutos posteriores al inicio del incidente.
Compare los bytes de respuesta entre la producción y el último artefacto bueno conocido en git.
Post-mortem: documente si la causa raíz fue MIME, falta un fotograma o caché: tres soluciones diferentes.
Agregue un monitor sintético que HEAD solicite /favicon.ico cada hora si los íconos son críticos para el negocio para la confianza.
Enseñe a los ingenieros de guardia dónde se encuentran los archivos de íconos en el artefacto de implementación para que la reversión sea de minutos, no de horas.