Favicon: tamaños, formatos y código HTML que necesitas

El favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores, en la pantalla de inicio del móvil y junto a tu web en los resultados de Google. Es pequeño, pero transmite marca y confianza. Durante años se recomendaba generar decenas de tamaños; hoy basta con un conjunto reducido. En esta guía tienes los tamaños necesarios, el código HTML y los requisitos para que Google lo muestre.

El conjunto mínimo recomendado

Con estos cinco archivos cubres prácticamente todos los casos. El generador de favicon crea el conjunto completo a partir de una imagen.

El código HTML

En el <head> de todas las páginas:

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

Y el archivo manifest.webmanifest:

{
  "name": "Mi Empresa",
  "short_name": "MiEmpresa",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

Si dudas de la sintaxis del manifest, la guía de JSON explica los errores que lo invalidan.

Iconos “maskable”

Android recorta los iconos de las apps instaladas en círculos, cuadrados redondeados u otras formas. Un icono maskable deja un margen de seguridad: el logotipo debe caber en el círculo central del 80 % del lienzo, con el fondo cubriendo todo el cuadrado.

Favicon en los resultados de Google

Google muestra el favicon junto al nombre del sitio en los resultados móviles y de escritorio. Según sus directrices actuales:

• Debe declararse en la página principal con <link rel="icon"> (también valen shortcut icon y apple-touch-icon).
• Debe ser cuadrado (1:1) y de al menos 8 × 8 px, aunque Google recomienda claramente usar más de 48 × 48 px para que se vea nítido.
• Tanto el archivo como la página principal deben poder rastrearse: no lo bloquees en robots.txt (la guía de robots.txt explica cómo revisarlo).
• Debe representar la marca y no contener contenido inapropiado; si no, Google muestra un icono genérico.
• Su URL debe ser estable: si la cambias con frecuencia, Google tarda en actualizarlo.

Un SVG o un PNG de 48, 96 o 192 px cumplen sin problemas.

Modo oscuro con SVG

Un favicon SVG puede adaptarse al tema del sistema:

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

Así el icono no desaparece sobre pestañas oscuras. Para elegir colores con suficiente contraste, revisa la guía de contraste de color.

Dónde colocar los archivos

Lo más sencillo es dejar todos los iconos en la raíz del dominio (https://tudominio.com/favicon.ico), porque algunos navegadores y servicios piden /favicon.ico aunque no esté enlazado. En WordPress, el “Icono del sitio” del personalizador genera varias de estas versiones a partir de una imagen de 512 × 512 px. En Shopify, Wix y otros constructores se sube desde los ajustes del tema.

Tras publicar, comprueba que cada archivo responde con código 200 y con el tipo correcto (image/x-icon, image/svg+xml, image/png). La herramienta de cabeceras HTTP muestra el código de estado y el Content-Type de cualquier URL.

Consejos de diseño

• Simplifica: a 16 px no se lee un logotipo con texto. Usa el símbolo o la inicial.
• Contraste: el icono debe verse en pestañas claras y oscuras.
• Sin márgenes excesivos en el ICO y en el SVG; el icono maskable sí necesita margen.
• Fondo: para apple-touch-icon usa fondo sólido; iOS rellena la transparencia en negro.
• Coherencia: el mismo símbolo en todos los tamaños.

Problemas frecuentes

¿Y el favicon de 16 px?

Aunque en las pestañas se ve a 16 × 16 px (32 × 32 en pantallas de alta densidad), no hace falta un PNG suelto de ese tamaño: el favicon.ico multitamaño y el SVG lo cubren. Si tu símbolo tiene detalles finos, conviene revisar a mano la versión de 16 px dentro del ICO y simplificarla (líneas más gruesas, menos elementos) para que no se convierta en una mancha.

Lista de comprobación

1. Genera ICO, SVG, 180, 192 y 512 px.
2. Añade las etiquetas <link> en el <head>.
3. Crea el manifest con los iconos.
4. Comprueba que los archivos devuelven 200 y no están bloqueados.
5. Revisa el aspecto en pestaña clara, oscura y en el móvil.
6. Pide la reindexación de la página principal si has cambiado el icono.