/favicon-auto-change

Primary LanguageHTML

favicon-auto-change

Prerequisites

  • install inkscape
  • brew install imagemagick
  • alias inkscape="/Applications/Inkscape.app/Contents/MacOS/inkscape"

Steps

  • Create icon.svg

  • Add dark style to svg if not already there, e.g.

    path {
 fill: #0000ff;
}
@media (prefers-color-scheme: dark) {
 path {
  fill: #33ff33;
 }
}

  • Generate other files

    inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"
inkscape ./icon.svg --export-width=180 --export-filename="./apple.png"
inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./favicon.ico
rm ./tmp.png

    If separate favicon needed for 16x16 use below

    inkscape ./icon.svg --export-width=32 --export-filename="./icon32.png"
inkscape ./icon2.svg --export-width=16 --export-filename="./icon16.png"
convert ./icon32.png ./icon16.png ./favicon.ico
rm ./icon16.png
rm ./icon32.png

Links

Example on GitHub pages

Source 1 - all your favicon needs

Source 2 - change file