Por qué un icono se convierte en seis archivos
El favicon nació en 1999 como un único favicon.ico de 16×16 que Internet Explorer buscaba en la carpeta raíz de un sitio. Desde entonces, cada plataforma que muestra el icono de un sitio ha pedido su propio tamaño, y el conjunto ha crecido:
- 16 px: la pestaña del navegador y la lista de marcadores en pantallas estándar.
- 32 px: las pestañas en pantallas de alta densidad y la barra de tareas de Windows cuando se ancla un sitio.
- 48 px: los accesos directos del escritorio de Windows y algunos listados de sitios.
- 180 px: el Apple touch icon, que se usa cuando alguien añade el sitio a la pantalla de inicio de un iPhone o iPad.
- 192 px y 512 px: los iconos de la pantalla de inicio de Android y la pantalla de bienvenida de una aplicación web instalada, declarados en el manifiesto web.
El ZIP contiene favicon.ico con los tres tamaños pequeños dentro, apple-touch-icon.png, icon-192.png, icon-512.png y un site.webmanifest que apunta a los dos iconos de Android. El archivo lleva el nombre de tu archivo de origen, así que logo.svg da logo.favicon.zip.
Cómo se genera el conjunto
Cada tamaño se dibuja directamente a partir de tu archivo original sobre su propio cuadrado transparente. Si la imagen no es cuadrada, se escala para que quepa y se centra, con espacio transparente en los lados más cortos. Un SVG se rasteriza de nuevo para cada tamaño, así que el icono de 16 px tiene la misma precisión vectorial que el de 512 px; una imagen rasterizada se reduce con el suavizado del navegador.
El archivo ICO guarda sus tres imágenes como datos PNG dentro del contenedor ICO, una variante compatible desde Windows Vista y con todos los navegadores actuales. Mantiene la transparencia completa y suele ser mucho más pequeño que el antiguo formato ICO basado en mapas de bits.
Todo el renderizado se hace con la Canvas API en tu navegador. Se aceptan archivos de origen de hasta 20 MB en PNG, JPG, WebP o SVG.
Diseñar un logotipo que sobreviva a 16 píxeles
A 16×16 solo hay 256 píxeles en total. Un logotipo detallado se convierte en una mancha borrosa a ese tamaño, y es un problema de diseño que ningún ajuste de exportación puede resolver. Lo que funciona:
- Usa un símbolo, no el logotipo completo. Una letra, un monograma o el símbolo del logotipo sin el texto.
- Formas gruesas y pocos colores. Los trazos más finos que aproximadamente 1/16 del ancho desaparecen en el tamaño más pequeño.
- Llena el cuadrado. Recorta los márgenes vacíos del original antes de generar; un logotipo flotando en mucho espacio transparente acaba diminuto en la pestaña.
- Comprueba los dos temas. Las barras de pestañas del navegador pueden ser claras u oscuras. Un icono negro sobre fondo transparente desaparece en una barra oscura; un contorno claro o una forma de color sólido detrás ayudan.
Si la versión de 16 px sigue viéndose confusa, puede valer la pena preparar un original simplificado aparte, generar el conjunto a partir de él y quedarte con los PNG grandes de la versión detallada.
Peculiaridades de cada plataforma que conviene saber
Apple touch icons transparentes
iOS no muestra transparencia en los iconos de la pantalla de inicio; las zonas transparentes se rellenan, normalmente de negro. Como el generador mantiene la transparencia, un logotipo sobre fondo transparente queda con un cuadrado oscuro alrededor en un iPhone. Para un resultado limpio, usa un original con un color de fondo sólido o exporta tu logotipo con su fondo antes de soltarlo aquí.
Completar el manifiesto web
El site.webmanifest incluido solo enumera los dos iconos. Para un sitio que deba poder instalarse como aplicación, ábrelo en un editor de texto y añade al menos name, short_name, start_url, display (por ejemplo standalone) y theme_color. Sin ellos, los navegadores recurren al título de la página y no ofrecerán la instalación.
Una caché testaruda
Los navegadores guardan los favicons en caché de forma agresiva, a veces durante días e independientemente de la caché de la página. Si sigue apareciendo el icono antiguo después de subir los archivos nuevos, abre directamente la URL del icono y recárgala, o añade un parámetro de versión como ?v=2 a los enlaces del icono en tu HTML.
Elegir el archivo de origen
Un SVG cuadrado es el origen más cómodo, porque se dibuja nítido a 512 px por pequeño que sea el diseño original. Si tienes un logotipo vectorial en otro formato, expórtalo como SVG o como PNG de al menos 512×512. Para un logotipo rasterizado que solo existe en tamaño pequeño, ampliarlo antes con ampliar una imagen con IA da al icono de 512 px bordes más limpios que un simple estirado. Un logotipo con un texto ancho es mejor reducirlo a su símbolo con recortar imagen antes de generar, en lugar de dejar que se encoja hasta una línea fina en mitad del cuadrado.