Favicon viene de "favorite icon" — el ícono que los navegadores guardan junto con los favoritos. Hoy el concepto fue mucho más allá: el favicon aparece en pestañas del navegador, en la barra de direcciones, en accesos directos del escritorio, en la pantalla de inicio de celulares iOS y Android, en resultados de Google, y como ícono de Progressive Web Apps (PWA). Cada contexto exige un tamaño diferente.
El error más común es crear solo un archivo favicon.ico de 16×16 píxeles y dar el trabajo por terminado. En un monitor Retina o en un iPhone, ese ícono se verá borroso. La solución es generar un conjunto completo de tamaños — lo que parece complicado, pero puede hacerse en segundos con la herramienta adecuada.
Qué es el archivo .ico y cuándo usarlo
El formato .ico es el formato original de favicon, creado por Microsoft en los años 90. Tiene una característica especial: puede contener múltiples tamaños dentro de un único archivo — por ejemplo, 16×16 y 32×32 al mismo tiempo. El navegador elige el tamaño más adecuado para cada contexto.
El favicon.ico todavía es necesario en 2026 por un motivo específico: navegadores antiguos y algunos robots de búsqueda intentan acceder automáticamente al archivo en /favicon.ico en la raíz del sitio. Si no existe, se genera un error 404 innecesario en los logs del servidor. Por eso, aunque uses PNG moderno para todo, es recomendable tener un favicon.ico en la raíz.
Tabla completa de tamaños de favicon
Esta es la lista de todos los tamaños que un favicon completo debe cubrir en 2026:
| Tamaño | Formato | Dónde se usa |
|---|---|---|
| 16 × 16 px | .ico / PNG | Pestaña del navegador (estándar) |
| 32 × 32 px | .ico / PNG | Acceso directo en el escritorio (Windows), pestañas en pantallas HiDPI |
| 48 × 48 px | .ico / PNG | Acceso directo en Windows Explorer |
| 57 × 57 px | PNG | iPhone (iOS 1–6, pantallas no-Retina) |
| 60 × 60 px | PNG | iPhone (iOS 7+, pantallas no-Retina) |
| 72 × 72 px | PNG | iPad (iOS 1–6, pantallas no-Retina) |
| 76 × 76 px | PNG | iPad (iOS 7+, pantallas no-Retina) |
| 96 × 96 px | PNG | Acceso directo en Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), tile de Windows 8 |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus y versiones más recientes |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Splash screen de Android Chrome, PWA de alta resolución |
💡 Buena noticia: no necesitas crear cada tamaño manualmente. El Generador de Favicon de ImageTools genera todos estos archivos automáticamente a partir de una sola imagen — incluyendo el .ico con múltiples tamaños y un ZIP con todos los PNG.
Qué imagen usar como base para el favicon
La imagen de origen debe tener al menos 512×512 píxeles — ese es el tamaño máximo necesario, y partir de una imagen grande garantiza que los tamaños menores se generen con calidad. Usar una imagen pequeña como base resulta en íconos borrosos en los tamaños más grandes.
Formatos aceptados como entrada
- PNG con fondo transparente — ideal. El ícono queda limpio sobre cualquier color de fondo de pestaña o pantalla de inicio.
- PNG con fondo sólido — funciona bien si el color de fondo combina con el diseño de tu sitio.
- JPG — aceptado, pero sin soporte de transparencia.
- SVG — el mejor punto de partida si lo tienes disponible. Vectorial, cualquier tamaño sin pérdida.
Consejos de diseño para favicons
El favicon es un espacio muy pequeño — la versión de 16×16 tiene solo 256 píxeles en total. Esto impone restricciones de diseño que muchos ignoran:
- Usa el elemento más simple de tu marca. El logo completo suele no funcionar en 16px. Prefiere solo la inicial, un símbolo aislado o una versión simplificada del ícono.
- Evita el texto fino. Cualquier texto en tamaños menores a 32px quedará ilegible.
- Usa alto contraste. El favicon compite con decenas de otras pestañas abiertas — un ícono de bajo contraste desaparece visualmente.
- Un fondo de color sólido funciona mejor que uno transparente en muchos casos. Esto garantiza que el ícono destaque tanto en pestañas claras como oscuras.
- Prueba el resultado en 16px antes de dar el trabajo por terminado. Un diseño que se ve genial en 512px puede volverse irreconocible en 16px.
Genera tu favicon ahora — todos los tamaños de una vez
Sube tu imagen y descarga un ZIP con el .ico y todos los PNG necesarios para navegadores, iPhone, Android y PWA. Gratis, sin registro.
Crear favicon gratisCómo instalar el favicon en tu sitio
Después de generar los archivos, debes referenciarlos en el <head> del HTML. El código completo recomendado para 2026 es:
<!-- Favicon básico para navegadores -->
<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">
<!-- Apple Touch Icon (iPhone y iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android y PWA -->
<link rel="manifest" href="/site.webmanifest">El archivo favicon.ico debe estar en la raíz del sitio (el mismo directorio que index.html). Los demás archivos PNG pueden estar en la raíz o en una subcarpeta, siempre que las rutas en el HTML sean correctas.
El archivo site.webmanifest
Para PWAs y para que Android Chrome reconozca tu ícono correctamente, necesitas un archivo site.webmanifest en la raíz del sitio. El contenido básico es:
{
"name": "Nombre de Tu Sitio",
"short_name": "Sitio",
"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"
}📦 El ZIP del Generador de Favicon ya incluye el archivo site.webmanifest preconfigurado con las rutas correctas — solo descomprime y sube los archivos a la raíz de tu sitio.
Cómo instalarlo en plataformas específicas
WordPress
En WordPress, el favicon se llama "ícono del sitio". Para configurarlo: entra a Apariencia → Personalizar → Identidad del Sitio y haz clic en "Seleccionar Ícono del Sitio". WordPress se encarga automáticamente de generar los tamaños necesarios a partir de la imagen que subas — solo usa una imagen cuadrada de al menos 512×512 píxeles.
Shopify
En Tienda Online → Preferencias, baja hasta "Ícono de la tienda" y sube una imagen cuadrada de al menos 512×512 píxeles en PNG o JPG.
Wix
En Configuración → Identidad de Marca → Favicon. Usa una imagen cuadrada en PNG o JPG.
Squarespace
En Diseño → Estilo del Navegador, sección "Favicon". Recomendado: PNG cuadrado de 100×100 píxeles (Squarespace hace el resto).
HTML/CSS puro o frameworks
Coloca todos los archivos generados en la raíz del proyecto y agrega las etiquetas <link> mostradas arriba en el <head> de cada página — o en el layout base, si usas un framework como Next.js, Nuxt, o similar.
Verificando si el favicon está funcionando
Después de instalarlo, abre el sitio en una pestaña del navegador y verifica si el ícono aparece en la pestaña. Si no aparece de inmediato, intenta:
- Limpiar la caché del navegador (Ctrl+Shift+R en Windows, Cmd+Shift+R en Mac).
- Abrir en una pestaña de incógnito — que no usa caché.
- Esperar unos minutos, ya que los navegadores suelen almacenar favicons en caché por períodos variables.
- Verificar que la ruta del archivo en el HTML sea correcta y que el archivo realmente exista en el servidor.