35.16 Favicon Creation
20190629 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 most browsers also support png and gif files.
One way to create a favicon is to create an svg image file using, for example, inkscape:
$ inkscape favicon.svg # Create or edit the file. $ file favicon.svg favicon.svg: SVG Scalable Vector Graphics image
Other transformations can convert it to the
$ 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
I chose to also 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
From this png we can create a high quality set of icons within the single ico format, embedding a transparent png:
$ 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
Place the image file at the root of the website and our web browsers will automatically pick it up from there.
Your donation will support ongoing development 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-2021 Graham.Williams@togaware.com Creative Commons Attribution-ShareAlike 4.0.