Generate Favicons

Create your own favicons using simple scripts and FOSS tools

Tags: Web Development, Web Design
Last updated: 3/4/2024

Full credits go to: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

As of time of writing, we’ll be generating these files:

favicon.ico (32x32)
favicon.svg
apple-touch-icon.png (180x180)
icon-192.png (192x192)
icon-512.png (512x512)

TLDR & Scripts

Generate .ico

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png

Optional: You can scale it down to 16x16 using

convert ./icon-32.png ./icon-16.png ./favicon.ico

Generate .png

inkscape --export-type="png" --export-width=512 --export-filename="./icon-512.png" ./icon.svg
inkscape --export-type="png" --export-width=192 --export-filename="./icon-192.png" ./icon.svg

Optimize .svg

npx svgo --multipass icon.svg

Further steps

Optimize the png files using squoosh.app
Add them to your HTML.