Cómo hacer un favicon.ico: los tamaños y formatos que de verdad necesitas

Un archivo favicon.ico puede contener varias imágenes de distintos tamaños, y el navegador elige la adecuada: 16×16 para las pestañas, 32×32 para pantallas de alta densidad y la barra de tareas, y 48×48 para los accesos directos de Windows. Con los tres en un solo ICO cubres casi todos los casos.

Los móviles usan archivos aparte. iOS busca un PNG de 180×180 (apple-touch-icon), y Android y las apps web instalables usan PNG de 192×192 y 512×512 declarados en un manifiesto web.

ICO es la opción más compatible y la que los navegadores piden automáticamente en /favicon.ico. Los favicons PNG funcionan en todos los navegadores modernos si los enlazas. Los SVG se ven perfectos a cualquier tamaño y los admiten Chrome, Edge y Firefox actuales, pero no todos los navegadores, así que conviene mantener un ICO como respaldo.

Parte de una imagen cuadrada y simplifica: una letra o una forma marcada sobreviven al reducirse; un logo detallado con texto fino se convierte en una mancha. Usa mucho contraste y comprueba cómo se ve en pestañas claras y oscuras.

Si tu logo es un SVG, conviértelo desde el SVG y no desde un PNG. El vector se vuelve a dibujar en cada tamaño, así que incluso la versión de 16 píxeles queda nítida.

Convierte tu PNG, JPG o SVG con la herramienta PNG a ICO o SVG a ICO de Localvert. Obtendrás un único favicon.ico con versiones de 16, 32 y 48 píxeles. Las imágenes no cuadradas se completan con márgenes en lugar de recortarse, y se conserva la transparencia.

Coloca favicon.ico en la raíz de tu web y añade esta línea dentro de <head>: <link rel="icon" href="/favicon.ico" sizes="any">. Los navegadores guardan el favicon en caché mucho tiempo; si no ves el cambio, prueba en una ventana privada.