Para poner un favicon en HTML hoy no necesitas los treinta archivos que te pide cualquier generador. Con tres cubres navegadores, móviles y los resultados de Google.
He reescrito este artÃculo entero porque la versión anterior era de 2014 y recomendaba cosas que hoy sobran: etiquetas para Internet Explorer 10, que se retiró en 2022, y tamaños para el iPad de primera generación. Seguir aquel tutorial hoy te dejarÃa el head lleno de lÃneas inútiles.
Aquà tienes lo que funciona en 2026, el código listo para copiar, y algo que ningún tutorial en español menciona: los requisitos de Google para que tu favicon salga en los resultados de búsqueda.
Los 3 archivos que necesitas
Para tener un favicon en HTML completo, sube estos tres archivos a la raÃz de tu web, al mismo nivel que el index.html.
| Archivo | Para qué | Tamaño |
|---|---|---|
| favicon.ico | Compatibilidad con navegadores antiguos y peticiones automáticas a la raÃz | 32×32 |
| favicon.svg | El principal. NÃtido a cualquier tamaño y se adapta al modo oscuro | Vectorial |
| apple-touch-icon.png | Cuando alguien guarda tu web en la pantalla de inicio de un iPhone | 180×180 |
El tercero no es opcional aunque lo parezca. Safari en iOS ignora la etiqueta link rel="icon". Si no pones el apple-touch-icon, quien guarde tu web en su pantalla de inicio verá una captura borrosa de la página en vez de tu logo.
Para el apple-touch-icon, usa un PNG plano de 180×180 con tu logo sobre un fondo sólido de tu color de marca. Nada de transparencias: iOS las rellena de negro.
El código para el head
Declarar el favicon en HTML son estas tres lÃneas dentro de <head>. Nada más.
<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">Dos detalles que importan:
- Las rutas empiezan con barra (
/favicon.svg). Sin ella, el navegador la busca en la carpeta de la página actual y en las subpáginas te fallará. - El navegador elige el SVG si lo entiende y cae al
.icosi no. No hace falta ordenarlos de ninguna forma especial.
Si además tu web es una PWA, añade el manifiesto y dos PNG:
<link rel="manifest" href="/site.webmanifest">Dentro del site.webmanifest se referencian dos iconos: uno de 192×192 y otro de 512×512. Si tu web no es una app instalable, sáltate este paso entero.
Favicon SVG que se adapta al modo oscuro
Este es el motivo principal para declarar el favicon en HTML con un SVG, y casi nadie lo aprovecha.
Si tu logo es oscuro, en una pestaña en modo oscuro se pierde contra el fondo. Con un PNG tendrÃas que crear dos archivos y no hay forma de alternarlos. Con SVG sÃ, porque un SVG admite CSS dentro.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="TU_TRAZADO_AQUI"/>
</svg>Guarda eso como favicon.svg y tu logo se pondrá blanco solo cuando el sistema esté en modo oscuro. Un archivo, dos versiones.
Simplifica el trazado antes de usarlo. Un favicon se ve a 16px: los detalles finos desaparecen y solo añaden peso. Si tu logo tiene texto, quÃtalo y deja el sÃmbolo.
Requisitos de Google para los resultados
Google muestra el favicon junto a tu resultado en las búsquedas desde móvil. Es lo primero que ve la persona antes de leer el tÃtulo, asà que conviene que salga.
Estos son los requisitos que Google documenta:
- Cuadrado, proporción 1:1, de al menos 8×8px. Google recomienda que sea mayor de 48×48px para que se vea bien en distintas superficies.
- Vale cualquier formato válido: PNG, ICO o SVG.
- La URL debe ser estable. No la cambies cada vez que retoques el logo.
- Tiene que ser rastreable por Googlebot-Image. Si la bloqueas en el robots.txt, no aparece.
- Solo se admite un favicon por hostname, y se declara en la página de inicio.
Un mito muy extendido que conviene aclarar: no existe ninguna regla de que el favicon deba medir 48×48 ni un múltiplo de 48. Es una confusión que circula en muchos artÃculos. Lo que dice Google es que recomienda un tamaño superior a 48px, que no es lo mismo.
Y ten paciencia: después de subirlo, Google puede tardar desde varios dÃas hasta varias semanas en rastrear tu portada y mostrarlo. No es que lo hayas hecho mal.
Puedes consultar la documentación oficial en Google Search Central.
Qué ya no hace falta
Si copias el favicon en HTML de un tutorial antiguo, o del que habÃa en esta misma página hasta hoy, te vas a encontrar estas etiquetas. Puedes borrarlas todas.
rel="shortcut icon". El «shortcut» es un resto de Internet Explorer sin ningún efecto. Usa solorel="icon".apple-touch-icon-precomposed. Obsoleto. Hoy esapple-touch-icona secas.msapplication-TileColorymsapplication-TileImage. Eran para los mosaicos de Windows 8 e Internet Explorer 10, retirado en junio de 2022.- La lista de
apple-touch-iconcon tamaños 57, 72, 114 y 144. Son de iPads y iPhones anteriores a 2013. Con el de 180×180 sobra. - El atributo
type="image/x-icon"en el .ico. Redundante.
Los generadores de favicon siguen escupiendo veinte o treinta archivos porque nunca han limpiado sus plantillas. Puedes usarlos para generar las imágenes y quedarte solo con las tres que te he dicho.
Si usas WordPress
Aquà no hace falta que escribas el favicon en HTML a mano. Ve a Apariencia > Personalizar > Identidad del sitio y sube el archivo en «Icono del sitio». WordPress genera los tamaños y coloca las etiquetas solo.
Dos cosas a tener en cuenta:
- WordPress pide un cuadrado de 512×512 como mÃnimo, y a partir de ahà recorta el resto.
- No admite SVG por defecto, asà que pierdes lo del modo oscuro. Si te importa, añade la lÃnea del SVG a mano en el
headdesde el archivo del tema hijo.
Preguntas frecuentes
¿Por qué no se ve mi favicon?
Casi siempre es la caché del navegador, que guarda los favicon con mucha insistencia. Prueba en ventana de incógnito o abre la ruta directa (tudominio.com/favicon.svg) para confirmar que el archivo está donde dices. Si carga ahÃ, es caché.
¿Sigue haciendo falta el archivo .ico?
SÃ, y no tanto por los navegadores como por costumbre del ecosistema: hay lectores de feeds, bots y herramientas que piden /favicon.ico a la raÃz sin mirar el HTML. Pesa poco y te evita errores 404 en el registro del servidor.
¿Qué tamaño debe tener el favicon?
El SVG no tiene tamaño, escala solo. El .ico, 32×32. El apple-touch-icon, 180×180. Y para que Google lo muestre en sus resultados, que la imagen de origen supere los 48×48.
¿Puedo poner un GIF animado de favicon?
Técnicamente algunos navegadores lo aceptan, pero no te lo recomiendo. Distrae de lo que la persona está leyendo, no funciona en todos los navegadores y Google no lo mostrará en los resultados.
¿El favicon afecta al SEO?
No es un factor de posicionamiento, pero sà influye en el CTR. En las búsquedas desde móvil tu favicon aparece junto al resultado, y un icono reconocible ayuda a que la gente te elija frente a un resultado sin identidad visual.
¿Dónde subo los archivos del favicon en HTML?
A la raÃz del dominio, donde está el index.html. Puedes ponerlos en una subcarpeta si ajustas las rutas del head, pero el favicon.ico conviene dejarlo en la raÃz porque hay herramientas que lo buscan ahà a ciegas.
Sigue por aquÃ
- Cómo crear una página web en HTML: la guÃa completa donde encaja este paso.
- Errores técnicos de SEO: más detalles que afectan a cómo te ve Google.
- Sección de iconos: para diseñar el sÃmbolo de tu favicon si aún no lo tienes.
- Todo lo de HTML: el resto de artÃculos de la categorÃa.
- Sección de WordPress: si tu web va sobre WordPress.
Tres archivos, tres lÃneas y a otra cosa. Si te falla algo al ponerlo, cuéntamelo en los comentarios y lo miramos.
