Un favicon (abreviatura de "icono de favoritos") aparece en las pestañas del navegador, los marcadores y las pantallas de inicio de los dispositivos móviles. Es un detalle de marca pequeño pero importante, y su implementación correcta en todos los navegadores y dispositivos es sorprendentemente compleja. Aquí te explicamos cómo hacerlo.
¿Qué es un favicon?
Un favicon es el pequeño icono asociado a un sitio web. Aparece de la siguiente manera:
- En la pestaña del navegador junto al título de tu página.
- En los marcadores y el historial del navegador
- En las pantallas de inicio de iOS/Android cuando un usuario guarda tu sitio (icono táctil de Apple)
- En los instaladores de PWA como el icono de la aplicación
- En los resultados de los motores de búsqueda (a veces)
Una configuración completa de favicon requiere múltiples tamaños y formatos para cubrir todos estos contextos.
Tamaños de favicon requeridos
| Tamaño | Finalidad |
|---|---|
| 16×16 px | Pestaña del navegador (estándar) |
| 32×32 px | Pestaña del navegador (alta resolución), barra de tareas |
| 48×48 px | Iconos de sitios de Windows |
| 180×180 px | Icono táctil de Apple (pantalla de inicio de iOS) |
| 192×192 px | Pantalla de inicio de Android Chrome |
| 512×512 px | Pantalla de inicio de PWA, contextos de alta resolución |
| SVG | Navegadores modernos (escalable infinitamente) |
Paso 1: Comience con una imagen de origen de alta resolución
Crea o exporta tu logotipo/icono con un tamaño mínimo de 512 × 512 píxeles como un archivo PNG cuadrado con fondo transparente. Este será tu archivo de origen para generar todos los tamaños más pequeños.
Consejos para un diseño compatible con favicon:
- Manténgalo simple: los diseños complejos no se ven bien en 16×16
- Utilice un alto contraste: fondos claros con iconos oscuros o viceversa.
- Evite las líneas finas — desaparecen en tamaños pequeños
- Prueba a 16×16 — reduce el zoom en tu herramienta de diseño para verificar la legibilidad.
Paso 2: Generar todos los tamaños de favicon
En lugar de redimensionar manualmente cada imagen según sea necesario, utilice un generador de favicons. El generador de favicons de PicsSizer toma su imagen de origen y produce un paquete completo:
- Sube tu archivo PNG de origen de 512×512 (o mayor)
- Previsualiza cómo se ve en cada tamaño.
- Descarga el paquete completo de favicon con todos los tamaños necesarios.
Paso 3: Añadir el HTML
Coloca estas etiquetas en las secciones <head> de tu HTML:
<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<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 (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />
Paso 4: Crear el manifiesto de la aplicación web
Para los iconos de la pantalla de inicio de Android y la compatibilidad con PWA, cree un archivo site.webmanifest :
{
"name": "Your Site Name",
"short_name": "SiteName",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
El enfoque del favicon SVG
Para los navegadores modernos, un favicon SVG es ideal:
- Escalable infinitamente: nitidez en cualquier resolución.
- Tamaño de archivo muy pequeño — a menudo menos de 2 KB
- Compatible con el modo oscuro: puedes usar consultas de medios CSS dentro de SVG.
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
Con una consulta de medios para el modo oscuro dentro del SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon { fill: white; }
}
.icon { fill: black; }
</style>
<rect class="icon" width="32" height="32" rx="4" />
</svg>
Todos los navegadores modernos (Chrome, Firefox, Safari 14+, Edge) son compatibles con los favicons SVG.
Solución de problemas comunes con el favicon
El favicon no se muestra:
- Compruebe que el archivo existe en la ruta especificada en
href - Actualiza tu navegador (Ctrl+Mayús+R / Cmd+Mayús+R)
- Compruebe la pestaña Red de las herramientas para desarrolladores del navegador para detectar errores 404 en las solicitudes de favicon.
El favicon se muestra en la versión de escritorio, pero no en la versión móvil:
- Asegúrese de que
apple-touch-iconesté configurado para iOS. - Asegúrese de que el manifiesto web exista y esté vinculado para Android.
El antiguo favicon sigue apareciendo después de la actualización:
- Los navegadores almacenan en caché los favicons de forma agresiva. Añada una cadena de consulta para evitar la caché:
href="/favicon.png?v=2"
Favicon borroso o pixelado:
- Regenerar a partir de una imagen de origen de mayor resolución (mínimo 512×512)
- Comprueba que estás utilizando el tamaño correcto para cada contexto.
Lista de verificación completa del favicon
- Imagen original de 512×512 px (PNG transparente)
- favicon.ico (16×16 + 32×32 dentro del ICO, para versiones antiguas de IE)
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png (180×180)
- android-chrome-192x192.png
- android-chrome-512x512.png
- favicon.svg (opcional pero recomendado)
- sitio.webmanifest
- Etiquetas HTML
<link>en<head>
Utilice el Generador de favicons de PicsSizer para generar el paquete completo a partir de una sola imagen, o consulte la Guía de tamaños de favicons para obtener la referencia completa.
Preguntas frecuentes
- ¿Qué tamaño debe tener un favicon?
- El tamaño mínimo del favicon para la pestaña del navegador es de 16 × 16 píxeles. Sin embargo, una configuración moderna de favicon incluye varios tamaños: 16 × 16, 32 × 32 y 48 × 48 para navegadores; 180 × 180 para el icono táctil de Apple; y 192 × 192 y 512 × 512 para el manifiesto de Android/PWA. Comience con una imagen de origen de 512 × 512 y genere todos los tamaños a partir de ella.
- ¿Qué formato debe tener un favicon?
- Los navegadores modernos admiten favicons en formato ICO, PNG y SVG. La recomendación es la siguiente: un favicon SVG para navegadores modernos (escalable infinitamente, archivo pequeño), un PNG de 32×32 píxeles como alternativa y un icono de Apple Touch en formato PNG de 180×180 píxeles. Un archivo ICO con imágenes de 16×16 y 32×32 píxeles sirve para navegadores antiguos.
- ¿Por qué no se muestra mi favicon en el navegador?
- Causas comunes: el archivo del favicon no se encuentra en la ruta correcta, falta la etiqueta de enlace HTML o tiene un atributo de tipo incorrecto, o el navegador ha almacenado en caché un favicon antiguo. Intente actualizar la página (Ctrl+Mayús+R o Cmd+Mayús+R) para forzar al navegador a recargar el favicon.
- ¿Necesito un archivo ICO o puedo usar PNG?
- Los navegadores modernos (Chrome, Firefox, Safari, Edge) admiten favicons PNG. Un archivo ICO solo es necesario para la compatibilidad con versiones antiguas de Internet Explorer. Si no se dirige a Internet Explorer, un PNG de 32x32 píxeles funciona perfectamente para la pestaña del navegador y puede omitir el archivo ICO por completo.
- ¿Qué aspecto debería tener un buen favicon?
- Un buen favicon es una versión simplificada de tu logotipo o marca que se lea con claridad en tamaños de 16×16 y 32×32 píxeles. Evita textos pequeños, degradados complejos y detalles finos, ya que se pierden en tamaños reducidos. Una inicial, un icono sencillo o una forma llamativa funcionan mejor.