Crear un favicon.ico multitamaño

1. Instala ImageMagick

Se instala una sola vez y queda para siempre. Es gratis y de código abierto:

# macOS (Homebrew)
brew install imagemagick

# Ubuntu / Debian
sudo apt install imagemagick

# Windows (winget)
winget install ImageMagick.ImageMagick

Si nunca has usado la terminal, empieza por la guía de la terminal.

2. Genera el favicon multitamaño

Parte de un PNG cuadrado de tu logo (idealmente 256×256 o más). El comando empaqueta las tres resoluciones que esperan los navegadores en un solo archivo .ico:

magick logo.png -define icon:auto-resize=64,32,16 favicon.ico

El icon:auto-resize=64,32,16 genera dentro del mismo archivo las versiones de 64, 32 y 16 píxeles. El navegador toma la que necesita según el contexto.

Partir de un logo no cuadrado

Si tu logo no es cuadrado, cuádralo primero con fondo transparente para que el ícono no salga deformado:

magick logo.png -background none -gravity center -resize 256x256 -extent 256x256 cuadrado.png
magick cuadrado.png -define icon:auto-resize=64,32,16 favicon.ico

Coloca el favicon.ico resultante en la raíz de tu sitio.

Tareas relacionadas

Preguntas frecuentes

¿Por qué meter varios tamaños en un mismo archivo?

Porque cada contexto pide una resolución distinta: la pestaña usa 16 o 32 píxeles, un acceso directo del escritorio puede usar 64. Un .ico multitamaño deja que el sistema elija la versión nítida correcta en lugar de escalar una sola y verla borrosa.

¿Conviene un PNG de origen muy grande?

Parte de un PNG cuadrado de al menos 256×256; ImageMagick reduce desde ahí hacia los tamaños pequeños, lo cual da mejor resultado que ampliar uno chico. Un logo simple y con buen contraste se lee mejor a 16 píxeles que uno con muchos detalles finos.