Cómo Añadir un Favicon a Tu Sitio Web (Paso a Paso)
Cuatro pasos, de la pestaña en blanco a una identidad visual con píxeles perfectos. Funciona en cualquier sitio HTML, CMS o framework.
Qué necesitas primero
Un único favicon de 16x16 ya no basta. Los navegadores modernos, iOS, Android y Windows solicitan, cada uno, tamaños y formatos distintos. Antes de añadir cualquier etiqueta, asegúrate de tener un conjunto de iconos completo.
El conjunto mínimo
| Archivo | Tamaño | Quién lo necesita |
|---|---|---|
| favicon.ico | multirresolución | Navegadores y rastreadores que solicitan /favicon.ico por defecto |
| favicon-16x16.png | 16x16 | Pestañas del navegador y la barra de direcciones |
| favicon-32x32.png | 32x32 | Pestañas retina, marcadores y accesos directos del escritorio |
| apple-touch-icon.png | 180x180 | Pantallas de inicio de iOS |
| Icono del manifest | 192x192 | Pantallas de inicio de Android, referenciado desde el web manifest |
Cómo se ven realmente esos tamaños
Los cuatro pasos
- 1
Genera los archivos de tu favicon
Deja que un generador produzca todos los tamaños, el sprite .ico y un manifest.json afinado en una sola pasada. Suelta un logotipo, una captura de pantalla o incluso un emoji y descarga el kit completo. ¿Nunca has creado iconos? Empieza por cómo crear un favicon.
- 2
Añade los archivos a la raíz de tu sitio
Copia los archivos descargados en el directorio que sirve la raíz de tu dominio. En un sitio estático es la carpeta raíz; en la mayoría de los frameworks es el directorio public/. El objetivo es que https://tusitio.com/favicon.ico se resuelva directamente.
- 3
Añade las etiquetas de enlace a tu <head>
Referencia cada icono con etiquetas <link> dentro del <head> del documento (icon, apple-touch-icon y manifest) en todas las páginas, lo que normalmente significa una plantilla o layout compartido.
- 4
Verifica que funciona
Haz el deploy, luego un hard-refresh y comprueba la pestaña. La comprobación más fiable es un escaneo automatizado que confirma que cada etiqueta se resuelve y señala cualquier icono de plataforma que falte.
Las etiquetas de enlace
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Pega esto dentro del elemento <head> de cada página. El enlace del manifest es lo que te da los avisos de instalación y los iconos en la pantalla de inicio. Mira qué es manifest.json.
Atajos específicos por plataforma
¿Usas un framework o CMS? Varios de ellos gestionan las etiquetas del head por ti, con sus propias convenciones. Las guías de plataforma cubren Next.js, React, WordPress y Shopify.
Errores comunes
| Error | Solución |
|---|---|
| Caché del navegador | Los favicons antiguos persisten. Haz un hard-refresh o añade ?v=2 al href del enlace. |
| Ruta incorrecta | La barra inicial importa. /favicon.ico se sirve desde la raíz, no desde la carpeta actual. |
| Falta el apple-touch-icon | Sin él, las pantallas de inicio de iOS recurren a una captura de pantalla borrosa. |
Preguntas frecuentes
¿Dónde coloco el archivo del favicon?
Coloca favicon.ico y los demás archivos de icono en el directorio raíz de tu sitio (o en la carpeta public/ en la mayoría de los frameworks) para que se sirvan desde la raíz del dominio, por ejemplo https://example.com/favicon.ico.
¿Sigo necesitando un archivo favicon.ico?
Sí. Los navegadores y rastreadores todavía solicitan /favicon.ico por defecto, así que entregar un .ico multirresolución junto a iconos modernos PNG y SVG te da la mayor compatibilidad posible.
¿Por qué no se muestra mi favicon después de añadirlo?
Los navegadores almacenan los favicons en caché de forma agresiva. Haz un hard-refresh, añade una cadena de consulta de versión como ?v=2 al enlace y confirma que la ruta del archivo es correcta. Consulta nuestra guía de resolución de problemas de favicon para cada causa.