Cómo preparar un favicon en 2025

• A medida que la forma de crear favicons se ha vuelto más compleja, es común terminar usando más de 20 archivos PNG solo para mostrar el logo del sitio web en la pestaña del navegador o en una pantalla táctil
• Como alternativa, se propone una forma de cubrir la mayoría de los entornos con relativamente pocos archivos de íconos y una configuración mínima

Versión muy simple

• Sin una configuración complicada, basta con cinco íconos clave y un archivo JSON

• Este es un ejemplo de los enlaces base que se agregan en HTML

  <link rel="icon" href="/favicon.ico" sizes="32x32">  
  <link rel="icon" href="/icon.svg" type="image/svg+xml">  
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->  
  

• Si soportas PWA (Progressive Web App), agrega también lo siguiente

  <link rel="manifest" href="/manifest.webmanifest">  
  

• Esta es la estructura de ejemplo del archivo manifest.webmanifest

  {  
    "icons": [  
      { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
      { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
      { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
    ]  
  }  
  

• Como los íconos maskable pueden recortarse un poco en los bordes, conviene dejar el área circular de 409×409 como zona segura

• Con solo esta configuración, el favicon funciona bien en la mayoría de los navegadores y dispositivos principales

Versión con explicación detallada

• El favicon proviene de “favorite icon” y es el pequeño ícono que aparece en la pestaña del navegador y otros lugares similares
• Safari también soporta correctamente los favicons en la actualidad
• En vez de crear un set de íconos para múltiples resoluciones, se puede resolver de forma eficiente usando SVG, algunos íconos PNG y un manifest sencillo

La configuración definitiva de favicon

• Con un archivo SVG, unas cuantas imágenes PNG mínimas y un archivo web manifest, es posible mostrar íconos consistentes en distintos navegadores y dispositivos
• SVG es un formato vectorial, así que puede escalarse libremente según sea necesario, y además la carga en segundo plano reduce el impacto en el rendimiento
• Los PNG se preparan solo en los tamaños imprescindibles, como para Apple (apple-touch-icon) y para PWA
• Formatos antiguos como los íconos de mosaico de Windows, Safari Pinned Icon o rel=“shortcut” ya casi no son necesarios en navegadores modernos
• En navegadores o herramientas antiguas, a veces se intenta cargar el ícono directamente desde la ruta /favicon.ico, así que el archivo favicon.ico en la raíz sigue siendo importante

Cómo crear el Ultimate Favicon Set

• Los siguientes pasos describen el proceso para crear y optimizar los íconos manualmente
• Paso 1: preparar el SVG
  • Es necesario preparar un archivo icon.svg manteniendo una proporción cuadrada
  • Dentro de <svg> se puede implementar el cambio de colores para modo claro y oscuro mediante media queries de CSS
  • Como en el ejemplo, se puede usar @media (prefers-color-scheme: dark) para definir los colores del modo oscuro
• Paso 2: crear el archivo ICO
  • Genera favicon.ico convirtiendo icon.svg a una imagen rasterizada de 16×16 o 32×32
  • Puedes usar herramientas como GIMP o Inkscape+ImageMagick
  • Hay que cuidar que el logo no se vea demasiado borroso en resoluciones pequeñas
• Paso 3: crear las imágenes PNG
  • Prepara íconos PNG en tamaños 512×512, 192×192, 180×180 y 512×512 (maskable)
  • Para apple-touch-icon en iOS, conviene trabajar en 180×180 y agregar un color de fondo o dejar un margen adecuado
  • El ícono maskable debe dejar el área de 409×409 como zona segura
• Paso 4: optimizar PNG y SVG
  • El SVG puede comprimirse con herramientas como SVGO, y los PNG pueden comprimirse con Squoosh para mejorar la tasa de compresión
  • Como algunos usuarios pueden estar en entornos con restricción de datos, minimizar el tamaño de los archivos resulta ventajoso
• Paso 5: enlazar los íconos en HTML
  • Básicamente, conecta favicon.ico, icon.svg y apple-touch-icon.png dentro de la etiqueta <head>

    <link rel="icon" href="/favicon.ico" sizes="32x32">  
    <link rel="icon" href="/icon.svg" type="image/svg+xml">  
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">  
    

  • Si usas Webpack u otra herramienta similar, también puedes gestionar la caché incluyendo hashes durante el build
  • También puedes usar favicons distintos para diferenciar el entorno de staging (desarrollo) y el de producción
• Paso 6: crear el Web Manifest
  • Agrega la información de los íconos para PWA en el archivo manifest.webmanifest y enlázalo con <link rel="manifest" href="/manifest.webmanifest">
  • El siguiente ejemplo define íconos de 192×192, 512×512 (maskable) y 512×512

    {  
      "name": "My website",  
      "icons": [  
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
        { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
      ]  
    }  
    

  • En entornos con Webpack, se puede automatizar usando plugins como webpack-pwa-manifest
• Siguiendo este proceso, incluso con pocos archivos se puede mostrar un favicon adecuado en la mayoría de navegadores y dispositivos
• Si además se crea una herramienta de automatización para operarlo, resulta todavía más práctico

[carnoxen]

SVG Favicon todavía no es compatible con Firefox...

[carnoxen]

Ah, era Safari.

[yeppyshiba]

Implementé un juego web en un proyecto que hice en una empresa anterior
por aburrimiento hice un favicon animado como easter egg
y al implementar la animación con un sprite sheet, quedó bastante convincente

[xguru]

Resumen de favicons para 2021
Lo publiqué una vez hace 4 años, y ahora se actualizó para ajustarse a estos tiempos.