36.6 Favicon Creation

20240323

A favicon (favourite icon) is the small (16x16 pixel) icon associated with a website that appears in a web browser’s tab. They are usually ico files though png and gif files are also supported by many browsers.

To create a favicon from a png:

convert favicon.png -define icon:auto-resize="256,128,96,64,48,32,16" favicon.ico

To create a favicon from a svg:

convert favicon.svg -density 300 -define icon:auto-resize="256,128,96,64,48,32,16" -background none favicon.ico

In more detail, we can create a favicon from an svg image file using, for example, inkscape:

inkscape favicon.svg

Create or edit the file and then check on the file details:

file favicon.svg 
favicon.svg: SVG Scalable Vector Graphics image

Other transformations can convert the svg file to the favicon.png of choice:

convert favicon.svg -resize 256x256 -fuzz 40% -transparent white favicon.png
file favicon.png
favicon.png: PNG image data, 256 x 256, 16-bit/color RGBA, non-interlaced

We can change the colours to suit a light and dark background better by negating the current colours and replacing white with the new dominant colour. The result can be seen in the tab bar above or by visiting https://mlhub.ai.

mogrify -fuzz 40% -negate -fill '#ff9966' -opaque white favicon.png

To create a high quality set of icons within a single ico file, embedding a transparent png we can do:

convert favicon.png -define icon:auto-resize="256,128,96,64,48,32,16" favicon.ico
file favicon.ico 
favicon.ico: MS Windows icon resource - 7 icons, 256x256 withPNG image
data, 256 x 256, 16-bit/color RGBA, non-interlaced, 32 bits/pixel,
128x128, 32 bits/pixel

We can then place the image file at the root of the website to be found by any web browser.



Your donation will support ongoing availability and give you access to the PDF version of this book. Desktop Survival Guides include Data Science, GNU/Linux, and MLHub. Books available on Amazon include Data Mining with Rattle and Essentials of Data Science. Popular open source software includes rattle, wajig, and mlhub. Hosted by Togaware, a pioneer of free and open source software since 1984. Copyright © 1995-2022 Graham.Williams@togaware.com Creative Commons Attribution-ShareAlike 4.0