Cómo crear un favicon: guía completa para todo navegador y dispositivo

Un favicon (abreviatura de "favorites icon") aparece en las pestañas del navegador, en los marcadores y en las pantallas de inicio de dispositivos móviles. Es un punto de contacto de marca pequeño pero importante, y su implementación correcta en todos los navegadores y dispositivos es sorprendentemente compleja. Aquí te explicamos exactamente cómo hacerlo.

¿Qué es un favicon?

Un favicon es el pequeño icono asociado a un sitio web. Aparece:

• En la pestaña del navegador, junto al título de la página
• En los marcadores e 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 icono de la app
• En los resultados de motores de búsqueda (a veces)

Una configuración completa de favicon requiere varios tamaños y formatos para cubrir todos estos contextos.

Los tamaños de favicon necesarios

Paso 1: Empieza con una imagen fuente de alta resolución

Crea o exporta tu logo/icono a 512×512 píxeles como mínimo como un PNG cuadrado con fondo transparente. Esta será tu fuente para generar todos los tamaños más pequeños.

Consejos para un diseño apto para favicon:

• Manténlo simple — los diseños complejos no se ven bien a 16×16
• Usa alto contraste — fondos claros con iconos oscuros o viceversa
• Evita las líneas finas — desaparecen en tamaños pequeños
• Prueba a 16×16 — aleja el zoom en tu herramienta de diseño para verificar la legibilidad

Paso 2: Genera todos los tamaños de favicon

En lugar de redimensionar manualmente a cada tamaño necesario, usa un generador de favicons. El generador de favicons de PicsSizer toma tu imagen fuente y produce un paquete completo:

1. Sube tu PNG fuente de 512×512 (o más grande)
2. Previsualiza cómo se ve en cada tamaño
3. Descarga el paquete completo de favicons con todos los tamaños necesarios

Paso 3: Añade el HTML

Coloca estas etiquetas en el <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: Crea el manifiesto de la aplicación web

Para los iconos de pantalla de inicio de Android y el soporte de PWA, crea 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 — nítido en cualquier resolución
• Tamaño de archivo diminuto — a menudo menos de 2 KB
• Es compatible con el modo oscuro — puedes usar media queries de CSS dentro del SVG

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Con una media query 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 favicons

El favicon no se muestra:

• Comprueba que el archivo existe en la ruta especificada en el href
• Actualiza el navegador forzando la recarga (Ctrl+Shift+R / Cmd+Shift+R)
• Revisa la pestaña de red de las DevTools del navegador para ver si hay errores 404 en las solicitudes del favicon

El favicon se muestra en el escritorio pero no en el móvil:

• Asegúrate de que apple-touch-icon esté configurado para iOS
• Asegúrate de que el manifiesto web exista y esté vinculado para Android

Sigue apareciendo el favicon antiguo después de la actualización:

• Los navegadores almacenan en caché los favicons de forma muy agresiva. Añade una cadena de consulta para forzar la actualización de la caché: href="/favicon.png?v=2"

El favicon se ve borroso o pixelado:

• Vuelve a generarlo a partir de una imagen fuente de mayor resolución (512×512 como mínimo)
• Comprueba que estás usando el tamaño correcto para cada contexto

Lista de comprobación completa de favicons

• Imagen fuente de 512×512 px (PNG transparente)
• favicon.ico (16×16 + 32×32 dentro del ICO, para IE heredado)
• 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)
• site.webmanifest
• Etiquetas HTML <link> en el <head>

Usa el generador de favicons de PicsSizer para generar el paquete completo a partir de una sola imagen, o consulta la guía de tamaños de favicon para la referencia completa.