Cómo poner un favicon en tu web: WordPress, Wix, Squarespace y Shopify

Cambiaste el logo, publicaste la web y en la pestaña del navegador sigue apareciendo un globo gris. El icono de la pestaña es un archivo aparte, y casi todos los creadores de webs lo piden en un ajuste propio.

Esta guía sigue un ejemplo ilustrativo, un tostador de café llamado Bean There, desde su logo hasta un favicon que aparece en la pestaña, en los marcadores, en la pantalla de inicio del móvil y junto a la web en Google. Con cualquier otro logo, los pasos son los mismos.

En resumen

• El favicon se hace con el símbolo del logo, no con el logo completo y el nombre.
• Un juego completo son pocos archivos: favicon.ico, favicon.svg, un icono de 180 píxeles para iPhone y dos PNG más grandes para Android.
• Los creadores de webs piden una sola imagen cuadrada y generan ellos los tamaños pequeños.
• Si programas tu web, los archivos van en la carpeta raíz y cuatro líneas van en el <head>.
• Los navegadores guardan el favicon viejo en caché, así que revisa el resultado en una ventana privada.

Con qué se hace un favicon

En la pestaña del navegador, el favicon ocupa un cuadrado de 16 píxeles. A ese tamaño el nombre de un negocio se convierte en una mancha gris, así que el favicon se dibuja solo con el símbolo: la marca, el monograma o la primera letra. Bean There tiene una B con un grano de café, y eso es lo que va en la pestaña.

La forma cuadrada también cuenta. Un símbolo ancho se reduce hasta caber en el cuadrado y queda aún más pequeño. Si tu símbolo es ancho, el favicon suele necesitar una versión recortada o reordenada en cuadrado.

Mira primero la versión de 16 píxeles. A ese tamaño las líneas finas desaparecen y dos formas pequeñas se juntan. En el icono de Bean There, la línea del grano es lo bastante gruesa para sobrevivir; una línea fina no lo sería.

Los archivos de un favicon completo

Cada sitio donde aparece tu icono busca su propio archivo:

• favicon.ico para la pestaña y los marcadores, también en navegadores antiguos y en Windows. Un solo archivo contiene las versiones de 16, 32 y 48 píxeles.
• favicon.svg, que los navegadores modernos muestran nítido a cualquier tamaño.
• apple-touch-icon.png de 180 × 180, el icono que el iPhone o el iPad ponen en la pantalla de inicio cuando alguien guarda tu web.
• android-chrome-192x192.png y android-chrome-512x512.png, con un pequeño archivo site.webmanifest que los indica, para lo mismo en Android.
• Una versión adaptable de 512 píxeles con más margen alrededor del símbolo, porque Android recorta los iconos en círculos y cuadrados redondeados.

Google también muestra tu icono junto a tus páginas en los resultados. Su documentación pide una imagen cuadrada de al menos 8 × 8 píxeles, recomienda una mayor de 48 × 48 y no incluye SVG entre los formatos que lee. Por eso el .ico o un PNG tienen que estar en la web aunque el SVG se vea perfecto en tu navegador.

No hace falta crearlos a mano. Escribe el nombre de tu negocio arriba en nuestra página de inicio, abre en el editor el logo que te guste y elige Paquete de favicon (ZIP): incluye todos los archivos anteriores, el manifiesto y las cuatro líneas de HTML. Crea los archivos de favicon con tu logo y vuelve aquí para el paso de tu plataforma.

Dónde está el ajuste en cada plataforma

WordPress

Desde WordPress 6.5, el ajuste está en Ajustes › Generales › Icono del sitio (en la interfaz en inglés: Settings › General › Site Icon). WordPress pide una imagen cuadrada de al menos 512 × 512 píxeles, así que sube android-chrome-512x512.png y guarda. Las versiones anteriores tienen el mismo ajuste en Apariencia › Personalizar › Identidad del sitio.

Wix

Wix permite un favicon propio cuando la web tiene un plan Premium y un dominio conectado. El ajuste está en Ajustes › Ajustes del sitio web › Favicon. Su centro de ayuda pide una imagen cuadrada cuyos lados sean múltiplo de 48 píxeles, así que favicon-96x96.png encaja.

Squarespace

El ajuste del icono del navegador ha cambiado de sitio entre versiones de Squarespace. Lo más rápido es buscar «favicon» o «browser icon» en el panel de ajustes. Sube android-chrome-192x192.png.

Shopify

Ve a Tienda online › Temas › Personalizar › Configuración del tema. Según el tema, el favicon está en Logo o en Favicon. Shopify reduce la imagen por su cuenta, y favicon-96x96.png es un tamaño cómodo para dársela. Después publica el tema: un cambio en un tema sin publicar no llega a la tienda en línea.

Una web programada por ti

Sube todos los archivos del paquete a la carpeta raíz de la web, la que contiene tu página de inicio. Después añade estas líneas dentro del <head> de cada página:

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

La línea del .ico va primero, para los navegadores antiguos y para Google. Los navegadores que leen SVG usan la segunda.

Por qué sigue apareciendo el icono viejo

Los navegadores guardan los favicons mucho más tiempo que el resto de la página. Si no aparece el nuevo, abre la web en una ventana privada o en otro navegador antes de cambiar nada más. En el móvil, quita el icono guardado de la pantalla de inicio y vuelve a añadirlo.

Google actualiza el icono en los resultados la próxima vez que rastrea tu página de inicio, algo que según su documentación puede tardar de varios días a varias semanas. Solicitar la indexación de la página de inicio en Search Console puede adelantarlo.

Cuando tu símbolo no se lee a 16 píxeles

Algunos logos nunca se dibujaron para un cuadrado de 16 píxeles: una ilustración con mucho detalle, un símbolo de líneas finas o un logotipo de solo texto. Reducirlos no sirve. Necesitan una versión pequeña dibujada a propósito, con menos detalles, trazos más gruesos y formas ajustadas a la cuadrícula de píxeles, para que el icono de la pestaña siga siendo reconociblemente tuyo.

Esa versión pequeña forma parte del trabajo cuando nuestros diseñadores dibujan un logo. Si el favicon es la pieza que nunca termina de quedar bien, nuestros diseñadores dibujan contigo un logo a medida, con sus versiones de favicon e icono de app.

Lista antes de publicar

• El favicon usa el símbolo, no el logo completo con el nombre
• Lo has mirado a 16 píxeles y se sigue leyendo
• favicon.ico, favicon.svg y apple-touch-icon.png están en la web
• Los iconos de Android y site.webmanifest están subidos (en webs programadas por ti)
• Has revisado el resultado en una ventana privada
• Has solicitado la indexación de la página de inicio si Google sigue mostrando el icono viejo