Guía completa de creación de favicon - ICO, SVG y PNG explicados

Qué es un favicon - Función e importancia

Favicon (Favorites Icon) es un pequeño icono que se muestra en las pestañas del navegador, barra de marcadores, historial y resultados de búsqueda. Aunque su tamaño es pequeño (típicamente 16x16 a 32x32 píxeles), es un componente importante de la identidad de marca del sitio web, ayudando a los usuarios a encontrar rápidamente el sitio objetivo entre muchas pestañas abiertas.

Los escenarios de aplicación del favicon van mucho más allá de las pestañas del navegador: iconos de mayor tamaño (192x192, 512x512) cuando una PWA se instala en la pantalla de inicio, sitios fijados en la barra de tareas de Windows, aplicaciones web en el Dock de macOS, iconos de sitio en páginas de resultados de motores de búsqueda, etc. Una solución completa de favicon necesita cubrir todos estos escenarios.

La ausencia de favicon hace que el navegador muestre un icono en blanco predeterminado o un icono de globo, dando a los usuarios la impresión de que el sitio no es profesional. Además, el navegador solicita repetidamente /favicon.ico, y si el archivo no existe genera errores 404, afectando la limpieza de los logs del servidor.

Comparación de formatos de favicon - ICO, SVG, PNG

Formato ICO: El formato tradicional de favicon que puede contener múltiples tamaños (16x16, 32x32, 48x48) en un solo archivo. Todos los navegadores lo soportan, siendo la opción con mejor compatibilidad. Desventajas: archivos relativamente grandes y no soporta escalado vectorial.

Formato SVG: Los navegadores modernos soportan SVG favicon, con la ventaja de que los gráficos vectoriales se mantienen nítidos a cualquier tamaño, tamaño de archivo pequeño, y soporte para adaptación al modo oscuro mediante media queries CSS. Se referencia con <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Safari no soporta SVG favicon.

Formato PNG: Como alternativa moderna al ICO, el PNG favicon es ampliamente soportado. Puede proporcionar múltiples tamaños: <link rel="icon" sizes="32x32" href="/icon-32.png">. Apple Touch Icon debe usar formato PNG.

Recomendación de selección de formato: proporcione simultáneamente ICO (compatibilidad con navegadores antiguos) y SVG (uso prioritario en navegadores modernos), más PNG para Apple Touch Icon. Esta combinación de tres cubre todos los escenarios.

Configuración mínima y configuración recomendada

Configuración mínima (cubre 95% de escenarios):

• /favicon.ico - Archivo ICO de 32x32 (colocado en la raíz del sitio, el navegador lo encuentra automáticamente)
• <link rel="icon" type="image/svg+xml" href="/favicon.svg"> - Versión SVG
• <link rel="apple-touch-icon" href="/apple-touch-icon.png"> - PNG de 180x180

Configuración recomendada (cobertura completa): Sobre la configuración mínima, agregue definiciones de iconos en el manifiesto PWA (PNG de 192x192 y 512x512), icono de mosaico de Windows (browserconfig.xml), icono de pestaña fijada de Safari.

Configuración de iconos en Web App Manifest: "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }]

Notas: apple-touch-icon no necesita esquinas redondeadas ni efectos de brillo, iOS los procesa automáticamente. El fondo del icono debe ser un color sólido en lugar de transparente, ya que diferentes plataformas manejan fondos transparentes de manera diferente.

Soporte de modo oscuro con SVG favicon

La ventaja única del SVG favicon es que puede responder a la configuración de modo oscuro del sistema mediante media queries CSS incrustadas, cambiando automáticamente los colores del icono.

Método de implementación: agregue una etiqueta <style> dentro del archivo SVG, usando @media (prefers-color-scheme: dark) para definir colores en modo oscuro. Por ejemplo, cambiar un icono negro a blanco en modo oscuro.

Estructura de ejemplo: <svg><style>path { fill: #1a1a1a; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }</style><path d="..."/></svg>

Ventajas de este método: no necesita preparar dos conjuntos de archivos de icono, no requiere JavaScript, el navegador maneja el cambio automáticamente, la transición es suave y natural.

Limitaciones: solo aplica a navegadores que soportan SVG favicon (Chrome, Firefox, Edge). Safari no soporta SVG favicon, por lo que Apple Touch Icon necesita manejar el modo oscuro por separado (generalmente usando un diseño que sea claramente visible en ambos modos).

Mejores prácticas de diseño de favicon

El favicon se muestra en un tamaño extremadamente pequeño (16x16px), por lo que requiere un enfoque diferente al diseño de logotipos convencional.

Principios de diseño:

• Simplicidad ante todo: Los detalles finos son indistinguibles a 16px. Reduzca al elemento más característico del logotipo
• Alto contraste: Asegure una diferencia clara con el color de fondo. Los colores claros y líneas finas no son visibles
• Aprovechar el cuadrado: El favicon se ajusta a un lienzo cuadrado. No reduzca logotipos horizontales directamente, use solo la marca simbólica
• Margen moderado: No llene el lienzo completamente con elementos, reserve 1-2px de margen para mejorar la visibilidad

Patrones de error comunes:

• Reducir el logotipo completo (texto + símbolo) directamente → Se convierte en una imagen aplastada ilegible
• Uso excesivo de degradados → Los cambios de color son indistinguibles a 16px, dando impresión borrosa
• Diseños solo con líneas finas o contornos → Las líneas desaparecen en tamaños pequeños
• Diseños que dependen del color de fondo → Se vuelven invisibles cuando el fondo cambia con modo oscuro o temas del navegador

Flujo de trabajo de creación:

1. Comience el diseño en un lienzo de 32x32px (el doble de 16px para facilitar el trabajo)
2. Reduzca a 16x16px y verifique la visibilidad
3. Cree la versión vectorial en SVG (incluya CSS para modo oscuro)
4. Exporte bitmaps de 16x16 y 32x32 para ICO
5. Exporte PNG de 180x180 para Apple Touch Icon (las esquinas redondeadas las aplica iOS automáticamente, no son necesarias)

Web デザインの入門書は Amazon でも探せます

Herramientas de generación de favicon y automatización de implementación

Crear manualmente cada formato y tamaño de favicon es laborioso, por lo que usar herramientas de generación automática es eficiente.

Herramientas en línea:

• RealFaviconGenerator: Ingrese SVG o PNG y genera automáticamente un conjunto completo de favicon para todas las plataformas con código HTML. También puede generar SVG con soporte de modo oscuro. La herramienta más completa
• Favicon.io: Genera favicon desde texto, imagen o emoji. Simple y rápido
• SVG Favicon Maker: Cree y previsualice favicon basados en SVG en el navegador

Herramientas de línea de comandos:

• sharp (Node.js): sharp('logo.svg').resize(32, 32).toFile('favicon.png') genera cada tamaño
• ImageMagick: convert logo.png -resize 32x32 -resize 16x16 favicon.ico genera archivo ICO
• png2ico: Herramienta dedicada para generar archivos ICO desde múltiples PNG

Integración en pipeline de build:

En frameworks como Next.js, Nuxt y Astro, simplemente colocar archivos favicon en el directorio public/ los sirve automáticamente. Incorporar un script que genere automáticamente PNG de cada tamaño desde SVG durante el build permite gestionar los archivos fuente con un solo SVG.

Métodos de verificación:

• Verifique el estado de carga de iconos en el panel "Application" → sección "Manifest" de Chrome DevTools
• Verifique la consistencia con datos estructurados usando la "Prueba de resultados enriquecidos" de Google
• Prueba en dispositivo real: agregue a la pantalla de inicio en iOS Safari y verifique la visualización del Apple Touch Icon
• Use herramientas en línea como favicon-checker.com para previsualizar la visualización en todas las plataformas