Convertir PNG a ICO

Todo navegador pide `/favicon.ico` en la raíz del dominio aunque no se lo digas. Si no está, queda un 404 en el registro del servidor por cada visita, y algunos navegadores y lectores antiguos no buscan en ningún otro sitio.

La forma moderna es declarar PNG y un SVG en la cabecera del HTML, y eso es correcto y no sustituye al archivo. Lo sensato es tener las dos cosas: el `.ico` en la raíz para la petición automática, y los PNG y el SVG declarados para los navegadores que los usarán.

Esto es lo que casi nadie explica. Un `.ico` es un pequeño contenedor con el mismo icono a distintos tamaños, normalmente 16, 32 y 48 píxeles, cada uno guardado como una imagen completa.

El motivo es que reducir un icono de 48 píxeles a 16 produce una mancha: a ese tamaño cada píxel está haciendo trabajo estructural. El formato permite dibujar cada tamaño a propósito, simplificando el trazo según se hace pequeño, y que el navegador elija el que necesita.

A 16 por 16 hay 256 píxeles en total. Un nombre completo es ilegible, un trazo fino desaparece y una ilustración con detalle se convierte en un borrón gris. Reducir el logotipo automáticamente produce exactamente eso, y es la razón por la que tantos favicons se ven como una mancha en la pestaña.

Lo que funciona es una forma fuerte y sola: una letra, un símbolo simple, una silueta maciza con buen contraste contra fondos claros y oscuros. Conviene mirarla a tamaño real en una pestaña de verdad, no ampliada en el editor, que es donde siempre parece que está bien.

Una fuente no cuadrada se rellena o se recorta, y ninguna de las dos cosas suele ser lo que querías. Cuadrar el dibujo antes cuesta un minuto y quita el motivo de decepción más frecuente con el resultado.

Deja también algo de margen alrededor. Un icono recortado justo al borde del trazo se ve más grande que sus vecinos en la barra de pestañas y queda desalineado, aunque técnicamente sea correcto.

El ICO moderno tiene canal alfa completo, así que la transparencia del PNG pasa tal cual, con bordes suaves incluidos. Es lo que produce cualquier herramienta actual y lo que quieres.

Importa porque la pestaña tiene un fondo que cambia entre navegadores, temas y modo claro u oscuro. Un icono con fondo blanco incrustado se delata al instante en una barra de pestañas oscura, y ése es un detalle que se descubre después de publicar.

Para un favicon, 16 y 32 cubren casi todo: 16 para la pestaña y 32 para la barra de marcadores y para pantallas de alta densidad. Añadir 48 cuesta poco y cubre los accesos directos de Windows.

Más allá de eso el rendimiento cae rápido. Una entrada de 256 píxeles multiplica por cuatro el peso del archivo ella sola, lo cual es un mal negocio para algo que se pide en cada carga de página. Inclúyela en el icono de una aplicación de escritorio; déjala fuera en una web.

Los favicons se cachean con una insistencia poco común, a menudo más que la propia página y a veces en un almacén aparte que una recarga normal no toca. Un favicon nuevo aparece para todo el mundo menos para quien lo hizo.

La comprobación fiable es abrir la URL del icono directamente: si `tudominio.com/favicon.ico` sirve la imagen nueva, el despliegue funcionó y la pestaña está mostrando una copia guardada. Una recarga forzada, una ventana privada o simplemente un día lo resuelven. Conviene descartarlo antes de tocar nada, porque la reacción habitual es reexportar el icono cinco veces y concluir que el formato está roto.

La conversión ocurre dentro de la pestaña del navegador: nada se sube y no hay registro ni marca de agua. Para un favicon eso importa menos que para un contrato, y sigue siendo la diferencia entre una herramienta que hace una cosa y una que además recoge lo que le des.

También significa que no hay cola: si el primer intento sale mal a 16 píxeles, rehacerlo cuesta segundos y puedes probar tres versiones antes de decidir.