Make a favicon for everything from single SVG

readme.md

1. Install dependencies brew install imagemagick inkscape
2. Run script bellow in same folder as your input.svg (it should be named input.svg!!!)
3. Grab all the files except input.svg — thery are ready to use. Dont forget to drop mainfest.webmanifest near them, and then include everything in your HTML head.

Credits: script was compiled from Evil Martians article

favicon.sh

# generate icon.svg
cp input.svg icon.svg

# generate icon-512.png
inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"

# generate icon-192.png
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"

# genrate favicon.ico
inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./favicon.ico
rm -rf ./tmp.png

# generate apple-touch-icon.png
inkscape ./icon.svg --export-width=180 --export-filename="./apple-touch-icon.png"

head.html

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}