Introducción
En la actualidad, el favicon es un pequeño elemento gráfico que representa la identidad de un sitio web y que se muestra junto al título de la página en la pestaña del navegador, en la lista de marcadores e incluso como icono de acceso directo en el sistema operativo. Aunque se trata de un gráfico mínimo (normalmente de 16 × 16 px), diseñar un favicon correctamente—incluyendo varias resoluciones y configuraciones de DPI—es fundamental para garantizar que luzca nítido tanto en navegadores antiguos como en dispositivos de alta densidad de píxeles (Retina, 4K, etc.).
En este artículo encontrarás:
- Qué es un favicon y por qué incluir varias resoluciones.
- Dimensiones estándar y recomendaciones de DPI para cada versión.
- Herramientas y flujo de trabajo para crear un archivo
.icomulti-resolución. - Buenas prácticas y consejos finales.
1. ¿Qué es un favicon y por qué múltiples resoluciones?
El término favicon (abreviatura de “favorite icon”) se refiere a un pequeño icono asociado a un sitio web. Tradicionalmente, los navegadores lo buscan en la ruta /favicon.ico cuando navegas a una página, pero también es común enlazarlo explícitamente en el <head> del documento HTML:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Los navegadores más antiguos aceptan únicamente un .ico de 16 × 16 px, mientras que los navegadores modernos y los sistemas operativos—que utilizan iconos como accesos directos en el escritorio o como “tiles” en pantallas de inicio—pueden requerir tamaños mayores (32 × 32, 48 × 48, 64 × 64 px, e incluso 128 × 128 px). Si se entrega un único PNG de 16 × 16 px, es posible que:
- Al hacer zoom ×2 la pestaña, el navegador escale el gráfico y se vea pixelado.
- Los accesos directos en Windows se muestren borrosos o recortados si esperan un icono más grande.
- Los dispositivos Retina no extraigan una versión SVG o PNG de alta resolución, dejando la impresión de un favicon que no se ve nítido.
Por eso, incluir varias resoluciones en un solo archivo .ico (o, en algunos casos, complementar con otros archivos .png y tags <link> específicos) asegura que cada dispositivo o navegador “escoja” la versión adecuada para su contexto, sin pérdida de calidad.
2. Dimensiones estándar y recomendaciones de DPI
Cuando hablamos de iconos para la web, la métrica que realmente importa es el tamaño en píxeles absolutos (p. ej., 16 × 16 px). El metadato de DPI (píxeles por pulgada, también llamado PPI) no influye en cómo los navegadores muestran el favicon: todos asumen que la imagen ya está en el tamaño exacto en píxeles que requiere. No obstante, sí conviene que los archivos PNG se exporten con un DPI “neutro” (habitualmente 72 PPI) para evitar que algunos editores de imagen los reescalen automáticamente cuando detectan valores de DPI elevados.
A continuación, una tabla con las resoluciones mínimas recomendadas para formar un .ico multi-resolución, junto con la sugerencia de DPI al exportar cada PNG:
| Tamaño (px) | Contexto de uso | DPI sugerido al exportar |
|---|---|---|
| 16 × 16 | Pestañas de navegador y barras de marcadores | 72 PPI (o 96 PPI) |
| 32 × 32 | Pestañas en pantallas de mayor densidad, zoom navegador | 72 PPI (o 96 PPI) |
| 48 × 48 | Accesos directos en Windows (menú de inicio, explorador) | 72 PPI (o 96 PPI) |
| 64 × 64 | “Tiles” en Windows 10+ (cuando se ancla el sitio) | 72 PPI (o 96 PPI) |
| 128 × 128 | Aplicaciones web modernas, pantallas 4K/Retina avanzadas | 72 PPI (o 96 PPI) |
➤ Importante: Los navegadores simplemente extraen la versión más cercana en píxeles a la que necesitan. Si tu
.icosolo contiene 16 × 16 y 32 × 32, pero el sistema pide 48 × 48, es probable que escale la imagen 32 × 32 y se pierda nitidez. Por eso, incluir al menos hasta 48 × 48 px dentro del.icoes prácticamente obligatorio si quieres compatibilidad plena.
3. Herramientas y flujo de trabajo para generar un favicon.ico multi-resolución
Existen múltiples métodos para agrupar los distintos PNG en un solo archivo ICO. A continuación describimos los más comunes:
3.1 Con ImageMagick (línea de comandos)
Requisitos previos:
- Tener instalado ImageMagick en tu sistema.
- En macOS:
brew install imagemagick - En Ubuntu/Debian:
sudo apt-get install imagemagick - En Windows: descargar el instalador desde https://imagemagick.org
- En macOS:
Pasos a seguir:
- Crea o exporta cada PNG en las dimensiones indicadas:
icon-16.png(16 × 16 px, 72 PPI)icon-32.png(32 × 32 px, 72 PPI)icon-48.png(48 × 48 px, 72 PPI)- (Opcional)
icon-64.png(64 × 64 px, 72 PPI) - (Opcional)
icon-128.png(128 × 128 px, 72 PPI)
- Abre la terminal, navega hasta la carpeta donde están esos archivos PNG y ejecuta:
convert icon-16.png icon-32.png icon-48.png icon-64.png icon-128.png favicon.icoconvertfusionará internamente cada PNG como una “subimagen” en el mismo fichero.ico.
- Al finalizar, encontrarás el archivo
favicon.icocon todas las resoluciones empaquetadas. Sube ese archivo a la raíz de tu servidor (o donde mantengas los assets) y, en tu HTML, referencia:<link rel="icon" href="/favicon.ico" type="image/x-icon" />
3.2 Con GIMP (editor gráfico gratuito)
Ventajas de GIMP:
- Interfaz gráfica que detecta capas de distinto tamaño.
- Permite revisar el aspecto de cada resolución antes de exportar.
Flujo de trabajo sugerido:
- Abre GIMP y crea un nuevo lienzo de, por ejemplo, 128 × 128 px (el tamaño máximo que quieres incluir).
- Importa o dibuja tu diseño en una capa principal (128 × 128 px).
- Crea versiones escaladas:
- Duplica la capa de 128 × 128 y reescálala a 64 × 64 px (p. ej. mostrada en el panel como “ícono 64×64”).
- Duplica la capa de 64 × 64 y redimensiónala a 48 × 48 px.
- Duplica la capa de 48 × 48 y redimensiónala a 32 × 32 px.
- Duplica la capa de 32 × 32 y redimensiónala a 16 × 16 px.
- Exporta como
.ico:- Ve a Archivo → Exportar como…
- Escribe
favicon.ico, pulsa “Seleccionar tipo de archivo por extensión” y elige “Microsoft Windows icon (*.ico)”. - GIMP mostrará un cuadro de diálogo en el que enlistará todas las capas elegibles (16×16, 32×32, 48×48, 64×64, 128×128). Marca aquellas que quieras incluir.
- Haz clic en Exportar.
El resultado será exactamente un solo fichero favicon.ico con todas las versiones internas. Los navegadores seleccionarán la que más se ajuste al contexto.
3.3 Con Photoshop (usando plugins)
Nota: Photoshop no exporta nativamente .ico, pero existen plugins gratuitos como “ICO (Windows Icon) Format” (disponible en https://www.telegraphics.com.au/sw/). Con este plugin instalado:
- Crea o abre tu diseño en un lienzo grande (p. ej. 128 × 128 px) con canal alfa si requieres transparencia.
- Duplica/escala las capas a 64 × 64, 48 × 48, 32 × 32 y 16 × 16 px, de forma similar a GIMP.
- Ve a Archivo → Guardar como… y selecciona “Windows Icon (*.ICO)”. Photoshop detectará automáticamente cada capa con un tamaño compatible y generará un único
.icoempaquetando todas ellas.
3.4 Generadores online
Si prefieres no instalar software, existen varias herramientas web que facilitan la creación de favicons:
- RealFaviconGenerator (https://realfavicongenerator.net)
- Sube un PNG de al menos 512 × 512 px.
- El servicio te mostrará previsualizaciones en distintos dispositivos y generará un paquete ZIP que incluye:
favicon.ico(con 16×16, 32×32, 48×48)- Archivos PNG específicos para iOS, Android y Windows Metro (opcional)
- Fragmentos de código HTML para que copies y pegues en tu
<head>.
- favicon.io (https://favicon.io)
- Permite generar favicons a partir de texto, emoji o SVG personalizados. Al final, descarga un ZIP con:
favicon.icomulti-resolución.- Carpetas
android-chrome,apple-touch-icon,mstile, etc., si deseas soporte extendido.
- Permite generar favicons a partir de texto, emoji o SVG personalizados. Al final, descarga un ZIP con:
Estas soluciones en línea suelen exportar automáticamente con DPI estándar (72 PPI) y generan todas las versiones más comunes sin que tengas que preocuparte por los detalles técnicos.
4. Buenas prácticas y consejos finales
- Diseña primero en alta resolución (vectorial o raster grande).
- Trabaja en un lienzo de, como mínimo, 512 × 512 px (idealmente en formato vectorial como SVG).
- Asegúrate de que las formas y contornos sean simples: a 16 × 16 px cualquier detalle muy fino se perderá.
- Comprueba la legibilidad del icono en 16 × 16 px.
- Antes de exportar, crea un lienzo de prueba a 16 × 16 y pega tu diseño reescalado.
- Ajusta grosores y contornos para que sea reconocible en ese tamaño mínimo.
- Mantén siempre transparencia (canal alfa).
- El fondo del favicon debe ser transparente para adaptarse al color de la pestaña o del sistema operativo.
- 72 PPI (o 96 PPI) como valor de exportación es suficiente y “neutral”: los navegadores ignoran ese metadato y usan la imagen según el número exacto de píxeles.
- Incluye al menos 16 × 16, 32 × 32 y 48 × 48 en tu
.ico.- Con esos tres tamaños cubres navegadores antiguos, pestañas en pantallas de densidad normal y accesos directos en Windows.
- Si tu sitio web espera tráfico móvil o de alta densidad (Retina, 4K), añade también 64 × 64 (o 128 × 128).
- Prueba el resultado en distintos navegadores y sistemas operativos.
- En Chrome o Firefox, revisa la pestaña para asegurarte de que el favicon se ve nítido sin pixelación.
- En Windows, crea un acceso directo al HTML local o en el servidor de prueba, y verifica que el icono del acceso directo use correctamente la versión 48 × 48 (o 64 × 64).
- En macOS, arrastra la URL de tu sitio al escritorio y comprueba si toma el favicon en la resolución adecuada.
- Opcional: complementa con otros formatos para “Web App Manifest” y “Apple Touch Icons”.
- Si tu web se instala como “PWA” (Progressive Web App), el archivo
manifest.jsonnormalmente incluye referencias a PNG de 192 × 192 y 512 × 512 px. - Para dispositivos iOS (Safari), es habitual añadir:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> - Estas prácticas están fuera del alcance de un favicon clásico, pero conviene mencionarlas si quieres ofrecer la mejor experiencia en todos los dispositivos.
- Si tu web se instala como “PWA” (Progressive Web App), el archivo
Conclusión
Crear un favicon correctamente implica mucho más que diseñar un simple cuadrado de 16 × 16 px. Incluir varias resoluciones dentro de un solo archivo .ico garantiza que tu sitio:
- Se vea profesional y definido en navegadores antiguos y modernos.
- Ofrezca un icono nítido en pantallas de alta densidad (Retina, 4K).
- Permita que los accesos directos en Windows, macOS y Linux muestren la mejor versión posible.
Recuerda, la clave está en:
- Diseñar en alta resolución y simplificar los detalles para que a 16 × 16 px sea reconocible.
- Exportar cada PNG en las dimensiones estándar (16, 32, 48, 64, 128 px) con 72 PPI.
- Empaquetar esos PNG en un único
favicon.icousando ImageMagick, GIMP, Photoshop (con plugin) o un generador online confiable.
Siguiendo estos pasos, tu favicon tendrá presencia sólida en el navegador, en listas de favoritos y en los accesos directos del sistema, reforzando la identidad visual de tu proyecto web. ¡Manos a la obra!