Many people struggle with finding the right way to generate a favicon for their application. Between the different online pseudo generators and the image editors, the choice is wide. With the imager200 API, the creation of a multisize favicon can be done with a simple API call:
curl -v -H "X-Imager-Key: $API_KEY" -o fav.ico --data-binary @img.png "https://api.imager200.io/convert/sync?targetFormat=ico"
Let’s analyze our generated favico fav.ico using ImageMagick:
magick identify new.ico
new.ico[0] ICO 64x64 64x64+0+0 8-bit sRGB 0.000u 0:00.000
new.ico[1] ICO 48x48 48x48+0+0 8-bit sRGB 0.000u 0:00.001
new.ico[2] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.001
new.ico[3] ICO 16x16 16x16+0+0 8-bit sRGB 32038B 0.000u 0:00.001
The generated image does not contain only one image, but rather 4 with different sizes (64x64, 48x48, 32x32, 16x16), why ? Because we want to allow the browser to choose the size that fits best depending on the situation. For example, a favicon may need to have a different size when bookmarking a site in your browser than when used in a browser bar… It is in general considered a good practice. In your HTML page, the link tag has an attribute that allows specifying the different sizes that the browser can choose from:
<link rel="icon" href="fav.ico" sizes="64x64,48x48,32x32,16x16">The generated ico format is Microsoft ico format which is supported by all the browsers.
References:
[^1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes
