Tamaño de favicon: todas las medidas

Un favicon es el pequeño icono que aparece en la pestaña de un navegador, junto al título de la página, y en los marcadores. Es diminuto, pero importa: un sitio sin favicon parece inacabado, mientras que un favicon claro hace que tu marca sea reconocible entre una fila de pestañas abiertas. La buena noticia: crear uno a partir de un logo o imagen existente solo lleva un par de minutos.

Tamaños de favicon: la referencia completa

Esta es la pregunta con la que llega casi todo el mundo, y la respuesta honesta es que no existe un tamaño de favicon único — existe un pequeño conjunto de medidas, porque cada plataforma muestra el icono a una escala distinta. Aquí tienes todos los tamaños que siguen importando en 2026, y para qué sirve realmente cada uno.

Qué hace bueno a un favicon

Como se muestra a unos 16×16 a 32×32 píxeles, un favicon tiene que funcionar siendo muy pequeño. Las formas simples y marcadas se leen bien; los logos detallados con líneas finas o texto pequeño se convierten en un borrón ilegible. Si tu logo es complejo, usa solo su elemento más reconocible — una sola letra, un símbolo, un monograma.

Una imagen de origen cuadrada funciona mejor, ya que el favicon en sí es cuadrado. Asegúrate de que la parte importante esté centrada con un poco de espacio alrededor para que nada se recorte.

Parte de una imagen de al menos 256×256 píxeles para que el icono se mantenga nítido al generarse en cada tamaño. Trabajar desde un logo cuadrado en alta resolución da el resultado más limpio.

Cómo crearlo

Toma tu logo o imagen cuadrada y conviértelo en un archivo .ico. Suelta la imagen en nuestro conversor, elige ICO como salida y descarga el favicon — se ejecuta por completo en tu navegador, así que tu logo nunca se sube. Si tu origen no es cuadrado, recórtalo primero a cuadrado para que el icono no se distorsione.

Para el mejor resultado en todos los tamaños, genera el .ico a partir de una versión limpia y de alto contraste de tu marca en lugar de una foto a todo color recargada.

No necesitas todos como archivos separados

La tabla enumera siete tamaños, pero eso no significa siete archivos. Las tres medidas pequeñas — 16, 32 y 48 píxeles — caben todas dentro de un único favicon.ico, un formato contenedor diseñado precisamente para alojar varias resoluciones a la vez. El navegador abre el archivo y elige el tamaño que encaja en cada contexto. Esa es toda la razón de ser del .ico, y por eso el formato ha sobrevivido treinta años.

El conjunto moderno son por tanto cuatro archivos, no siete: un favicon.ico con las tres medidas pequeñas, un SVG para los navegadores que lo admiten, un PNG de 180×180 para iOS, y dos entradas en un manifiesto web para Android. Las guías antiguas que recomiendan generar veinte PNG distintos describen una época de fragmentación móvil que terminó hace años.

Si solo vas a producir un archivo, que sea el favicon.ico. Es el único que todos los navegadores buscan automáticamente, y un sitio que tenga solo ese se verá correctamente en todas partes — simplemente se verá algo borroso cuando alguien lo guarde en la pantalla de inicio del móvil.

Dónde declarar cada archivo

Coloca los archivos en la carpeta raíz de tu sitio y referéncialos en el head del HTML. Cuatro líneas cubren todas las plataformas:

<link rel="icon" href="/favicon.ico" sizes="32x32">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

El orden importa menos que antes, pero el atributo sizes de la primera línea sí hace algo útil: indica a los navegadores que entienden SVG que prefieran la versión vectorial, dejando el .ico como alternativa para los que no. Los navegadores que no admiten ninguno de los dos encuentran favicon.ico por su cuenta en la raíz.

El manifiesto es un pequeño archivo JSON que lista los iconos de 192 y 512 píxeles. Solo lo necesitas si quieres que el sitio se instale limpiamente como aplicación en Android — para una web normal, las tres primeras líneas bastan.

Por qué no se ve tu favicon

Los favicons se cachean de forma mucho más agresiva que cualquier otro recurso, lo que los vuelve molestos de depurar. Los navegadores los guardan en un almacén aparte que una recarga forzada normal no vacía, así que puedes desplegar un icono nuevo y seguir viendo el antiguo durante días. Abre el archivo del icono directamente por su URL para confirmar que está ahí, y luego recarga esa pestaña — eso suele forzar la actualización más rápido que vaciar toda la caché.

La otra causa habitual es una imagen de origen que nunca fue cuadrada. Un logotipo rectangular convertido a icono cuadrado acaba estirado o recortado, y ninguna de las dos cosas parece intencionada. Recorta primero a cuadrado, con el elemento importante centrado y un pequeño margen alrededor, y convierte después.

Por último, comprueba el contraste tanto sobre fondo claro como oscuro. Un icono con fondo blanco es invisible en un tema claro; un monograma oscuro desaparece en uno oscuro. Si tu marca tiene fondo transparente, pruébala sobre ambos antes de darla por buena.

Cómo añadirlo a tu sitio

Coloca el archivo (normalmente llamado favicon.ico) en la carpeta raíz de tu sitio. La mayoría de los navegadores lo encontrarán automáticamente, pero es buena práctica referenciarlo también en el head del HTML con una etiqueta link: <link rel="icon" href="/favicon.ico">. Si usas un creador de sitios o un CMS, suele haber un campo de «favicon» o «icono del sitio» en los ajustes — solo sube el archivo que creaste.

Una vez en línea, quizá tengas que refrescar o vaciar la caché para ver el nuevo icono en la pestaña. Después, tu sitio se ve un poco más pulido en todos los lugares donde aparece.