Añadir un favicon a un sitio web en HTML puro requiere una sola línea de código — pero hacerlo bien (para que cada navegador, teléfono e instalación de PWA muestre el icono correcto) requiere unas cuantas más. Esta es la guía completa de 2026: la etiqueta exacta, dónde colocar los archivos y un bloque listo para copiar y pegar que cubre todos los formatos.
Lo mínimo: una línea de HTML
En su forma más simple, un favicon es solo un archivo referenciado en tu <head>:
<link rel="icon" href="/favicon.ico">Coloca favicon.ico en la raíz de tu sitio (la misma carpeta que tu index.html), añade esa etiqueta dentro de <head>, y ya tienes lo básico cubierto.
La configuración completa de favicon en HTML
La línea anterior funciona, pero los navegadores modernos, iOS y Android prefieren cada uno formatos y tamaños distintos. Aquí está el bloque completo recomendado:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Qué hace cada línea:
favicon.ico— el respaldo universal para todos los navegadores (incluidos los antiguos)favicon-32x32.png/favicon-16x16.png— iconos PNG nítidos para las pestañas de los navegadores modernosfavicon.svg— icono vectorial para navegadores modernos; se mantiene nítido a cualquier tamañoapple-touch-icon.png— el icono de 180×180 que iOS usa para las apps de la pantalla de iniciosite.webmanifest— el manifest de PWA que enlaza los iconos para Android/Chrome
¿No quieres crear todos estos archivos a mano? Sube una imagen a Favicon.one y descarga un ZIP con todos los archivos anteriores más HTML listo para pegar.
Dónde colocar los archivos del favicon
Ponlos en la raíz de tu sitio — el mismo directorio que tu index.html. La barra / inicial en los href de arriba significa “desde la raíz del sitio”, así que el navegador siempre los encuentra sin importar en qué página esté.
your-website/
├── index.html
├── about.html
├── favicon.ico ← here
├── favicon-32x32.png
├── favicon-16x16.png
├── favicon.svg
├── apple-touch-icon.png
└── site.webmanifestLa etiqueta link, explicada
El elemento <link rel="icon"> le indica al navegador dónde vive tu favicon. Los atributos clave:
- rel="icon" — “esto es un favicon”
- type — el tipo MIME (
image/x-icon,image/png,image/svg+xml) - sizes — las dimensiones en píxeles, para que el navegador elija la mejor
- href — la ruta del archivo
Cuando declaras varias etiquetas <link rel="icon"> con distintos sizes, el navegador elige la adecuada para la pantalla actual (p. ej. 16×16 en una pantalla normal, 32×32 en una pantalla retina).
El web manifest
El archivo site.webmanifest enlaza tus iconos para Chrome en Android y para PWAs instalables. Un ejemplo mínimo:
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Errores comunes
1. Usar una imagen no cuadrada
Los favicons deben ser cuadrados (1:1). Una imagen rectangular se verá estirada o en blanco.
2. Olvidar el atributo type
Sin type, algunos navegadores adivinan mal y se niegan a renderizar un .ico servido como image/png.
3. Poner los archivos en una subcarpeta pero usar una ruta raíz
Si tus archivos están en /assets/, tu href debe ser /assets/favicon.ico, no /favicon.ico.
4. Caché del navegador
Los navegadores almacenan los favicons en caché de forma muy agresiva. Si no ves tu nuevo icono, pruébalo en una ventana de incógnito. Consulta nuestra guía completa de solución de problemas “Favicon Not Showing” (el favicon no aparece).
Tabla de referencia rápida de tamaños
| Archivo | Tamaño | Propósito |
|---|---|---|
favicon.ico | 16/32/48 | Respaldo universal |
favicon-32x32.png | 32×32 | Pestañas de navegadores modernos |
favicon-16x16.png | 16×16 | Pestañas antiguas |
favicon.svg | vector | Navegadores modernos, modo oscuro |
apple-touch-icon.png | 180×180 | Pantalla de inicio de iOS |
Análisis completo en la guía de tamaños de favicon.
¿Listo? Genera el paquete completo de favicon a partir de una imagen y pega el HTML de arriba — lo tendrás listo en menos de un minuto.