Favicons: qué tamaños necesitas realmente en 2026

Empieza por los consumidores, no por la lista de archivos

Un icono de sitio acaba en exactamente cinco sitios, y cada uno lee una cosa concreta. La pestaña y la barra de marcadores leen lo que el head declara como rel="icon", prefiriendo un vectorial si ofreces uno. Todo lo que adivina — navegadores antiguos, lectores de feeds, generadores de vistas previas de enlaces, una cantidad sorprendente de herramientas internas — pide /favicon.ico en la raíz del sitio, sin marcado alguno. La pantalla de inicio de iOS y iPadOS lee apple-touch-icon.png. La pantalla de inicio de Android y el aviso de instalación de Chrome leen el array icons del manifiesto de aplicación web. Esa es la lista completa de consumidores, y no ha crecido en años.

Relee esa lista y fíjate en lo que falta. No hay ningún consumidor que quiera 57 píxeles, ni 70, ni 114, ni 144, ni 310. Esos números vienen de una matriz histórica concreta: los mosaicos de sitios anclados de Internet Explorer, una década de dispositivos iOS anteriores a que el sistema aprendiera a reducir un solo archivo, y una generación de lanzadores de Android anterior al manifiesto. Esos tres consumidores ya no existen. Lo que queda de ellos es salida de generador — veintitantos PNG y un browserconfig.xml — depositada en la raíz de sitios cuyos dueños no saben cuál de esos archivos lee todavía algo.

El conjunto mínimo, y lo que cuesta el máximo

Construimos ambos, a partir de una sola marca de 512 × 512, y los pesamos. El conjunto mínimo es favicon.ico con 1 664 bytes, icon.svg con 254 bytes, apple-touch-icon.png a 180 × 180 y 13 573 bytes, icon-192.png con 14 510 bytes e icon-512.png con 27 390 bytes: cinco archivos, 57 391 bytes. La matriz heredada — la misma marca exportada a 16, 24, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 128, 144, 150, 152, 167, 180, 192, 196, 228, 256, 310, 384 y 512 — son 26 archivos y 272 192 bytes, antes del ICO y los dos archivos de configuración. Son 4,7 veces los bytes y cinco veces los archivos para exactamente cero cobertura adicional.

El total en bytes es lo menos interesante, porque un visitante nunca lo descarga todo. En una visita normal el navegador pide el icono de pestaña y nada más: nuestro ICO más nuestro SVG son 1 918 bytes, y un navegador que toma el SVG pide 254. El apple-touch-icon y los iconos del manifiesto solo se solicitan cuando alguien instala de verdad el sitio o lo añade a una pantalla de inicio. Lo que de verdad cuesta el número de archivos es el mantenimiento: 26 archivos de mapa de bits que hay que regenerar, de forma coherente, cada vez que cambia la marca, y que nadie va a comprobar jamás.

SVG en la pestaña: casi en todas partes ya, todavía no en todas

Un icono de pestaña vectorial es el mejor cambio que puedes hacer, porque elimina toda la cuestión de qué tamaños de mapa de bits publicar: el navegador pide lo que necesita y el motor de renderizado lo produce. Chrome y Edge leen SVG en rel="icon" desde la versión 80, Firefox desde la 41. Safari fue el rezagado — durante años solo admitió su propio formato monocromo de pestaña anclada — y Safari 26 es la primera versión que muestra un favicon SVG corriente en pestañas y marcadores. Las tablas de soporte sitúan la cifra combinada en torno al 89 % del tráfico mundial, y sube a medida que las instalaciones de Safari se actualizan.

Ese último 11 % es la razón de conservar el ICO. No está ahí para la pestaña; está porque /favicon.ico es una ruta que se pide sin marcado alguno, por navegadores demasiado antiguos para SVG y por toda herramienta ajena al navegador que quiere un icono de sitio y no analiza HTML. Basta con una entrada de 32 × 32. Mantenlo en la raíz, no en una carpeta de recursos, porque los clientes que lo piden por convención no leerán tu elemento link para saber adónde lo has movido.

Qué hace sizes="any" y por qué ese consejo ha cambiado

En el estándar HTML el atributo sizes es una pista: una lista de valores ancho por alto separados por espacios que dice al navegador qué contiene el recurso, más la palabra clave única any, que declara que el recurso es escalable — un vectorial. El navegador es libre de usarla o ignorarla. No es una instrucción de renderizado, y poner sizes en una imagen no redimensiona nada.

El consejo que encontrarás en todas partes — poner sizes="any" en el ICO — nunca tuvo que ver con esa definición. Era un rodeo ante un comportamiento de Chrome: ante un ICO y un SVG, Chrome descargaba los dos y usaba el ICO, así que se declaraba el ICO como «any» para empujar a Chrome hacia el SVG. Funcionaba, pero afirma algo falso sobre el archivo. La recomendación actual de las mismas personas que popularizaron el truco es declarar el ICO honestamente como sizes="32x32": resuelve la misma doble descarga y no miente sobre lo que hay en el archivo. Si copiaste un fragmento de favicon antes de 2023 aproximadamente, esta es la línea que conviene actualizar.

Un icono de 16 píxeles no es un icono de 512 reducido

Aquí es donde la lista de archivos no puede ayudar. Un lienzo de 512 × 512 tiene 262 144 píxeles. Uno de 16 × 16 tiene 256 — una milésima veinticuatroava parte. Cada rasgo de tu marca tiene que sobrevivir a ser promediado dentro de ese presupuesto, y promediar es exactamente lo que hace el suavizado: un filete más fino que un píxel de salida no se convierte en una línea fina, se convierte en un tinte tenue repartido por los píxeles que cubre en parte.

Lo medimos sobre una marca: una letra en negrita, un logotipo compuesto a 52 píxeles, una línea de remate a 24 y un anillo blanco de 8 píxeles, todo sobre un lienzo de 512. La marca contiene 407 colores distintos a 512 y 85 a 16. Midiendo el contraste de luminancia que le queda a cada rasgo — la diferencia entre su píxel más claro y el más oscuro —, la letra en negrita pasa de 199,4 niveles a 512 a 188,0 a 16: sobrevive, con el 94 % de su contraste. El logotipo pasa de 199,4 a 86,4 — un 57 % perdido. La línea de remate pasa de 199,4 a 29,1 — un 85 % perdido. A esas alturas no es texto pequeño, es una barra gris.

El anillo es el caso más claro, porque podemos seguir una sola línea de barrido a través de él. En el original de 512 el trazo del anillo da blanco puro, luminancia 255 sobre un fondo de 56 — un contraste de 199. A 192 sigue en 255. A 48, donde el trazo de 8 píxeles baja a 0,75 de un píxel de salida, su punto más claro solo llega a 159. A 32 llega a 121. A 16, donde el trazo mide un cuarto de píxel, el punto más claro de todo el anillo está en 99 sobre un fondo de 52: un contraste de 47, frente a 199. Tres cuartas partes de la presencia del anillo han desaparecido, y ningún enfoque en el cuadro de exportación las devuelve — la información está por debajo de la rejilla de muestreo.

La consecuencia práctica es una regla de diseño, no de archivos: a 16 píxeles una marca puede sostener una forma gruesa y nada más. Si tu logotipo es una palabra compuesta, el favicon es su primera letra o su símbolo, no la palabra. Si tiene un filete, engrósalo o quítalo. Dibuja una versión simplificada aparte para los tamaños pequeños si te importa la pestaña — y si es así, ese es el único caso en que dibujar a mano un mapa de bits de 16 y de 32 píxeles gana a dejar que decida un reductor.

Los dos archivos que no son favicons en absoluto

El apple-touch-icon y los iconos del manifiesto acaban metidos en las listas de favicons, pero son iconos de aplicación y se comportan como tales. El apple-touch-icon mide 180 × 180, que es el icono iOS de 60 puntos a densidad 3×, y iOS reduce ese único archivo para todos los demás dispositivos — la vieja escalera de 57, 72, 76, 114, 120, 144 y 152 es innecesaria. Importan dos cosas: iOS aplica su propia máscara de rectángulo redondeado, así que una marca a sangre pierde las esquinas; y iOS no conserva la transparencia aquí, así que un fondo transparente se aplana por ti, y no necesariamente al color que habrías elegido.

Los iconos del manifiesto son lo que Chrome comprueba antes de ofrecer la instalación: quiere una entrada de 192 y otra de 512 píxeles, y sin ambas el aviso de instalación sencillamente no aparece nunca, sin error en ninguna parte. Añade una tercera entrada de 512 × 512 con purpose en maskable si quieres que los lanzadores de Android recorten el icono en círculo o en squircle sin cortar tu dibujo — la zona segura es entonces un círculo central de 409 píxeles sobre el lienzo de 512, es decir alrededor del 80 % del ancho, y todo lo que quede fuera puede enmascararse.

Preguntas frecuentes

¿Sigo necesitando un favicon.ico si publico un SVG?

Sí, y cuesta casi nada — 1 664 bytes para una sola entrada de 32 × 32 en nuestra prueba. Su función no es la pestaña. Su función son las peticiones que llegan sin marcado: navegadores anteriores a Chrome 80 o Safari 26, lectores de feeds, generadores de vistas previas y herramientas internas que piden /favicon.ico por convención. Ponlo en la raíz del sitio, porque esos clientes no leerán tu elemento link para encontrarlo en otro sitio.

¿Mi ICO debe contener versiones de 16, 32 y 48 píxeles?

No de forma útil. Construimos ambos: una sola entrada de 32 × 32 dio 1 664 bytes, y meter 16, 32 y 48 en un archivo dio 5 188 — más del triple. Los clientes que todavía leen el ICO son los menos propensos a ser exigentes con la entrada que reciben, y la reducción moderna de 32 a 16 es buena. Invierte el esfuerzo en el diseño a 16 píxeles, que es lo que de verdad se ve.

¿Puede un favicon SVG cambiar de color en modo oscuro?

Puede, y es una de las ventajas reales del archivo vectorial. Un favicon SVG puede contener un bloque de estilo, y una consulta de medios prefers-color-scheme dentro de él la respetarán los navegadores que dibujan el SVG, así que una pestaña en modo oscuro puede recibir una marca más clara sin un segundo archivo. Eso sí, no construyas nada esencial sobre ello: el respaldo ICO no puede hacerlo, ni tampoco el apple-touch-icon ni los iconos del manifiesto.

¿Por qué Chrome nunca ofrece instalar mi sitio?

La causa más frecuente es un manifiesto sin un icono de 192 y otro de 512 píxeles. Chrome comprueba esos dos tamaños como parte de sus criterios de instalabilidad, y cuando falta uno no te avisa — el botón de instalación sencillamente no aparece. Mira el panel de aplicación de las herramientas de desarrollo: lista el manifiesto tal como se ha analizado e indica qué requisito ha fallado.

¿Puedo exportar el archivo de 512 a todos los tamaños menores y ya está?

Puedes, y para los archivos de 180, 192 y 512 píxeles es exactamente lo correcto: son lo bastante grandes para contenerlo todo. Es en el extremo de 16 y 32 píxeles donde la reducción automática deja de bastar. En nuestra marca de prueba la pequeña línea de remate perdió el 85 % de su contraste a 16 píxeles y el anillo fino el 76 %, así que el icono que llega a la pestaña es un borrón de las formas previstas. O simplificas el dibujo para esos tamaños o aceptas que la pestaña muestre una sola forma gruesa.