Tamaños de favicon en 2026: los que necesitas de verdad (y los que puedes saltarte)
Las listas de tamaños de favicon tienen veinte archivos. Cuatro cubren prácticamente todo. Qué generar, el HTML que hay que pegar y cómo diseñar uno legible a 16 px.
Actualizado el 11 de agosto de 20266 min de lectura
Busca tamaños de favicon y obtendrás listas de veinte archivos, la mitad para plataformas que ya no existen. El conjunto que realmente sostiene el peso en 2026 son cuatro elementos: un ICO por compatibilidad heredada, un SVG si tienes arte vectorial, un PNG de 180 × 180 para la pantalla de inicio de iOS y PNG de 192 y 512 para Android y las aplicaciones web progresivas. Todo lo demás de esas listas o está cubierto por uno de los cuatro, o sirve a una plataforma con cuota insignificante.
Los archivos que importan
| Archivo | Tamaño | Para qué sirve | ¿Sigue haciendo falta? |
|---|---|---|---|
favicon.ico | 16, 32 y 48 en un solo archivo | Pestañas, marcadores, respaldo heredado | Sí |
icon.svg | Vectorial | Navegadores modernos; admite modo oscuro | Si tienes arte vectorial |
apple-touch-icon.png | 180 × 180 | Pantalla de inicio de iOS | Sí: un solo tamaño cubre todos los dispositivos |
icon-192.png | 192 × 192 | Pantalla de inicio de Android | Sí |
icon-512.png | 512 × 512 | Diálogo de instalación y pantalla de carga PWA | Sí, si publicas un manifiesto |
| Mosaicos de Windows | 70–310 | Mosaicos de Inicio de Windows 8/10 | Rara vez: heredado |
Merece la pena entender el formato ICO porque es inusual: un único archivo .ico puede contener varios tamaños y el navegador elige el que necesita. Por eso un solo archivo cubre 16, 32 y 48 en lugar de hacer falta tres.
Apple simplificó bastante su parte: 180 × 180 es ahora el único tamaño de icono táctil que necesitas, y tanto los dispositivos antiguos como los nuevos escalan ese archivo. Las largas listas de iconos Apple de 57, 72, 114 y 144 píxeles llevan años obsoletas.
Diseña para 16 píxeles, no para tu logotipo
Aquí es donde fallan casi todos los favicons. Una marca denominativa completa reducida a 16 × 16 es un borrón ilegible: a ese tamaño tienes aproximadamente el detalle de una sola letra. El trabajo del favicon es ser reconocible en una fila de veinte pestañas, no reproducir la marca.
- Usa una letra o un símbolo, no el logotipo completo. La inicial, la parte icónica de una marca combinada o una única forma distintiva.
- Elimina el detalle fino. Los trazos delgados, los degradados y los contornos desaparecen o se emborronan. Las formas sólidas sobreviven.
- Usa mucho contraste sobre claro y sobre oscuro. Las barras de pestañas existen en ambos modos, y una marca oscura sobre una barra oscura se desvanece.
- Rellena el cuadrado. Los márgenes transparentes grandes hacen la marca más pequeña de lo necesario. Deja solo un poco de aire.
- Pruébalo a tamaño real. No ampliado en tu editor: a 16 píxeles, en una pestaña real, junto a otras pestañas.
Generar los archivos
Parte de un original cuadrado y transparente
Idealmente de 512 × 512 o más. Si tu logotipo está sobre un recuadro blanco, recórtalo con el borrador de fondo; si no es cuadrado, recórtalo con el recortador en lugar de dejar que el generador añada bandas.
Genera el conjunto
El generador de favicon produce favicon.ico (16, 32 y 48 en un solo archivo), favicons PNG de 16, 32, 48 y 96, el icono táctil de Apple de 180 × 180, los PNG de 192 y 512 para Android y las aplicaciones web instalables, un site.webmanifest y un fragmento HTML listo para pegar, todo en un único zip. Con Pro se añaden los iconos de densidad de Android, los mosaicos de Windows y una copia SVG si tu original es vectorial.
Completa los datos del manifiesto
El icono de 512 × 512 y el site.webmanifest ya vienen en el paquete: los iconos PWA están activados por defecto. Antes de generar, indica en el generador el nombre de la aplicación, el nombre corto y el color del tema para que el manifiesto los incluya; ya apunta por sí solo a los iconos de 192 y 512.
Coloca los archivos en la raíz y añade las etiquetas
La ubicación en la raíz importa: los navegadores piden /favicon.ico directamente, lo declares o no.
Añade un logotipo y obtén el paquete completo de favicon en un solo zip. Se genera en tu dispositivo: el logotipo nunca se envía a un servidor.
Generar un faviconEl HTML que necesitas
Cuatro líneas en el <head> cubren todos los navegadores y plataformas actuales. Más que esto suele ser residuo heredado copiado de un tutorial antiguo:
<link rel="icon" href="/favicon.ico" sizes="32x32">: la base de compatibilidad.<link rel="icon" href="/icon.svg" type="image/svg+xml">: los navegadores modernos lo prefieren si está presente.<link rel="apple-touch-icon" href="/apple-touch-icon.png">: pantalla de inicio de iOS.<link rel="manifest" href="/site.webmanifest">: apunta a los iconos de 192 y 512 para Android y la instalación PWA.
Un favicon SVG tiene una ventaja real más allá del escalado: puede responder al esquema de color del navegador con una consulta prefers-color-scheme dentro del propio SVG, de modo que una marca oscura pase a clara sobre una barra de pestañas oscura. Mantén el ICO junto a él: los favicons SVG funcionan en Chrome, Firefox, Edge y, desde Safari 26, también en Safari, pero los navegadores antiguos y otras herramientas siguen necesitando el ICO como respaldo.
Por qué no aparece tu nuevo favicon
Los favicons se cachean de forma inusualmente agresiva, a menudo más allá de una recarga forzada normal y a veces con independencia de la caché de la página. Antes de dar por hecho que tu archivo está mal, ábrelo directamente en https://tusitio.com/favicon.ico para confirmar que se está sirviendo, y luego prueba en una ventana privada, que suele empezar con la caché de iconos limpia.
Si de verdad se ha quedado atascado, añadir una cadena de consulta a la etiqueta (/favicon.ico?v=2) fuerza una nueva descarga. Y aprovecha para revisar el tamaño del archivo: los favicons se piden prácticamente en cada carga de página, así que un icono de 200 KB merece pasar por el compresor de PNG. Un conjunto de favicon bien hecho pesa unos pocos kilobytes en total.
Preguntas frecuentes
¿Qué tamaños de favicon necesito realmente en 2026?
Cuatro cosas lo cubren: un `favicon.ico` con versiones de 16, 32 y 48 píxeles, un SVG si tienes arte vectorial, un icono táctil de Apple de 180 × 180 y PNG de 192 y 512 píxeles referenciados desde un manifiesto web. Las listas más largas que encontrarás son en su mayoría tamaños heredados de Apple y Windows.
¿Puedo usar un PNG en lugar de favicon.ico?
Los navegadores modernos aceptan favicons en PNG y SVG, pero siguen pidiendo `/favicon.ico` en la raíz por defecto, y algunas herramientas y lectores de feeds lo esperan. Publica el ICO como respaldo y deja que los navegadores modernos prefieran el SVG o el PNG que declares.
¿Por qué se ve borroso mi favicon?
Normalmente porque se generó a partir de un original más pequeño que el mayor tamaño de salida, así que se amplió. Parte de al menos 512 × 512. También puede tener demasiado detalle: los trazos finos y los degradados se emborronan a 16 píxeles por muy buena que sea la fuente.
¿Cómo hago un favicon a partir de mi logotipo?
Recorta el logotipo a un cuadrado, elimina el fondo para que tenga transparencia real, simplifícalo a un único símbolo o letra y pásalo por un generador para producir el ICO y el conjunto de PNG. Comprueba el resultado a 16 píxeles en una pestaña real antes de publicarlo.