El favicon dejó de ser un solo cuadrado de 16 píxeles hace años. Hoy un sitio necesita un puñado de tamaños para pestañas, accesos directos de Windows, pantallas de inicio de iPhone y avisos de instalación de Android, además del marcado que apunta a ellos. Esta página lo hace todo desde una imagen, en tu navegador.

Cómo se usa

1. 1 Suelta una imagen cuadrada, idealmente de 512 px o más.
2. 2 Revisa cada tamaño en la vista previa y elige un fondo si tu imagen es transparente.
3. 3 Descarga el zip, descomprímelo en la raíz del sitio y pega el HTML.

Diseña para 16 píxeles, no para el logo

Al tamaño de una pestaña, un favicon mide más o menos lo que un punto de esta página. Los logotipos con texto se vuelven manchas grises y las líneas finas desaparecen del todo. Una sola letra, una forma simple o el fragmento más reconocible del logo sobrevive a esa escala; el logo entero casi nunca.

Con PNG basta; el ICO es un resto del pasado

Todos los navegadores en uso hoy leen favicons PNG, así que un puñado de archivos PNG y las etiquetas link correctas cubren la web. El contenedor .ico existe porque Internet Explorer lo buscaba en la raíz del sitio; salvo que tengas que dar soporte a algo antiquísimo, puedes saltártelo.

La transparencia se comporta distinto en un móvil

En una pestaña, un icono transparente se apoya bien sobre lo que dé el tema. En la pantalla de inicio de un iPhone, ese mismo archivo recibe detrás un cuadrado negro sólido, porque iOS no compone ahí la transparencia. Elige un color de fondo y el icono se ve intencionado en ambos sitios.

Por qué el navegador sigue mostrando el antiguo

Los favicons se cachean con dureza y durante mucho tiempo, a veces más allá de un refresco normal. Abre el archivo del icono directamente para confirmar que el nuevo está ahí y luego revisa en una ventana privada. Cambiar el nombre del archivo, o añadirle una versión, es la forma fiable de forzar la actualización.