Suppose you have an icon or logo at multiple resolutions and would like to combine them into a single favicon.ico file for your website. These are the commands you need to get up and running from the comfort of your own terminal.
Step 1: install ImageMagick
Check out the ImageMagick downloads page for instructions on how to get it running on your machine. Personally, I like to use containerization to keep my Mac free from extraneous software that I rarely use, so I’ll install ImageMagick in a Docker container instead (make sure you have Docker installed):
docker run -it --rm -v /absolute/path/to/icons/directory:/workdir -w /workdir ubuntu
This command will drop you into a bash session on the container. From there, it’s easy to get ImageMagick installed:
apt update
apt upgrade
apt install -y imagemagick
Tip!
ImageMagick has a dependency on tzdata, so you will be prompted to configure your time zone upon installation. Since this is an ephemeral installation, you can just type 1 for each prompt to get through the installation process quickly.
Step 2: create the file
ImageMagick gives us a handy convert command that makes the process super easy:
convert input-file-16x16.png input-file-24x24.png input-file-32x32.png input-file-64x64.png favicon.ico
This will create the desired favicon.ico file.
Step 3: verify the .ico file
ImageMagick also provides a nice utility called identify for inspecting our file to ensure it is formatted as we expect.
identify favicon.ico
The output should look something like this:
favicon.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[1] ICO 24x24 24x24+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[2] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[3] ICO 64x64 64x64+0+0 8-bit sRGB 24838B 0.000u 0:00.000
Top comments (0)