El favicon es el pequeño icono que aparece en las pestañas, los marcadores y los accesos directos de la pantalla de inicio. Hacerlo bien exige generar varios tamaños y enlazarlos correctamente en el HTML, pero es sencillo cuando conoces los requisitos.
¿Qué es un favicon?
«Favicon» viene de «favorites icon». Originalmente era un icono de 16×16 píxeles para los marcadores de Internet Explorer. Los navegadores y dispositivos modernos piden muchos tamaños:
| Archivo | Tamaño | Uso |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Pestañas, barra de tareas de Windows |
| favicon-16x16.png | 16×16 | Iconos pequeños de pestaña |
| favicon-32x32.png | 32×32 | Pestañas estándar |
| apple-touch-icon.png | 180×180 | Acceso directo en iOS |
| android-chrome-192x192.png | 192×192 | Pantalla de inicio de Android |
| android-chrome-512x512.png | 512×512 | Pantalla de bienvenida de Android, PWA |
Generar todos los tamaños con ZapFile
- Abre el generador de favicon de ZapFile
- Sube una imagen cuadrada (mejor PNG, de al menos 512×512 píxeles)
- Genera los tamaños
- Descarga el ZIP con todos los tamaños y el archivo
.ico
Añadir los favicons a tu web
Añade estas etiquetas en la sección de tu HTML:
<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">Para aplicaciones web progresivas (PWA), añade también un archivo site.webmanifest:
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Diseñar un buen favicon
Que sea sencillo
A 16×16 píxeles los logotipos complejos no se reconocen. Usa la inicial de tu marca, un icono simplificado o un bloque de color.Contraste alto
El favicon se ve sobre interfaces claras y oscuras. Prueba ambas. Un fondo liso del color de tu marca con un símbolo blanco funciona en los dos modos.Empieza en 512×512
Genera desde la fuente de mayor resolución. ZapFile reduce limpiamente desde 512 px, pero ampliar desde 16 px da resultados borrosos.Favicons SVG (navegadores modernos)
Los navegadores basados en Chromium admiten favicons SVG, que escalan perfectamente a cualquier tamaño. Añádelo junto a tus PNG/ICO:<link rel="icon" type="image/svg+xml" href="/favicon.svg">Errores frecuentes
- Usar una imagen de origen de baja resolución: empieza siempre con 512 px o más
- Ofrecer solo
.ico: los dispositivos modernos necesitan los tamaños PNG; solo con ICO, iOS y Android se quedan sin un icono adecuado - Olvidar la caché: tras cambiar el favicon, los navegadores guardan el antiguo con insistencia. Añade un parámetro de versión (
favicon.ico?v=2) durante el desarrollo
Resumen
- Los favicons necesitan varios tamaños para navegadores, iOS, Android y PWA
- Empieza con un PNG cuadrado de 512×512 y genera todos los tamaños de una vez
- El generador de favicon de ZapFile crea todos los tamaños necesarios y el archivo ICO en segundos