Para qué sirve cada formato
Un favicon no es un solo archivo. Los navegadores, los sistemas operativos y las herramientas de marcadores buscan cada uno uno distinto, y el estándar HTML permite que una página declare varios y deja la elección al navegador.
| Archivo | Formato | Para qué se usa |
|---|---|---|
favicon.ico |
ICO, varios mapas de bits en un archivo | La alternativa de reserva: si no hay ningún enlace de icono, los navegadores pueden pedir /favicon.ico en la raíz del sitio. Este paquete incluye en él imágenes de 16, 32 y 48 px. |
favicon.svg |
SVG | Un único archivo escalable para los navegadores que admiten favicons SVG. Puede llevar sus propios colores para el modo claro y el oscuro. |
favicon-16x16.png, favicon-32x32.png |
PNG | Copias ráster del icono de la pestaña, para un creador de sitios o una herramienta que pida un favicon PNG. |
apple-touch-icon.png |
PNG, 180 × 180 px | La pantalla de inicio del iPhone y el iPad, cuando alguien añade el sitio a ella. |
site.webmanifest |
JSON | Nombre, colores e iconos de app para las web apps instalables (consulta la guía de iconos maskable para PWA). |
ICO es el formato más antiguo y todavía el que más se lee. El estándar HTML describe la petición de /favicon.ico como algo que un navegador puede hacer cuando una página no declara ningún icono, así que tómalo como una red de seguridad y enlázalo de todos modos de forma explícita. MDN señala que un archivo ICO puede guardar varios tamaños, y por eso un solo archivo cubre 16, 32 y 48 px.
SVG es el único formato que se ve nítido a cualquier tamaño y con cualquier densidad de píxeles. Un bloque <style> dentro del SVG puede cambiar los colores con prefers-color-scheme, para que una marca oscura siga viéndose en una barra de pestañas oscura. El servidor debe enviarlo como image/svg+xml: Can I use indica que los navegadores Chromium y Firefox exigen ese tipo.
Los favicons PNG son mapas de bits normales, que suelen enlazarse con un atributo sizes. El estándar dice que sizes es orientativo: un navegador puede usarlo para elegir el archivo más cercano, pero nada lo obliga. Eso tiene dos caras, como muestra la siguiente sección.
Qué navegadores usan cuál
Compatibilidad con los favicons SVG, según los datos de Can I use consultados el 28 de septiembre de 2026: Chrome y Edge desde la versión 80, Firefox desde la 41, Opera desde la 67 y Safari desde la 26.0, tanto en macOS como en iOS. Safari 18 y las versiones anteriores no usan favicons SVG, así que dependen de los archivos PNG e ICO. El equipo de WebKit anunció el cambio de Safari en su artículo sobre la versión Safari 26.0, en septiembre de 2025. Quien siga con un Safari más antiguo seguirá viendo los iconos ráster, y por eso un favicon SVG nunca los sustituye.
Cuando una página declara varios iconos, el estándar HTML dice que el navegador elige el que mejor le conviene y, cuando varios le convienen por igual, gana el último declarado. Si un archivo resulta inservible, por ejemplo por un formato que no puede leer, pasa al siguiente. Qué es lo que «mejor le conviene» queda a criterio del navegador: uno que elija por el tamaño declarado puede preferir un PNG marcado con sizes="32x32" a un SVG que no declara tamaño, sea cual sea el orden. Por eso el fragmento de abajo no enlaza ningún PNG con tamaño: el ICO cubre los tamaños ráster y el SVG va después.
Un detalle viene de la práctica, no de un fabricante de navegadores. El artículo de Evil Martians sobre favicons recomienda poner sizes="32x32" en el enlace del ICO «para corregir el error de Chrome por el que elige un archivo ICO en lugar de un SVG»; su registro de cambios dice que sustituyó sizes="any" por ese motivo en julio de 2023. El artículo no enlaza ningún informe de error de Chromium y nosotros tampoco hemos encontrado ninguno, así que tómalo como experiencia práctica. El generador sigue ese consejo. No hace ningún daño, porque el ICO sí contiene una imagen de 32 px.
Apple touch icon. La guía archivada Safari Web Content Guide de Apple documenta <link rel="apple-touch-icon"> e indica 180 × 180 px para los iPhone con pantalla Retina. MDN añade que iOS no usa los enlaces normales rel="icon" para los iconos de la pantalla de inicio. La documentación de Apple no dice qué pasa con los píxeles transparentes; una respuesta en los foros de desarrolladores de Apple (de otro desarrollador, no de Apple) dice que se ven negros. Por eso el generador siempre crea este archivo opaco, sobre el color de fondo que elijas.
El color de tema es la parte menos fiable. Can I use no indica compatibilidad con <meta name="theme-color"> en Firefox, y dice que Chrome de escritorio solo usa el color en las web apps instaladas. Tanto Can I use como MDN dicen que, desde Safari 26, solo se aplica a las web apps instaladas. Las dos fuentes no coinciden en los detalles de Chrome en Android y de Safari en iOS 26. Incluye la etiqueta, pero no diseñes contando con ella.
El antiguo enlace mask-icon de Apple para las pestañas fijadas de Safari todavía aparece en su documentación archivada. No hemos encontrado ninguna nota oficial que lo retire, ni nada que lo exija. Este paquete no lo incluye.
El set mínimo que vale la pena publicar
Para un sitio con un diseño vectorial, enlaza favicon.ico, favicon.svg y apple-touch-icon.png, más un manifest con iconos de 192 y 512 px si el sitio debe poder instalarse. Es el set con el que se queda el artículo de Evil Martians. Los favicons PNG pueden quedarse en el servidor para las herramientas que los pidan, sin etiqueta de enlace. Para un sitio cuyo logo solo existe como mapa de bits, prescinde del SVG: un PNG metido en un archivo SVG sigue siendo un mapa de bits y no gana nada. Trázalo primero en trazados vectoriales de verdad si quieres un favicon SVG.
El fragmento HTML
Estas son las etiquetas que el generador escribe en favicon.html para el paquete de ejemplo de abajo, con los archivos en la raíz del sitio:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
Si tus archivos están en una carpeta como /assets/icons/, indica esa carpeta como prefijo de ruta en el generador de favicon y todos los href cambian con ella; copia además favicon.ico en la raíz del sitio, donde los navegadores lo buscan en las páginas que no enlazan ningún icono. Un original PNG, JPG o WebP produce las mismas etiquetas sin la línea del SVG.
Un ejemplo real para descargar
Pasamos la marca de este mismo sitio (un SVG que es nuestro, no una subida de nadie) por el generador de favicon con el nombre "png2svg.art", el color de tema #0a2d8f, el fondo #e8efff y un margen del 8 %. No se editó nada después: son exactamente los archivos que crea la herramienta.
El favicon de 32 px, a su tamaño real: 
El Apple touch icon de 180 px, opaco sobre el color de fondo:
Descarga el paquete de ejemplo completo (ZIP): favicon.svg, favicon.ico, los dos favicons PNG, el Apple touch icon, cuatro iconos de app, site.webmanifest, favicon.html y un README.
Cómo comprobar tus favicons
Abre la página en una ventana privada después de subir los archivos: los navegadores guardan los favicons en caché mucho tiempo, y un icono antiguo en una ventana normal no demuestra nada. En el panel de red de las herramientas para desarrolladores, comprueba que favicon.svg se sirve como image/svg+xml y que todos los archivos responden con 200. Mira la pestaña en modo claro y oscuro, y añade la página a la pantalla de inicio de un teléfono para comprobar el touch icon.