Cómo añadir un favicon a tu sitio web

Nov 23, 2025 · 4 min read

Tu sitio web necesita un favicon. Ese pequeño icono en las pestañas del navegador no es solo decoración: es cómo los usuarios identifican tu sitio entre docenas de pestañas abiertas, cómo Google muestra tu sitio en los resultados de búsqueda y cómo iOS guarda tu sitio en las pantallas de inicio. Sin embargo, la mayoría de las guías sobre favicons están desactualizadas, recomendando formatos obsoletos y archivos innecesarios.

Este artículo cubre la configuración moderna y minimalista de favicons que funciona en todas partes: favicon SVG para navegadores modernos, favicon PNG como respaldo, Apple Touch Icon para dispositivos iOS e iconos de manifiesto web para Progressive Web Apps.

Puntos clave

La configuración moderna de favicons requiere solo un pequeño conjunto de archivos esenciales: un respaldo ICO, un favicon SVG, un PNG de 32×32, un Apple Touch Icon y un par de iconos de manifiesto web.
Los favicons SVG escalan perfectamente y admiten modo oscuro mediante media queries de CSS
Safari e iOS ahora son totalmente compatibles con favicons SVG, por lo que pueden servir como icono principal para navegadores modernos
El almacenamiento en caché agresivo de los navegadores requiere estrategias de versionado al actualizar favicons

El conjunto moderno de favicons

Olvida las docenas de tamaños de iconos de 2015. Esto es lo que realmente necesitas:

Iconos esenciales

favicon.ico (multi-tamaño, típicamente 16×16 y 32×32) – Respaldo para navegadores antiguos
favicon.svg - Escalable para todos los navegadores modernos
icon-32.png - Interfaz del navegador y resultados de búsqueda de Google
apple-touch-icon.png (180×180) - Pantalla de inicio de iOS
icon-192.png e icon-512.png - Manifiesto web para PWAs

Safari e iOS ahora son totalmente compatibles con favicons SVG. Las afirmaciones sobre la falta de soporte SVG están desactualizadas: todos los navegadores principales ahora admiten favicons SVG de manera confiable.

Implementación HTML

Añade estas cuatro líneas a tu <head>:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Nota: Omite rel="shortcut icon"—está obsoleto desde 2003. Simplemente usa rel="icon".

Creación de tus iconos

Favicon SVG

Los favicons SVG escalan infinitamente y admiten características como el modo oscuro:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Mantén los favicons SVG simples. Los degradados complejos y efectos no se renderizarán bien a 16×16 píxeles.

Favicon PNG

El PNG de 32×32 cumple dos propósitos críticos:

Respaldo para navegadores que no admiten SVG
Visualización en los resultados de búsqueda de Google

Usa una herramienta como RealFaviconGenerator o Favicon.io para generar versiones PNG desde tu SVG.

Apple Touch Icon

iOS requiere un PNG de 180×180 con:

Sin transparencia (usa un fondo sólido)
Sin esquinas redondeadas (iOS las añade)
Alto contraste para visibilidad en varios fondos de pantalla

Nómbralo exactamente apple-touch-icon.png y colócalo en tu directorio raíz. iOS lo encontrará automáticamente, incluso sin la etiqueta <link>, pero el enlace explícito garantiza confiabilidad.

Iconos del manifiesto web

Para Progressive Web Apps, crea un manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Estos iconos del manifiesto web habilitan la funcionalidad “Añadir a pantalla de inicio” en Android y la instalación de PWA en escritorio.

Soporte para modo oscuro

Más allá del enfoque de media query en SVG, puedes intercambiar favicons con JavaScript:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Manejo de la caché

Los navegadores almacenan en caché los favicons de manera agresiva. Al actualizar tu icono:

Versiona el nombre del archivo: Cambia favicon.svg a favicon-v2.svg
Añade una cadena de consulta: favicon.svg?v=2
Actualiza todas las referencias en tu HTML

Para pruebas inmediatas, abre tu sitio en una ventana de incógnito/privada.

Problemas comunes

¿El favicon no se muestra?

Verifica la ruta—usa rutas absolutas (/favicon.svg) no relativas
Verifica los tipos MIME: SVG necesita image/svg+xml
Prueba en modo incógnito para evitar la caché

¿Borroso en pantallas retina?

Usa SVG como tu icono principal
Asegúrate de que las exportaciones PNG sean exactamente 32×32 y 180×180

¿Icono incorrecto en iOS?

iOS prioriza apple-touch-icon.png en el directorio raíz
Limpia la caché de Safari: Ajustes → Safari → Borrar historial y datos de sitios web

Conclusión

La implementación moderna de favicons es más simple de lo que sugieren las guías antiguas. Cinco archivos—ICO, SVG, PNG, Apple Touch Icon e iconos de manifiesto web—cubren todos los navegadores, dispositivos y casos de uso. Omite los conjuntos obsoletos de múltiples docenas de iconos y los metadatos de mosaicos de Windows a menos que los necesites específicamente.

Enfócate en un favicon SVG limpio como tu icono principal, añade los respaldos esenciales, y tu sitio se mostrará perfectamente en todas partes, desde las pestañas del navegador hasta las pantallas de inicio de iOS.

Preguntas frecuentes

Aunque los favicons SVG funcionan en todos los navegadores modernos, aún necesitas respaldos. Los navegadores antiguos requieren archivos ICO, iOS necesita apple-touch-icon.png para accesos directos en la pantalla de inicio, y los resultados de búsqueda de Google buscan específicamente favicons PNG.

Algunos navegadores ajustan automáticamente los colores del favicon para visibilidad en modo oscuro. Para controlar este comportamiento, usa media queries de CSS en tu favicon SVG o implementa un cambio de favicon basado en JavaScript para una apariencia consistente.

Las actualizaciones de favicon pueden tardar horas o días dependiendo del almacenamiento en caché del navegador. Fuerza actualizaciones inmediatas versionando nombres de archivo o añadiendo cadenas de consulta. Los resultados de búsqueda de Google pueden tardar varias semanas en reflejar cambios de favicon incluso después del rastreo.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.