Tamaños y formatos de favicon en 2026: lo que realmente necesita tu sitio web.
7 min de lectura
Busca consejos sobre cómo crear un favicon y encontrarás listas de verificación que exigen más de veinte archivos de iconos: un archivo PNG para cada generación de iPad, imágenes para los mosaicos de Windows, el archivo browserconfig.xml y máscaras para las pestañas fijas. La mayor parte de esto es un vestigio de prácticas obsoletas de 2014, destinadas a plataformas que ya no existen o que han vuelto a utilizar iconos estándar. En 2026, necesitarás seis archivos de imagen, un archivo de manifiesto y unas cinco líneas de código HTML. Con esto, cubrirás las pestañas del navegador, los marcadores, los resultados de búsqueda de Google, la pantalla de inicio de iOS y Android, incluidos los iconos de las aplicaciones web instaladas. Esta guía te explicará qué archivos son importantes, por qué existe cada uno, qué puedes eliminar con seguridad y cómo generar todo el conjunto a partir de un único logotipo, sin necesidad de instalar nada ni de subir tus diseños a ninguna plataforma.
Dónde aparece realmente tu icono.
Hace mucho tiempo que un favicon dejó de ser simplemente un elemento decorativo en la pestaña del navegador. Ahora, este pequeño conjunto de imágenes se utiliza en lugares donde su importancia es mucho mayor de lo que se podría imaginar, y cada uno de ellos requiere un tamaño y un formato específicos.
Las pestañas, los marcadores y el historial del navegador muestran su icono en 16 x 16 píxeles CSS, y lo duplican a 32 x 32 en pantallas de alta densidad. Google muestra los iconos de los sitios web junto a los resultados de búsqueda, por lo que un icono faltante o de mala calidad hará que su anuncio parezca menos legítimo que el del competidor que aparece encima. Cuando alguien guarda su sitio en la pantalla de inicio de un iPhone, iOS utiliza su icono «apple-touch-icon» como icono completo de la aplicación. En Android, Chrome utiliza los iconos de su manifiesto para la misma función, y si su sitio se puede instalar como una aplicación web, el icono de 512 píxeles se convierte en la imagen de la pantalla de inicio mientras se carga.
Esta es la lista completa de elementos que vale la pena diseñar. No incluye los mosaicos de la pantalla de inicio de Windows, los iconos de las pestañas fijas de Safari ni las diferentes resoluciones de pantalla de los modelos antiguos de iPad; más adelante se ofrecerá información adicional sobre estos elementos.
El paquete de 2026: siete archivos, cinco líneas de código HTML.
Aquí tienes todo lo que necesita un sitio web normal. Si una lista de verificación te dice que generes más de esto, es relleno.
Los archivos deben colocarse en el directorio raíz de su sitio web (específicamente, el archivo favicon.ico debe estar allí). El código HTML consiste en unas pocas etiquetas de enlace en la sección `<head>`: una para el archivo ICO, una para cada uno de los dos archivos PNG, una etiqueta `rel="apple-touch-icon"` y una etiqueta `rel="manifest"` que apunta al archivo `webmanifest`.
- favicon.ico: un único archivo ICO que contiene versiones de 16, 32 y 48 píxeles. Es el elemento clave para garantizar la compatibilidad; más adelante se explica por qué sigue siendo relevante.
- favicon-16x16.png y favicon-32x32.png: imágenes PNG de alta calidad para la pestaña y la barra de marcadores, tanto en pantallas estándar como en pantallas de alta densidad.
- apple-touch-icon.png, con dimensiones de 180x180: el icono que se muestra en la pantalla de inicio de los dispositivos iOS. Ahora, una única versión es compatible con todos los modelos actuales de iPhone e iPad; iOS la ajusta automáticamente cuando es necesario.
- android-chrome-192x192.png y android-chrome-512x512.png: se utilizan en el archivo de manifiesto y sirven para la pantalla de inicio de Android, el conmutador de aplicaciones y la pantalla de presentación durante la instalación.
- site.webmanifest: un pequeño archivo JSON que contiene la información de los dos iconos de Android, así como el nombre de la aplicación y el color del tema. Es necesario para que los iconos de Android se detecten y para que el sitio web se pueda instalar.
- Opcional: un favicon en formato SVG mediante una etiqueta de enlace con el tipo de archivo image/svg+xml. Se adapta perfectamente y puede modificar su estilo para las pestañas de color oscuro mediante una consulta de medios integrada, pero conserve las versiones de respaldo en formato PNG e ICO.
¿Por qué el archivo favicon.ico parece ser indestructible?
El formato ICO es un formato de Windows de la década de 1990, y, sin embargo, eliminarlo sigue siendo un error en 2026. La razón es que los navegadores, los rastreadores, los lectores de RSS y un sinnúmero de programas de extracción de datos solicitan el archivo /favicon.ico desde el directorio raíz de su sitio web, por convención, sin siquiera leer su código HTML; cualquier registro de un servidor web muestra un flujo constante de estas solicitudes. Si el archivo no está presente, se muestra un error 404 y su icono aparece en blanco en esos contextos.
Además, este formato tiene una característica interesante: un único archivo .ico actúa como contenedor y puede almacenar varias versiones de la imagen en diferentes tamaños. Un archivo favicon.ico bien diseñado contiene internamente imágenes de 16, 32 y 48 píxeles, y el programa que lo lee selecciona la versión que mejor se adapta en lugar de redimensionar una imagen de tamaño incorrecto y distorsionarla. Por eso, convertir un archivo PNG de un solo tamaño en un archivo favicon.ico resulta en una pérdida de calidad: las versiones más pequeñas se redimensionan sobre la marcha y pierden nitidez en sus bordes.
Por lo tanto, la regla práctica es la siguiente: proporcione un archivo favicon.ico con varios tamaños en el directorio raíz para todos los elementos que lo soliciten según la convención, y proporcione las imágenes PNG de 16 y 32 píxeles a través de etiquetas de enlace para los navegadores modernos, que las prefieren.
La trampa de iOS: la transparencia se vuelve opaca.
El icono «apple-touch-icon» tiene un borde afilado que engaña a casi todo el mundo al menos una vez. iOS no superpone iconos transparentes sobre un fondo agradable; en cambio, rellena las zonas transparentes con negro sólido. Un logotipo exportado con fondo transparente se ve bien en todas partes, pero en la pantalla de inicio de un iPhone se convierte en un cuadrado negro con una marca flotante.
La solución consiste en aplicar un color de fondo uniforme al icono antes de exportarlo: blanco, el color de su marca o cualquier otro color que elija. A continuación, iOS redondeará las esquinas automáticamente, por lo que no es necesario redondearlas previamente; si lo hace, el icono se recortará por segunda vez y mostrará pequeñas franjas oscuras en las esquinas.
También es importante dejar un margen alrededor del logotipo: dado que iOS aplica su propia máscara en las esquinas, cualquier elemento gráfico que toque el borde del lienzo de 180x180 píxeles se recortará. Mantener el logotipo aproximadamente en el centro, ocupando alrededor del 80 % del espacio, es una buena práctica y, además, así se verá mejor como icono de la aplicación.
¿Qué es algo obsoleto? (borra estas ideas de tu mente)
El código antiguo para el favicon rara vez causa problemas, pero ralentiza la carga de cada página y obliga a los encargados del mantenimiento a buscar archivos de imagen que nadie utiliza. Se puede eliminar todo lo siguiente:
- Los archivos browserconfig.xml y las etiquetas meta msapplication-TileColor y TileImage. Estos alimentaban los iconos de la pantalla de inicio de Windows 8 e Internet Explorer 11. Ambos ya no existen.
- apple-touch-icon-precomposed. Esto eliminaba el efecto de brillo que iOS 6 añadía a los iconos. El efecto de brillo desapareció con iOS 7 en 2013; ahora, simplemente necesitas el atributo «rel» del icono «apple-touch-icon» sin modificaciones.
- La escala de tamaños para los iconos «apple-touch-icon»: 57, 72, 76, 114, 120, 144, 152. Estos tamaños correspondían a las densidades específicas de los modelos antiguos de iPhone y iPad. Un único icono de 180x180 es suficiente para todos los dispositivos actuales.
- El atributo «rel» con el valor «shortcut icon» era una peculiaridad de Internet Explorer y nunca formó parte de un estándar. El atributo «rel» con el valor «icon» ha funcionado correctamente en todas partes durante más de una década.
- Iconos de Safari para pestañas fijas en formato SVG. Las versiones modernas de Safari utilizan el favicon estándar para las pestañas fijas, por lo que el archivo de la máscara monocromática ya no es necesario.
- Se utilizaron etiquetas de enlace PNG con tamaños de 96, 128, 196 y 228 píxeles para mantener la compatibilidad con las versiones antiguas de Chrome y Opera. En Android, estos se reemplazaron con los iconos del manifiesto; en las versiones de escritorio, nunca fueron necesarios.
Diseñar un logotipo que se vea bien incluso con solo 16 píxeles.
Las cuestiones relacionadas con el formato son la parte más sencilla. Lo difícil es que el icono tenga que verse bien en un tamaño de 16x16 píxeles, y un logotipo de 256 píxeles se verá borroso. Algunas reglas pueden ayudar.
Simplifique al máximo. Utilice el símbolo de su logotipo, no el nombre de la marca en forma de texto; el texto es ilegible cuando tiene menos de 32 píxeles, a menos que conste de una o dos letras. Si su marca se basa en la tipografía, un monograma de una sola letra sobre un fondo de color sólido siempre será más efectivo que un logotipo completo reducido.
Prefiere formas audaces y alto contraste sobre el detalle. Los trazos finos desaparecen en tamaños pequeños y los degradados sutiles se aplanan hasta convertirse en ruido. Comprueba el icono tanto en una barra de pestañas clara como en una oscura; una marca azul marino oscuro se pierde en un tema oscuro a menos que tenga un contorno más claro, un chip de fondo o una variante SVG que cambie los colores mediante una regla prefers-color-scheme.
Por último, observe el resultado con un zoom del 100 %, sin ampliarlo en su programa de diseño. Una imagen del tamaño de una pestaña es la única vista previa fiable.
Crear todo el diseño a partir de un único logotipo, directamente en el navegador.
No necesitas Photoshop ni una incantación de ImageMagick en la línea de comandos para hacer esto. El generador de favicon de FileTinker toma una sola imagen y produce el paquete completo descrito arriba en un solo paso: el favicon.ico multi-tamaño con entradas de 16, 32 y 48 píxeles, favicon-16x16.png y favicon-32x32.png, un apple-touch-icon.png de 180x180 con fondo para que no se vea negro en iOS, android-chrome-192x192.png y android-chrome-512x512.png, un site.webmanifest que conecta los iconos de Android, y un fragmento de código para copiar y pegar con las etiquetas de enlace correspondientes. Todo llega en un solo zip y el procesamiento ocurre totalmente en tu navegador; el logo nunca sale de tu máquina.
Empieza con la versión más grande y nítida de tu logotipo; lo ideal es que tenga 512 píxeles o más, ya que la resolución máxima de salida es 512x512 y escalar una imagen pequeña puede dejarla borrosa. Si la imagen original no es cuadrada, el generador ofrece las opciones de ajuste 'cover' (cubrir) y 'contain' (ajustar): 'cover' llena el marco y recorta el exceso, mientras que 'contain' ajusta toda la imagen dentro del marco y rellena el resto con el color de fondo que elijas. Para tener un control preciso sobre qué parte de un logotipo ancho se conserva, conviértelo tú mismo en una imagen cuadrada usando la herramienta de recorte y luego pásala al generador.
Elige el color de fondo con cuidado, incluso si tu logotipo no tiene transparencia; es lo que verán los usuarios de iOS detrás de tu imagen y lo que rellenará el espacio vacío. Luego, descomprime el archivo en el directorio raíz de tu sitio web, pega el código en la sección `<head>` y publícalo. Si solo necesitas un archivo .ico rápido para un proyecto secundario, la herramienta de conversión de imágenes puede convertir una imagen PNG a ICO en segundos, generando un icono de un solo tamaño. Sin embargo, para cualquier proyecto que vaya a ser visible para el público, vale la pena dedicar un minuto más a utilizar el paquete completo.