Respuesta corta. El tamaño del favicon para la pestaña es 32×32 px, con 16×16 dentro del mismo favicon.ico. Añade un PNG opaco de 180×180 como apple-touch-icon y, en el manifiesto, 192×192 y 512×512. Google Search pide un icono cuadrado de al menos 8×8 px y recomienda uno mayor de 48×48 px.
Las búsquedas de “tamaño favicon”, “favicon medidas” o “tamaño del favicon” suelen mezclar tres cosas distintas: el tamaño al que se dibuja el icono, el archivo que hay que subir y medidas antiguas que ya no hace falta generar. Esta tabla separa las tres.
Tabla de tamaños y medidas del favicon
| Medida | Archivo | Dónde se usa | ¿Publicarlo? |
|---|---|---|---|
| 16×16 | favicon.ico | Pestaña en pantallas 1× y marcadores antiguos | Sí, dentro del ICO |
| 32×32 | favicon-32x32.png y el ICO | Pestaña en pantallas Retina. El navegador la dibuja a 16 px CSS | Sí |
| 48×48 | favicon.ico | Acceso directo del escritorio de Windows | Recomendado, dentro del ICO |
| 256×256 | favicon.ico | Accesos directos de Windows en pantallas de alta densidad | Opcional |
| SVG | icon.svg con sizes="any" | Pestaña en Chrome, Firefox, Edge y Safari actuales | Recomendado |
| 180×180 | apple-touch-icon.png | Icono de pantalla de inicio en iPhone y iPad | Sí |
| 192×192 | manifiesto, purpose: any | Pantalla de inicio de Android y Chrome | Recomendado |
| 512×512 | manifiesto, any y maskable | Instalación de la PWA y pantalla de arranque | Recomendado |
No hace falta un PNG suelto para cada fila. Un favicon.ico puede llevar 16, 32 y 48 (y, si quieres, 256) en el mismo archivo. El SVG, el touch icon y los dos iconos del manifiesto sí son archivos aparte.
Tamaño de favicon en la pestaña
La pestaña se dibuja a unos 16 píxeles CSS. En una pantalla 2× el navegador necesita 32 píxeles físicos para que no se vea borroso. Por eso el tamaño de referencia sigue siendo 32×32, no 16×16 ni 512×512.
Un solo archivo enorme tampoco resuelve la pestaña. El navegador reduce un logo de 512 px y los trazos finos se empastan. El favicon.ico de 16/32/48 y un PNG de 32×32 cubren las pestañas de escritorio. En navegadores actuales, un SVG con viewBox y sizes="any" escala sin ese paso intermedio. El atributo sizes="any" es el que marca el icono como escalable; no declares el mismo SVG varias veces con medidas fijas.
Medidas del favicon para Google
En los resultados de búsqueda, Google usa un solo favicon por hostname. La documentación de Search Central pide esto:
- Imagen cuadrada, relación 1:1. El mínimo es 8×8 px. Recomiendan un archivo mayor de 48×48 px para que se vea bien al reducirlo.
- Formatos admitidos: ICO, PNG, GIF, JPEG, BMP, TIFF y PPM. El SVG no está en esa lista.
- La página de inicio tiene que poder rastrearse con Googlebot, y el archivo del icono con Googlebot-Image.
- La URL del icono debe ser estable. Cumplir las reglas no garantiza que el icono aparezca.
La norma antigua de “múltiplos de 48” (48, 96, 144…) ya no está en la documentación actual. Un PNG de 192×192 o el favicon.ico de la raíz cumplen de sobra. Un favicon de solo 16×16 es válido por el mínimo de 8 px, pero queda por debajo de la recomendación.
Apple Touch Icon: 180×180
Para “Añadir a pantalla de inicio”, publica un único PNG opaco de 180×180 px:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">iOS reduce ese archivo para el iPhone y el iPad. No hace falta repetir las medidas históricas (57, 72, 76, 114, 120, 144, 152 o 167). apple-touch-icon-precomposed solo servía para evitar el brillo que iOS añadía antes de iOS 7. Un PNG con transparencia puede verse con fondo negro en versiones antiguas; un fondo sólido del color de la marca evita ese caso. La sintaxis está en la guía de Safari Web Content.
Android y PWA: 192×192 y 512×512
Chrome y el manifiesto de aplicación web usan dos medidas, tal como resume web.dev:
- 192×192 para la pantalla de inicio de Android.
- 512×512 para la pantalla de instalación y el arranque de la PWA.
Si el lanzador recorta el icono en círculo, gota o cuadrado redondeado, añade una segunda imagen de 512×512 con "purpose": "maskable". La zona segura es un círculo centrado cuyo diámetro mide el 80 % del lado: unos 410 px en un icono de 512. El logotipo tiene que caber dentro de ese círculo; lo que queda fuera puede recortarse. La regla está en la especificación del manifiesto.
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192", "purpose": "any" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any" },
{ "src": "/icon-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
]
}HTML mínimo
Con estos enlaces en el <head> de la página de inicio cubres pestaña, iOS y el manifiesto:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">El favicon.ico de la raíz sigue haciendo de respaldo cuando la página no declara un <link rel="icon">. Los mosaicos de Windows (70×70, 150×150, 310×310) y browserconfig.xml eran de Internet Explorer y de la pantalla Inicio de Windows 8. Edge actual no los necesita.
Qué no generar
- Una lista de veinte PNG “por si acaso”. 16, 32 y 48 van dentro del ICO; el resto son el SVG, el touch icon y los iconos del manifiesto.
- Un único PNG de 512×512 esperando que la pestaña salga nítida. Para 16 px hace falta un dibujo pensado a ese tamaño.
- Medidas que no son cuadradas. Ni Google, ni iOS, ni el manifiesto aceptan un favicon apaisado.
- Un SVG como único icono si te importa el resultado de Google. Sirve en la pestaña; para la búsqueda deja también un ICO o un PNG.
Preguntas frecuentes
¿Cuál es el tamaño del favicon?
32×32 px para la pestaña, junto con 16×16 dentro del favicon.ico. Si solo puedes subir una imagen, en WordPress o en una tienda, usa un PNG cuadrado de 512×512 y deja que la plataforma recorte los tamaños pequeños.
¿Qué medidas debe tener un favicon?
16×16, 32×32 y 48×48 en el ICO; 180×180 para el apple-touch-icon; 192×192 y 512×512 en el manifiesto. El SVG no tiene una medida fija: se declara con sizes="any".
¿Qué tamaño de favicon pide Google?
Cuadrado, como mínimo 8×8 px, y a ser posible mayor de 48×48 px. Un archivo de 16×16 entra en el mínimo, pero se ve peor en los resultados. Los formatos de la búsqueda son ICO, PNG, GIF, JPEG, BMP, TIFF y PPM.
¿Un favicon puede ser rectangular?
No. Todas las medidas son 1:1. Si partes de un logo horizontal, recórtalo a un símbolo cuadrado antes de exportar.
Para ver qué medidas publica un sitio concreto, pega su dominio en el extractor de favicon. Si quieres generar el paquete desde un logo, la herramienta Imagen a favicon exporta estas medidas en un ZIP. La versión en inglés de esta tabla está en la favicon sizes guide.