Tamaños de favicon y código HTML (2026): la lista corta | We.Inc
Los archivos de favicon que un sitio necesita de verdad en 2026: favicon.ico, un SVG, un Apple touch icon de 180px e iconos de manifest de 192 y 512, con etiquetas head para copiar y un generador de manifest.
Cinco archivos cubren casi todos los navegadores y dispositivos: un favicon.ico de 32 por 32, un icono SVG para los navegadores modernos, un PNG apple-touch-icon de 180 por 180 para la pantalla de inicio del iPhone, y PNG de 192 por 192 y 512 por 512 incluidos en un web app manifest. La Búsqueda de Google quiere un icono cuadrado, idealmente de más de 48 píxeles.
El conjunto de favicons que vale la pena publicar
Archivo
Tamaño
Lo usa
Cualquiera (vectorial)
Pestañas de navegadores modernos, nítido en cualquier tamaño
Pantalla de inicio de iPhone y iPad
Web app manifest, pantalla de inicio de Android
Web app manifest, pantallas de instalación y de bienvenida
Las guías de favicon antiguas enumeran veinte o más tamaños para dispositivos que ya nadie usa. Hoy el navegador escala a partir de unos pocos archivos de origen buenos, así que el trabajo consiste en elegir los cinco adecuados, escribir bien las etiquetas head y asegurarte de que Google pueda rastrearlos. Usa el generador de abajo para crear las etiquetas y el manifest de tu propio sitio.
Diseña un original cuadrado de 512 por 512 con el logotipo centrado y algo de margen.
Exporta los cinco archivos de la tabla o créalos con nuestro generador de favicon.
Rellena el generador con el nombre y el color de tu sitio, y copia las etiquetas head y el manifest.
Sube los archivos a la raíz del sitio, pega las etiquetas en el head de cada página y fuerza la recarga para comprobarlo.
Prueba la versión de 16 píxeles por separado; el texto fino y las líneas delgadas desaparecen al tamaño de una pestaña, así que simplifica el logotipo.
Añade al SVG una media query para el modo oscuro, para que un logo oscuro siga viéndose en las pestañas oscuras del navegador.
Mantén la parte importante de un icono maskable dentro del círculo central, con un radio del 40% del ancho, porque Android puede recortar el resto.
No bloquees los archivos de icono ni tu página de inicio en robots.txt; Google necesita rastrear ambos para mostrar tu favicon en los resultados.
Los navegadores guardan los favicons en caché de forma agresiva, así que cambia el nombre del archivo o añade un parámetro de versión cuando lo sustituyas.
Preguntas frecuentes
¿Cuál es el mejor tamaño de favicon?
No hay un único tamaño ideal. Publica un ICO de 32 por 32 por compatibilidad y un SVG para pestañas modernas nítidas, y añade el icono de Apple de 180 píxeles y los iconos de manifest de 192 y 512 para las pantallas de inicio. La Búsqueda de Google pide una imagen cuadrada, de al menos 8 píxeles y preferiblemente de más de 48 por 48.
¿Cómo añado un favicon a un sitio web?
Pon los archivos en la raíz de tu sitio y añade etiquetas link en el head de cada página: rel icon para el ICO y el SVG, rel apple-touch-icon para el PNG de 180 píxeles y rel manifest apuntando a un archivo JSON que enumere los iconos de 192 y 512. El generador de esta página escribe esas líneas por ti.
¿Por qué mi favicon no aparece en Google?
Google necesita rastrear tanto tu página de inicio como el archivo del icono, el icono debe ser cuadrado y el enlace tiene que estar en el head de la página de inicio. Los cambios pueden tardar en aparecer porque Google vuelve a rastrear los favicons a su propio ritmo.
¿Todavía necesito favicon.ico?
Vale la pena conservarlo. Algunas herramientas, lectores de feeds y navegadores antiguos piden /favicon.ico directamente sin leer tu HTML, y un ICO pequeño en la raíz les responde.
¿Qué es un icono maskable?
Un icono de manifest marcado con purpose maskable, dibujado con margen adicional para que Android pueda recortarlo en círculo, squircle u otra forma. Mantén el logo dentro de la zona segura central y rellena el fondo de borde a borde.
Por qué la lista se acortó
Hoy los navegadores eligen el icono más cercano y lo escalan, y el formato SVG permite que un solo archivo sirva para cualquier tamaño de pestaña. Los muchos tamaños antiguos de mosaicos de Windows y de Apple eran para plataformas que ya han evolucionado.
La documentación de Safari de Apple sigue describiendo touch icons por dispositivo, pero iOS recurre a un icono más grande cuando no hay uno exacto, así que un único PNG de 180 píxeles cubre bien los iPhone y iPad actuales.
Los iconos del manifest
Según web.dev, los navegadores Chromium necesitan al menos un icono de 192 píxeles y otro de 512 píxeles en el manifest para poder instalar un sitio. Con esos dos, Chrome escala automáticamente para otras densidades.
Cada icono del manifest puede llevar un purpose any, maskable o monochrome. Usa un archivo aparte para maskable, ya que el margen que sienta bien a una forma recortada se ve demasiado pequeño cuando se muestra cuadrado.
Cómo hacer que el favicon aparezca en los resultados de búsqueda
La Búsqueda de Google muestra un favicon junto a los resultados cuando encuentra uno en tu página de inicio. Los valores rel admitidos son icon, shortcut icon, apple-touch-icon y apple-touch-icon-precomposed.
Google también acepta varios formatos, como ICO, PNG, GIF y JPEG. El archivo del icono puede incluso estar en otro dominio, siempre que Googlebot tenga permiso para obtenerlo.