Un favicon es el pequeño icono que un navegador muestra en la pestaña, en los marcadores y el historial, y en la pantalla de inicio del teléfono cuando alguien guarda tu sitio. Ponerlo en tu sitio requiere cuatro archivos y unos cinco minutos, y la mayor parte de la frustración que sufre la gente viene de la caché, de la que se ocupa la última sección.
El conjunto mínimo que de verdad funciona
No necesitas dieciséis PNG ni un browserconfig.xml. Los mosaicos de Windows y los antiguos formatos de Internet Explorer están muertos. Cuatro recursos cubren todos los navegadores y dispositivos que se usan hoy en día:
| Archivo | Tamaño | Por qué existe |
|---|---|---|
favicon.ico | 16 · 32 · 48 (multitamaño) | Navegadores antiguos y Google Search, que solicita /favicon.ico directamente. |
icon.svg | vectorial | Los navegadores modernos lo prefieren: nítido a cualquier tamaño y capaz de adaptarse al modo oscuro. |
apple-touch-icon.png | 180 × 180 | Pantalla de inicio de iOS y Safari. iOS ignora el SVG aquí, así que el PNG es obligatorio. |
android-chrome 192 y 512 | 192 · 512 | Pantalla de inicio de Android y PWA instalables, referenciados desde el web app manifest. |
El HTML para pegar en <head>
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
El navegador lee las cuatro líneas y elige el mejor formato que admite, así que un Chrome o Safari actual usa el SVG mientras que un navegador antiguo recurre al .ico. El sizes="48x48" de la línea del .ico simplemente declara la imagen más grande que contiene.
El web app manifest
El manifest es lo que permite que Android y las instalaciones de PWA usen un icono adecuado. Un site.webmanifest mínimo:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
El "purpose": "any maskable" permite que Android recorte el icono según su forma adaptativa sin cortar tu logo, siempre que dejes un margen de seguridad a su alrededor (consulta Consejos avanzados).
Dónde van los archivos
Coloca todos los archivos en el directorio raíz de tu sitio. Los navegadores —y Googlebot— solicitan /favicon.ico desde la raíz automáticamente, incluso sin una etiqueta <link>, así que mantenerlo ahí es la opción más segura por defecto.
Verifica que de verdad funcionó
- Recarga forzada de la página:
Ctrl+Shift+R(Windows) oCmd+Shift+R(Mac). - ¿Sigues atascado? Abre el sitio en una ventana privada o de incógnito: empieza con la caché vacía.
- Carga cada archivo directamente, p. ej.
yourdomain.com/favicon.ico, y confirma que devuelve la imagen (HTTP 200) y no un 404. - Inspecciona el
<head>renderizado en las DevTools, no solo tu archivo fuente: un paso de compilación o un CMS pueden reescribir las rutas.
Lo que más tiempo hace perder: la caché
Los navegadores guardan en caché los favicons con más terquedad que casi cualquier otro recurso, y a veces conservan el antiguo pese a las recargas normales. Si un icono nuevo se niega a aparecer:
- Haz una recarga forzada, luego cierra por completo la pestaña y abre una nueva: la caché de favicons suele estar ligada a la pestaña.
- Mientras pruebas, añade un parámetro de versión para que el navegador lo trate como un archivo nuevo:
<link rel="icon" href="/favicon.ico?v=2">. - Google Search guarda su propia copia y la actualiza según su propio calendario: cuenta con días, a veces semanas, antes de que un resultado de búsqueda muestre el icono nuevo.
Todo en este sitio se ejecuta en tu navegador. La imagen que subes nunca sale de tu dispositivo: no hay ningún servidor al que subirla.