Favicon: qué es y cómo ponerlo en tu web

Q: ¿Por qué Google no muestra mi favicon?

Las causas habituales: no está declarado con en la página de inicio, no es cuadrado, es demasiado pequeño, su URL está bloqueada en robots.txt o cambia a menudo. También puede ser cuestión de tiempo, porque Google lo recoge al volver a rastrear tu inicio. Y si considera que el icono es inapropiado, lo sustituye por uno genérico.

Por qué importa

No te hace subir posiciones, pero sí cambia cómo se ve tu resultado: Google muestra el favicon al lado de cada resultado y, si no encuentra uno válido, pone un icono genérico. Entre diez resultados con logo, el tuyo es el único sin él. Lo mismo pasa en la pestaña del navegador cuando alguien tiene varias abiertas y busca la tuya.

Es de esas cosas que se configuran una vez y se olvidan, así que merece la pena hacerlo bien: un icono cuadrado, reconocible a 16 píxeles y coherente con tu logo.

Cómo lo comprueba Posiciona

Buscamos en el HTML las etiquetas <link> con rel="icon", rel="shortcut icon", rel="apple-touch-icon" o rel="apple-touch-icon-precomposed". Con favicon estándar e icono de Apple, 100; solo el estándar, 80; solo el de Apple, 70; ninguno, 30. No contamos un /favicon.ico en la raíz que no esté declarado: solo lo que indica el HTML, que es como Google pide que se declare.

En la nota de SEO esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Parte de tu logo o de su símbolo en una versión cuadrada y simplificada: a 16 o 32 píxeles, un logotipo con texto largo es ilegible.
Prepara un icono cuadrado de más de 48×48 píxeles (por ejemplo, 96×96 o 192×192) en PNG, o un SVG. Google exige que sea cuadrado y recomienda que supere los 48×48 píxeles.
Crea también un Apple Touch Icon de 180×180 píxeles en PNG, con fondo sólido: iOS no respeta bien las transparencias en este icono.
Súbelos a tu web y decláralos en el <head> de todas las páginas (como mínimo, la de inicio), con URLs estables que Google pueda rastrear: no las bloquees en robots.txt.
Comprueba que se ven en una pestaña nueva y en el móvil. En Google el cambio tarda: se actualiza cuando vuelve a rastrear tu página de inicio, lo que puede llevar días o semanas. Puedes pedir que la rastree desde la inspección de URLs de Search Console.

En el head de cualquier webHTML

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Icono de Apple en theme.liquid (Shopify, temas tipo Dawn)Liquid (Shopify)

{%- if settings.favicon != blank -%}
  <link rel="apple-touch-icon" sizes="180x180" href="{{ settings.favicon | image_url: width: 180, height: 180 }}">
{%- endif -%}

En WordPress

En WordPress, el favicon se llama “Icono del sitio”. En temas clásicos está en Apariencia → Personalizar → Identidad del sitio; en temas de bloques puedes usar tu logo como icono desde los ajustes del bloque Logo del sitio, en el editor del sitio.
Sube una imagen cuadrada de al menos 512×512 píxeles: WordPress genera los tamaños necesarios y añade tanto el favicon como el icono de Apple.

En Shopify

En Shopify, el favicon se sube desde el editor del tema (Tienda online → Temas → Personalizar), en la configuración del tema; en Dawn y temas similares está en el apartado del logotipo.
Muchos temas solo generan el favicon estándar. Para añadir el de Apple, abre theme.liquid en Tienda online → Temas → Editar código y pega el segundo ejemplo dentro del <head>.

Preguntas frecuentes

¿Por qué Google no muestra mi favicon?

Las causas habituales: no está declarado con <link rel="icon"> en la página de inicio, no es cuadrado, es demasiado pequeño, su URL está bloqueada en robots.txt o cambia a menudo. También puede ser cuestión de tiempo, porque Google lo recoge al volver a rastrear tu inicio. Y si considera que el icono es inapropiado, lo sustituye por uno genérico.

¿Qué formato es mejor: ICO, PNG o SVG?

Google acepta cualquier formato de favicon válido. PNG es lo más sencillo y compatible. SVG se ve nítido a cualquier tamaño, pero conviene acompañarlo de un PNG por si algún navegador no lo admite. ICO solo tiene sentido como respaldo para programas antiguos. Para el icono de Apple usa siempre PNG.