Project Page: github/logo-creation

Install Sketch App and ImageMagick

brew cask install sketch
brew install imagemagick

Design a logo in Sketch using vector components. Export the result to an SVG

Convert the SVG to favicon formats

With the ImageMagick convert command

convert -density 300 -background transparent myicon.svg -define icon:auto-resize=64,48,32,16 favicon.ico
convert -density 300 -background transparent myicon.svg -resize 64x64 favicon.png

Use the icon

Copy favicon.ico and favicon.png to your site root

Add the following to your page <head> section

<link rel="icon" type="image/png" href="/favicon.png"/>

This should work on almost all browsers. Wiki

  • Those with PNG favicon support will use favicon.png
  • Others will fallback on trying the default /favicon.ico