Guía de favicons 2026: qué tamaños y archivos necesitas de verdad

Por qué el favicon importa más de lo que parece

El favicon es la imagen más pequeña de tu web y, aun así, una de las que más veces ve cada usuario: en la pestaña del navegador, en los favoritos, en el historial, en la pantalla de inicio del móvil y, desde 2019, junto a tu web en los resultados de búsqueda de Google en móvil y escritorio.

Un favicon claro y reconocible ayuda a que el usuario encuentre tu pestaña entre otras quince abiertas y aumenta la confianza en los resultados de búsqueda. Un favicon roto (el globo gris por defecto) transmite justo lo contrario: web descuidada o abandonada.

El conjunto mínimo moderno

La especificación ha cambiado mucho en diez años. Hoy, este es el conjunto que recomiendan los equipos de Chrome y Safari y que cubre prácticamente todos los casos:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Y en el manifest:

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

Eso es todo. No necesitas mstile-150x150.png, browserconfig.xml, 12 tamaños de apple-touch-icon ni safari-pinned-tab.svg (Safari usa el icono normal desde la versión 12).

Cada archivo, explicado

favicon.ico

El formato ICO es un contenedor que puede guardar varias imágenes de distintos tamaños. Desde Windows Vista, esas imágenes pueden ser PNG, lo que reduce mucho el peso. Lo recomendable es incluir 16, 32 y 48 px.

Aunque los navegadores modernos prefieren SVG o PNG, el ICO sigue siendo imprescindible por una razón práctica: muchísimos programas (lectores RSS, clientes de correo, herramientas de SEO, el propio Google en algunos casos) piden directamente https://tudominio.com/favicon.ico sin leer tu HTML. Si no existe, devuelven un error 404 en tus registros y muestran un icono genérico.

icon.svg

Un favicon vectorial se ve perfecto en cualquier densidad de pantalla y suele pesar menos de 1 KB. Además permite algo que ningún PNG puede hacer: adaptarse al modo oscuro con una media query dentro del propio archivo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="…"/>
</svg>

Chrome, Firefox y Edge lo admiten; Safari usa el ICO o el PNG como respaldo.

apple-touch-icon.png (180 × 180)

Es el icono que usa iOS cuando alguien añade tu web a la pantalla de inicio, y también el que muestra Safari en algunas listas de favoritos. Dos detalles importantes:

No admite transparencia. iOS rellena las zonas transparentes con negro. Ponle siempre un fondo sólido.
iOS redondea las esquinas automáticamente. Entrégalo cuadrado; si lo redondeas tú, verás un doble borde.

icon-192.png e icon-512.png

Son los que exige el manifest para que Chrome considere tu web instalable como PWA. El de 192 se usa en la pantalla de inicio de Android y el de 512 en la pantalla de bienvenida y en las tiendas de aplicaciones web.

icon-maskable-512.png

Cada fabricante de Android usa una forma distinta para los iconos: círculo, squircle, cuadrado redondeado, gota… Un icono maskable está diseñado para que el sistema lo recorte con cualquiera de esas formas sin cortar el logo. La regla es que todo lo importante quepa dentro de un círculo con el 80 % del diámetro del icono, y que el fondo llegue hasta los bordes.

Si no proporcionas un icono maskable, Android coloca tu icono normal sobre un círculo blanco, lo que suele verse pequeño y poco profesional.

Cómo enlazarlos según tu plataforma

HTML estático, Astro, Eleventy, Hugo: copia los archivos a la carpeta pública y pega las cinco líneas anteriores en el <head> de tu plantilla.

Next.js (App Router): coloca favicon.ico, icon.svg y apple-icon.png dentro de app/. Next.js detecta esos nombres y genera las etiquetas automáticamente, con un hash en la URL para evitar problemas de caché. El manifest puedes generarlo con app/manifest.ts.

WordPress: Apariencia → Personalizar → Identidad del sitio → Icono del sitio. Sube un PNG de 512 px y WordPress genera los tamaños de 32, 180, 192 y 270 px. No crea un ICO ni un icono maskable; si los quieres, añádelos con un plugin de cabeceras o en el tema.

Shopify: Tienda online → Temas → Personalizar → Configuración del tema → Favicon. Shopify redimensiona a 32 px; para el resto necesitas editar theme.liquid.

Cómo conseguir que Google muestre tu favicon

Google muestra el favicon en los resultados si se cumplen estas condiciones (según su documentación para webmasters):

Está enlazado con <link rel="icon"> en la página de inicio del dominio.
Tanto la página de inicio como el archivo del favicon son rastreables: no están bloqueados en robots.txt ni requieren inicio de sesión.
Es cuadrado y su lado es múltiplo de 48 px (48, 96, 144…). Un SVG también es válido.
Representa visualmente tu marca y no es inapropiado.

El cambio puede tardar desde unos días hasta varias semanas. Puedes acelerar el proceso solicitando la indexación de la página de inicio en Search Console.

Errores frecuentes

El favicon no se actualiza. Los navegadores lo cachean durante días. Abre /favicon.ico directamente y recarga con Ctrl+F5, o cambia la URL añadiendo ?v=2.
Logo ilegible a 16 px. Un logotipo con texto no funciona a ese tamaño. Usa el símbolo, la inicial o una versión simplificada.
Icono invisible en modo oscuro. Un logo negro sobre fondo transparente desaparece en la barra de pestañas oscura. Usa un SVG adaptable o añade un fondo.
PNG enormes. Un icon-512.png exportado desde Figma o Photoshop puede pesar más de 100 KB. Optimízalo sin pérdida; normalmente baja a 15-40 KB.
Rutas relativas. Usa siempre rutas absolutas desde la raíz (/favicon.ico), o los iconos fallarán en páginas internas como /blog/articulo.

Genera todo en un minuto

El generador de favicons de ImageZap crea exactamente este conjunto a partir de tu logo, con fondo, margen y esquinas configurables, los optimiza con OxiPNG y te da el código para HTML y Next.js. Todo en tu navegador, sin subir archivos.