Compatibilidad de Favicon en Navegadores - Chrome, Firefox, Safari, Edge (2025)
Guía completa de compatibilidad de favicon en navegadores para Chrome, Firefox, Safari, Edge, iOS y Android. Aprende qué formatos y tamaños funcionan en cada navegador.
No todos los navegadores manejan los favicons de la misma manera. Chrome ama PNG, Safari prefiere respaldos ICO, iOS ignora tu web manifest, y Android necesita tamaños específicos para íconos de pantalla de inicio. Si alguna vez te has preguntado por qué tu favicon funciona en Chrome pero no en Safari, o por qué se ve borroso en iOS, esta guía es para ti.
Esta guía te muestra qué archivos de ícono importan para cada navegador (Chrome, Firefox, Safari, Edge, iOS Safari, Android Chrome), qué formatos admiten (ICO, PNG, SVG), y cómo evitar problemas comunes de compatibilidad. Toma alrededor de 5 minutos leer, y sabrás exactamente qué archivos necesitas.
Cómo los navegadores cargan favicons
Todos los navegadores de escritorio todavía buscan /favicon.ico por defecto como un respaldo heredado. Incluso si no tienes una etiqueta <link rel="icon"> en tu HTML, los navegadores intentarán obtener /favicon.ico del directorio raíz de tu sitio. Este comportamiento se remonta a Internet Explorer 5 (1999), y todavía está aquí en 2025.
Los navegadores modernos prefieren etiquetas explícitas <link rel="icon"> en tu sección HTML <head>. Estas etiquetas te dan más control: puedes especificar múltiples tamaños, diferentes formatos (PNG, SVG), e incluso diferentes íconos para modo claro/oscuro. Si tienes tanto /favicon.ico como etiquetas <link rel="icon">, las etiquetas de enlace tienen prioridad.
En pantallas de alta DPI (pantallas Retina, monitores 4K), los navegadores prefieren íconos de mayor resolución cuando están disponibles. Si proporcionas archivos PNG de 16×16 y 32×32, los navegadores elegirán el de 32×32 en pantallas Retina para evitar íconos borrosos. Por eso necesitas múltiples tamaños: un tamaño no sirve para todos.
Navegadores de escritorio: Chrome, Firefox, Edge, Safari
Chrome (Windows, Mac, Linux): Admite favicons ICO, PNG y SVG. Prefiere PNG para íconos de pestaña (usa 16×16 o 32×32 dependiendo del DPI de la pantalla). Admite favicons SVG desde Chrome 80 (2020). Obtiene automáticamente /favicon.ico si no se encuentra ninguna etiqueta <link rel="icon">. Funciona muy bien con todos los formatos modernos.
Firefox (Windows, Mac, Linux): Admite favicons ICO, PNG y SVG. Prefiere PNG para íconos de pestaña (16×16 o 32×32). Admite favicons SVG desde Firefox 41 (2015). Tiene el mejor soporte SVG de todos los navegadores: incluso los SVG complejos se renderizan bien. También obtiene /favicon.ico como respaldo.
Safari (Mac): Admite favicons ICO, PNG y SVG (soporte SVG agregado en Safari 12, 2018). Las versiones antiguas de Safari (pre-2018) solo admiten ICO y PNG, así que siempre incluye un respaldo /favicon.ico para Macs antiguos. Safari es más exigente con los formatos de archivo que Chrome: si tu archivo ICO está mal formado, Safari podría no mostrarlo.
Navegadores móviles: iOS Safari y Android Chrome
iOS Safari (iPhone, iPad): Ignora las etiquetas <link rel="icon"> y los íconos del web manifest para accesos directos de pantalla de inicio. En su lugar, busca etiquetas <link rel="apple-touch-icon"> con archivos PNG de 180×180. Si no proporcionas un Apple Touch Icon, iOS tomará una captura de pantalla de tu página y la usará como ícono (lo que se ve terrible). Para íconos de pestaña en Safari, iOS usa el favicon estándar (PNG de 16×16 o 32×32).
Android Chrome (teléfonos, tabletas): Usa íconos de tu web manifest (manifest.json) para accesos directos de pantalla de inicio. Busca archivos PNG de 192×192 y 512×512 en el array de íconos del manifest. Para íconos de pestaña en el navegador, usa las etiquetas estándar <link rel="icon"> (PNG de 16×16 o 32×32). Admite íconos maskable (íconos adaptativos con relleno seguro) si agregas "purpose": "maskable" a tu manifest.
Diferencia clave: iOS usa Apple Touch Icons para pantalla de inicio, Android usa íconos de web manifest. Necesitas ambos si quieres admitir a todos los usuarios móviles. No asumas que el web manifest funcionará en iOS: no lo hará. Consulta nuestro tutorial de Apple Touch Icon y tutorial de Web Manifest para instrucciones de configuración.
Problemas comunes de compatibilidad
Bloqueo de contenido mixto: Si tu sitio es HTTPS pero tus URLs de favicon son HTTP, los navegadores bloquearán los íconos por razones de seguridad. Asegúrate de que todas las URLs de ícono usen HTTPS (o rutas relativas como /favicon.ico, que heredan el protocolo de la página). Verifica la Consola en DevTools para errores de "Contenido Mixto".
Almacenamiento en caché agresivo: Los navegadores almacenan en caché los favicons durante mucho tiempo (a veces semanas). Si actualizas tu favicon y no cambia, borra la caché de tu navegador (Ctrl+Shift+Delete o Cmd+Shift+Delete) o abre una ventana de incógnito. En móviles, es posible que necesites eliminar el acceso directo de la pantalla de inicio y agregarlo nuevamente para ver el nuevo ícono.
Extensiones de privacidad que bloquean íconos: Algunos bloqueadores de anuncios o extensiones de privacidad (uBlock Origin, Privacy Badger) pueden bloquear solicitudes de favicon si piensan que los íconos son píxeles de seguimiento. Esto es raro, pero si los usuarios informan favicons faltantes, pídeles que desactiven las extensiones temporalmente para probar.
Cómo probar la compatibilidad de favicon
Pruebas de escritorio: Abre tu sitio en Chrome, Firefox, Safari y Edge. Verifica el ícono de la pestaña, marca la página y mira el historial del navegador. El favicon debería aparecer en los tres lugares. Si falta o está borroso, verifica la pestaña Network en DevTools: busca errores 404 o tamaños de archivo incorrectos.
Pruebas móviles: Prueba en iOS Safari (iPhone o iPad) y Android Chrome (teléfono o tableta). Para iOS, toca Compartir → "Añadir a pantalla de inicio" y verifica la vista previa del ícono. Para Android, toca el menú de tres puntos → "Añadir a pantalla de inicio". Los íconos deberían ser nítidos y coincidir con tu marca. Si están borrosos o muestran capturas de pantalla, verifica tus etiquetas Apple Touch Icon y web manifest.
Pruebas de regresión: Cada vez que cambies archivos de ícono, formatos de archivo o etiquetas HTML, repite las pruebas anteriores. Los errores de favicon son fáciles de introducir (ruta de archivo incorrecta, tamaño faltante, archivo ICO roto) y difíciles de notar hasta que los usuarios se quejen. Prueba en al menos 2 navegadores de escritorio y 1 navegador móvil antes de implementar.
¿Listo para generar favicons compatibles?
Ahora que entiendes la compatibilidad del navegador, usa nuestro Convertidor de Imágenes para generar todos los formatos y tamaños que necesitas. Sube tu logo y obtén archivos ICO, PNG y SVG que funcionan en todos los navegadores. Descarga el ZIP, sube los archivos a tu servidor y copia el código HTML: está probado en Chrome, Firefox, Safari, Edge, iOS y Android.