La Guía Definitiva de Favicons en 2025: Formatos, Tamaños y Mejores Prácticas

Es un pequeño cuadrado de 16x16 píxeles, pero es la cara de tu sitio web.

El Favicon (Icono de Favoritos) es crucial para la experiencia del usuario. Ayuda a los usuarios a identificar tu pestaña entre docenas de páginas abiertas, añade profesionalismo a tu sitio e incluso impacta indirectamente en el SEO al mejorar las tasas de clics.

Pero en 2025, manejar favicons es sorprendentemente complejo. ¿Deberías seguir usando .ico? ¿Necesitas un 32x32 o un 192x192? ¿Qué pasa con el Modo Oscuro?

Esta guía cubre todo lo que necesitas saber para implementar la configuración perfecta de favicon.

1. Los Formatos: ICO vs. PNG vs. SVG

El Clásico: .ico

Durante años, favicon.ico fue el único estándar. Es un formato contenedor único que puede guardar múltiples resoluciones (16x16, 32x32, 48x48) en un solo archivo.

• Pros: Soportado por todos los navegadores, incluidas versiones antiguas de IE.
• Contras: Más difícil de crear que los PNG.

El Estándar Moderno: .png

Hoy en día, PNG es el formato preferido para favicons. Soporta transparencia alfa y es fácil de generar.

• Pros: Alta calidad, fácil de crear.
• Contras: Necesitas múltiples archivos para diferentes tamaños.

El Futuro: .svg

Los favicons SVG son un cambio radical. Escalan infinitamente y, lo más importante, soportan media queries de CSS. Esto significa que puedes cambiar el color de tu favicon basado en el tema del sistema del usuario (Modo Claro/Oscuro).

• Pros: Escalado infinito, soporte para Modo Oscuro.
• Contras: Soporte parcial en navegadores antiguos (necesita un fallback).

2. La Lista de Tamaños Esenciales

Ya no necesitas generar 20 archivos diferentes. Aquí está la lista moderna y simplificada para 2025:

• 16x16: Para pestañas del navegador (escritorio).
• 32x32: Para pantallas de alta densidad (Retina) y barras de tareas.
• 180x180: Para Apple Touch Icon (pantalla de inicio de iPhone/iPad).
• 192x192: Para pantalla de inicio de Android Chrome.
• 512x512: Para pantallas de inicio de PWA (Progressive Web Apps).

3. La Configuración HTML Perfecta

Deja de copiar código de 2015. Aquí está la implementación HTML limpia y moderna:

<!-- 1. SVG para navegadores modernos (¡con soporte para Modo Oscuro!) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 2. Fallback PNG para Safari y otros -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">

<!-- 3. Apple Touch Icon (Pantalla de inicio iPhone) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 4. Manifiesto de Web App (Android y PWA) -->
<link rel="manifest" href="/site.webmanifest">

Consejo Pro: Coloca un archivo favicon.ico en tu directorio raíz (/favicon.ico) como respaldo para herramientas y bots antiguos, incluso si no lo enlazas en tu HTML.

4. Soporte para Modo Oscuro con SVG

Esta es la característica más genial de los favicons modernos. Puedes hacer que tu icono se adapte al tema del usuario.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; } /* Por defecto (Modo Claro) */
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; } /* Modo Oscuro */
    }
  </style>
  <path d="..." />
</svg>

¡Ahora tu logo negro no desaparecerá en una pestaña de navegador oscura!

5. Solución de Problemas: ¿Por qué no aparece mi favicon?

• Caché del Navegador: Los navegadores guardan los favicons en caché agresivamente. Intenta abrir tu sitio en modo Incógnito o añade una cadena de consulta de versión (ej., href="/favicon.svg?v=2").
• Ruta Incorrecta: Asegúrate de que la ruta sea relativa a la raíz (/) o correcta en relación con el archivo HTML.
• Resultados de Búsqueda de Google: Google tarda semanas en actualizar el favicon en los resultados de búsqueda. Asegúrate de que tu favicon sea un múltiplo de 48px cuadrado (48x48, 96x96, 144x144) para la mejor compatibilidad con Google.

Conclusión

Un favicon roto o pixelado grita "proyecto sin terminar". Tomarse 10 minutos para configurar esto correctamente añade una capa de pulido en la que los usuarios confían subconscientemente.

¿Necesitas generar todos estos archivos desde un solo logo?
Puedes usar nuestro Generador de Favicon para crear instantáneamente los archivos ICO, PNG y site.webmanifest con una vista previa de cómo se ven en los navegadores y en Google.