Los tamaños de favicon que realmente quieren los navegadores y dispositivos

Un favicon solía significar una sola imagen pequeña de 16×16. Ahora una pestaña del navegador, el acceso directo en la pantalla de inicio de un teléfono, una barra de marcadores y un icono táctil de Apple esperan cada uno su propio tamaño, y ofrecer solo uno deja algunos de esos contextos borrosos o mostrando un icono genérico de reserva en lugar del tuyo.

Por qué un solo tamaño no basta

Un icono de 16×16 ampliado para llenar un hueco de icono de pantalla de inicio de 180×180 se ve exactamente tan pixelado como cualquier imagen pequeña estirada a gran tamaño — no hay forma de añadir detalle que no estaba en la fuente original. Cada contexto en el que aparece un favicon tiene su propia resolución esperada, y la práctica moderna es ofrecer un conjunto de tamaños en lugar de confiar en que un navegador amplíe mal un solo archivo pequeño.

Los tamaños que merece la pena cubrir

• 16×16 y 32×32 — los tamaños clásicos de favicon, usados en pestañas del navegador y listas de marcadores en la mayoría de navegadores de escritorio.
• 180×180 — el tamaño esperado por Apple para el icono de pantalla de inicio cuando se añade una página a la pantalla de inicio de un iPhone o iPad.
• 192×192 y 512×512 — usados por Android y por los manifiestos de aplicaciones web para iconos de pantalla de inicio y pantallas de carga en aplicaciones web instalables.

Mantener el diseño legible a 16px

Generador de favicon toma una imagen de origen y produce de una vez todo el conjunto de tamaños estándar, enteramente en tu navegador — pero ningún generador puede arreglar un diseño que de entrada no funciona a tamaños pequeños. El detalle fino, las líneas finas y el texto pequeño desaparecen por completo a 16×16; una forma o letra simple y de trazo grueso que siga siendo reconocible al reducirse es lo que realmente se lee con claridad en una pestaña del navegador, sin importar cuántos tamaños se generen a partir de ella.