¿Qué es un favicon y para qué sirve?
El favicon (favorite icon) es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda. Un favicon bien implementado refuerza la identidad de marca incluso en pestañas minimizadas.
Tamaños de favicon necesarios en 2024
| Tamaño | Uso |
|---|---|
| 16×16 px | Pestaña del navegador |
| 32×32 px | Retina, acceso directo Windows |
| 180×180 px | Apple Touch Icon (iOS) |
| 192×192 px | Android homescreen (PWA) |
| 512×512 px | PWA splash screen, Google Discover |
| SVG | Navegadores modernos (escalable) |
El formato ICO: cómo funciona
Un archivo .ico es un contenedor que incluye múltiples versiones del icono a diferentes resoluciones dentro de un único archivo. Compatible con todos los navegadores incluyendo IE6.
Crear un favicon con ImageMagick
# Crear versiones individuales
magick logo_512.png -resize 16x16 logo_16.png
magick logo_512.png -resize 32x32 logo_32.png
magick logo_512.png -resize 48x48 logo_48.png
# Combinar en un único archivo ICO
magick logo_16.png logo_32.png logo_48.png favicon.ico
Crear un favicon con Python (Pillow)
from PIL import Image
img = Image.open("logo_512.png").convert("RGBA")
sizes = [(16, 16), (32, 32), (48, 48), (256, 256)]
img.save("favicon.ico", format='ICO', sizes=sizes)
Favicon SVG: la opción moderna
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Los SVG favicon soportan modo oscuro con @media (prefers-color-scheme: dark).
Implementación correcta en HTML
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
</head>
Consejos para un favicon efectivo
- Diseña el favicon específicamente para tamaño pequeño — no solo redimensiones el logo.
- Usa formas simples y alto contraste.
- No uses texto en el favicon — es ilegible a 16×16 px.
- Prueba en modo oscuro si usas SVG.
Conclusión
Un favicon completo en 2024 incluye: favicon.ico (legacy), PNGs en 16, 32 y 180 px, un SVG para navegadores modernos, e iconos de 192 y 512 px para PWA. realfavicongenerator.net lo hace todo desde una interfaz web.
Casos de uso avanzados
Optimización web a escala: sitios e-commerce con miles de productos pueden reducir bandwidth costs 60-80% migrando de JPG a AVIF o WebP. Cloudflare Images, Imgix y Cloudinary ofrecen transformación on-the-fly basada en Accept header del cliente — sirviendo AVIF a Chrome/Edge modernos, WebP a Safari/Firefox, JPG fallback a navegadores legacy. Print-ready output: convertir RGB a CMYK con perfil ICC (US Web Coated SWOP v2 para offset comercial, FOGRA39 para europeo) garantiza que los colores impresos coincidan con preview en pantalla calibrada. PDFs/X-1a y X-4 son los formatos exigidos por imprentas profesionales. Foto profesional: workflow Adobe consiste en RAW (input cámara) → DNG (archivado) → PSD (edición no-destructiva) → TIFF (deliverable) → JPG/WebP (web/social). Cada etapa preserva diferentes capacidades. Vector graphics: SVG es preferido para logos, iconos, ilustraciones planas — escala infinitamente sin pérdida y se anima con CSS/JavaScript. Para UIs modernas, los icon fonts (Font Awesome) están siendo reemplazados por SVG sprites por mejor accesibilidad y customización.
Mejores prácticas y consejos profesionales
Selección de formato según contenido: fotografías → JPG (calidad 85-95) o WebP (calidad 80-90); gráficos con texto/líneas finas → PNG o WebP lossless; ilustraciones planas → SVG; iconos UI → SVG; screenshots → PNG; HDR → AVIF o JPEG XL. Color profile management: siempre embebe el perfil ICC en archivos profesionales (Adobe RGB para fotografía pre-impresión, sRGB para web, Display P3 para Apple ecosystem). Sin perfil embedded, los visualizadores asumen sRGB que puede causar shifts de color visibles. Resolución vs tamaño: para web display, 72 DPI es suficiente; para impresión profesional, 300 DPI mínimo. Lazy loading + responsive images: combina <img loading="lazy" srcset> con AVIF/WebP fallback chain para bandwidth saving sin sacrificar UX. Metadata privacy: archivos JPG de smartphone contienen GPS, modelo de cámara, fecha exacta — usa exiftool -all= para limpiar antes de subir a redes sociales si privacidad importa.
Compatibilidad y consideraciones técnicas
KaijuConverter soporta más de 30 formatos de imagen (JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO, PSD, RAW múltiples vendors, JPEG XL) usando ImageMagick 7.x, libvips, y format-specific libraries (libpng, libjpeg-turbo, libwebp, libavif, librsvg). Procesamos imágenes hasta 100 MB con resoluciones hasta 16384×16384 píxeles y profundidades de 8/10/12/16-bit por canal. EXIF y metadata: leemos toda la información embedded (cámara, lente, GPS, datos de captura, ICC profile) y la migramos al output cuando el formato destino lo soporta — crítico para workflows profesionales que dependen de provenance tracking. HDR: soportamos PQ y HLG transfer functions para AVIF/JPEG XL/HEIC HDR (rec.2020 color space). Performance: una conversión típica JPG→WebP de 5 MB tarda 1-3 segundos; HEIC→JPG de iPhone 12 Mpix tarda 2-5 segundos; PSD multi-layer→PNG flat puede requerir 5-15 segundos según complejidad. Privacidad: cifrado TLS 1.3, contenedores Docker aislados, eliminación automática tras 2 horas con multi-pass overwrite.
Conversiones relacionadas
Conversiones frecuentes del catálogo: