Tamaños de favicon: tabla completa y el HTML necesario

Los tamaños de favicon actuales se reducen a cinco archivos: un favicon.ico de 32×32, un icono SVG, un Apple touch icon de 180×180 y dos PNG en el manifiesto de la aplicación web de 192×192 y 512×512, uno de ellos maskable. Todo lo demás, como los iconos Apple de 57×57, los mosaicos de Windows o los PNG de tamaños extra, está obsoleto y se puede eliminar.

La tabla de tamaños

Archivo	Tamaño	Lo usan	Notas
`favicon.ico`	32×32 (puede incluir también 16 y 48)	Todos los navegadores, lectores RSS y cualquier cosa que pida `/favicon.ico`	Déjalo en la raíz del sitio, aunque tu HTML declare otros iconos.
`favicon.svg`	Cualquiera, viewBox cuadrado	Pestañas de Chrome, Edge y Firefox	Nítido a cualquier tamaño y puede cambiar de colores en modo oscuro.
`favicon-96x96.png`	96×96	Búsqueda de Google	Opcional si el Apple touch icon está declarado; Google lee ambos.
`apple-touch-icon.png`	180×180	Pantallas de inicio de iPhone y iPad, Búsqueda de Google	Fondo opaco. iOS redondea las esquinas por su cuenta.
Icono del manifiesto	192×192	Pantalla de inicio de Android	Se enumera en `icons` dentro del manifiesto de la aplicación web.
Icono del manifiesto	512×512	Aviso de instalación, pantalla de presentación	Los criterios de instalación de Chrome piden un icono de 192 y otro de 512.
Icono maskable	512×512	Iconos adaptativos de Android	`"purpose": "maskable"`, logotipo dentro del círculo central del 80 %.

Pestañas del navegador: favicon.ico y SVG

Una pestaña muestra el icono a 16 píxeles CSS, que son 32 píxeles físicos en una pantalla de alta densidad. Por eso la imagen de 32×32 dentro de favicon.ico es la más importante. Si quieres, añade también 16 y 48 al mismo archivo; los navegadores eligen la más cercana.

Un icono SVG cubre todos los tamaños a la vez. Además puede llevar una media query prefers-color-scheme, de modo que un logotipo oscuro se vuelva claro en las pestañas oscuras. Declara primero el ICO con sizes="32x32" y después el SVG: los navegadores que admiten SVG lo toman, y el resto usa el ICO.

Búsqueda de Google

Las directrices de Google para favicons piden un icono cuadrado de al menos 8×8 píxeles y recomiendan uno mayor de 48×48. Los formatos admitidos son BMP, GIF, ICO, PNG, JPEG, PPM y TIFF. SVG no está en esa lista, así que un sitio con solo SVG no le da nada a Google. Google lee tanto rel="icon" como rel="apple-touch-icon", de modo que un Apple touch icon de 180×180 declarado ya cumple la recomendación de tamaño. Si prefieres un archivo propio, sirve un PNG de 96×96.

iPhone y iPad

iOS usa el Apple touch icon cuando alguien añade tu sitio a la pantalla de inicio. 180×180 es el tamaño para los iPhone actuales (60 puntos a escala 3×); los iPad lo reducen sin problema, así que basta un solo archivo. Las zonas transparentes se vuelven negras en la pantalla de inicio, por eso conviene darle al icono un fondo sólido. Sin el icono, iOS usa una captura de la página o una letra sobre un mosaico liso.

Android y aplicaciones web instalables

Android y Chrome leen los iconos del manifiesto de la aplicación web. El icono de 192×192 va en la pantalla de inicio; el de 512×512 aparece en el diálogo de instalación y en la pantalla de presentación.

Un icono maskable es una imagen de 512×512 aparte cuyo dibujo ocupa todo el cuadrado. Android la recorta con la forma que use el teléfono: círculo, squircle o cuadrado redondeado. Si dejas el logotipo dentro de un círculo centrado con un diámetro del 80 % de la imagen, sobrevive a cualquier máscara. Sin un icono maskable, Android reduce tu icono normal y lo coloca sobre un círculo blanco.

El HTML

<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">

Y la parte de iconos de site.webmanifest:

"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Sirve el manifiesto como application/manifest+json y cada icono con su tipo de imagen real. Un servidor que responde a /favicon.ico con una página HTML y estado 200 rompe el icono, aunque la pestaña de red parezca correcta. Las aplicaciones de una sola página suelen hacerlo.

Tamaños que puedes eliminar

Apple touch icons de 57, 60, 72, 76, 114, 120, 144 y 152 px. iOS reduce el de 180 px.
mstile-*.png, browserconfig.xml y las etiquetas msapplication-*. Servían para los mosaicos del menú Inicio de Windows 8 y 10.
El mask-icon de Safari. Safari 12 y posteriores usan el favicon normal para las pestañas fijadas.
Enlaces PNG separados de 16×16 y 32×32 cuando favicon.ico ya incluye ambos.

Comprueba tu juego de iconos

Favicon Checker descarga todos los archivos anteriores de tu sitio, mide su tamaño y formato reales y muestra cómo se ven los iconos en pestañas, Google, iOS y Android.