Por qué la Cobertura de Favicons es Importante
Ya no se trata solo de la pestaña del navegador. Aquí tienes por qué necesitas el conjunto completo de iconos.
¿Qué son los app icons?
Los app icons son las imágenes que pulsas en tu smartphone para abrir una aplicación. A medida que se lanzan teléfonos más nuevos con pantallas de mayor resolución, se necesitan app icons de resolución más alta. Los desarrolladores aún quieren mantener el soporte para los teléfonos más antiguos de menor resolución, así que, al crear un app icon, necesitas crear varias variaciones de tamaño de la misma imagen. Esto vale para todos los smartphones, como el iPhone y Android, e incluso para tablets como el iPad.
¿Qué hace esta herramienta?
Aunque muchos navegadores modernos admiten favicons guardados como GIF, PNG u otros formatos populares, todas las versiones de Internet Explorer todavía exigen que los favicons se guarden como archivos ICO (un formato de icono de Microsoft). Esta herramienta ofrece una forma fácil de convertir cualquier GIF, PNG o JPEG a ICO, que es compatible con todos los navegadores modernos. También te permite crear favicons desde cero mediante un editor online y ajustar manualmente los favicons generados para obtener el resultado que quieres.
Usar un favicon
Después de generar un favicon con esta herramienta, descárgalo y guárdalo en el directorio raíz de tu sitio. Luego incluye el siguiente código en el head de tu documento HTML.
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">Por qué importa la cobertura completa
| Superficie | Qué te da la cobertura |
|---|---|
| Pantallas de inicio de móvil | Los usuarios suelen añadir sitios a sus pantallas de inicio en iOS y Android. Sin touch icons específicos, tu sitio parecerá un screenshot genérico o un placeholder por defecto, dañando la apariencia profesional de tu marca. |
| SEO y resultados de búsqueda | Google y otros motores de búsqueda muestran a menudo los favicons junto a los resultados de búsqueda. Un icono claro y de alta calidad puede mejorar las tasas de clic y ayudar a los usuarios a identificar tu marca al instante. |
| Confianza en la marca | La inconsistencia rompe la confianza. Si tu icono se ve nítido en una pestaña pero borroso en la barra de marcadores o ausente en una tablet, eso indica falta de atención al detalle. La cobertura completa garantiza un branding pixel-perfect en todas partes. |
| Integración con plataformas | Desde los mosaicos del Menú Inicio de Windows hasta las pestañas fijadas de macOS y las listas de lectura de Safari, distintos sistemas operativos usan formatos únicos. Proporcionarlos todos garantiza que tu sitio se sienta nativo en el dispositivo del usuario. |
Míralo en acción
Cuando los sitios implementan una cobertura adecuada de favicons, sus iconos aparecen de forma consistente en todas las plataformas y contextos. Fíjate en cómo los favicons de estas grandes empresas hacen que sus enlaces sean reconocibles al instante en pestañas del navegador, marcadores, resultados de búsqueda y cuando se comparten. Esta consistencia visual construye reconocimiento de marca y confianza: los usuarios pueden identificar tu sitio de un vistazo, incluso en listas abarrotadas o resultados de búsqueda.
Sin una cobertura adecuada de favicons, tus enlaces aparecerían como placeholders genéricos o imágenes rotas, dificultando que los usuarios identifiquen tu marca y reduciendo las tasas de clic. Aquí tienes ejemplos de empresas que han invertido en una cobertura completa de favicons:
netflix.com, apple.com, google.com, microsoft.com, amazon.com, meta.com, x.com, youtube.com, github.com, spotify.com, adobe.com, nvidia.com, tesla.com, uber.com, airbnb.com, stripe.com, shopify.com, notion.so, figma.com, dropbox.com, linkedin.com, instagram.com, tiktok.com, discord.com, slack.com, zoom.us, salesforce.com, oracle.com, ibm.com, intel.com, paypal.com, reddit.com y twitch.tv.
Los iconos que soportamos
Un desglose de cada tipo de archivo que genera nuestra herramienta y dónde se usa.
| Tamaños | Dónde se usan | Notas |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icons, iPhone y Retina | Usados por varias generaciones de iPhone, para que tu icono se vea nítido en pantallas Retina de alta densidad. |
| 167x167, 152x152, 76x76 | Apple touch icons, iPad y tablet | Las pantallas de inicio del iPad muestran los iconos en dimensiones distintas a las de los teléfonos. |
| 57x57, 72x72 | Apple touch icons, iOS heredado | Aún incluidos para dispositivos más antiguos que puedan estar en circulación, maximizando la compatibilidad. |
| 192x192, 512x512 | Android y Chrome, vía el manifest | Los dispositivos Android dependen de PNG de alta resolución, y 192x192 es el estándar para los atajos en la pantalla de inicio. No siempre se genera como archivo independiente cuando hay un manifest presente, pero nuestra herramienta prioriza android-icon-192x192.png para el enlazado directo y la inclusión en el manifest, de modo que los prompts de «Añadir a la pantalla de inicio» y las splash screens funcionen. |
| 32x32 | Favicon estándar, pestañas de navegadores de escritorio modernos | El estándar de referencia: suficiente detalle para pantallas retina y aún pequeño en tamaño de archivo. |
| 16x16 | Favicon estándar, barras de direcciones y listas de marcadores | El tamaño clásico. Esencial para pantallas no retina y contextos estrictos de 16px. |
| 96x96 | Favicon estándar, atajos de escritorio y Google TV | También usado por algunos contextos de navegador especializados que requieren una imagen raster más grande. |
| 144x144 | Mosaicos de Windows, ms-icon-144x144.png | Cuando un usuario fija tu sitio en el Menú Inicio de Windows, Windows busca meta tags e imágenes específicas. También generamos los metadatos de color del mosaico para que combinen con la paleta de tu marca. |
La misma marca, en los tamaños que importan
Otras consideraciones
| Consideración | Detalle |
|---|---|
| Web app manifest | Las funciones modernas de PWA (Progressive Web App) dependen en gran medida del archivo manifest.json. Este archivo le indica al navegador cómo debe comportarse tu app cuando se instala, incluyendo qué iconos usar. Nuestra herramienta lo genera automáticamente. |
| Theme color | La meta tag theme-color personaliza el color de la barra de herramientas del navegador en dispositivos móviles, proporcionando una sensación más inmersiva que combina con el diseño de tu sitio. |
| Favicons SVG | Aunque nos centramos en la amplia compatibilidad con PNG, los navegadores modernos están empezando a admitir favicons SVG (link rel="icon" type="image/svg+xml"). Son estupendos para el escalado, pero aún requieren fallbacks en PNG para un soporte completo, como en Safari o en navegadores más antiguos. |