From MagnetoWiki
Jump to navigation Jump to search

Icons for Websites (without touching HTML)

There's a lot of advice out there about favicons, and although it is all technically correct (at least at publication time), none of it seems very practical. Typically you are advised to create dozens of different size icons, add dozens of lines to the sites HTML, as well as a handful of XML/JSON files -- all that for just a simple icon!

If one's goal is just to setup a favicon for a website (not a page, nor WebApp/WPA, etc), then the process is much simpler given the following axioms (one old, and one new):

  • Modifying HTML for favicons has always been optional.
  • Multiple favicon sizes are no longer necessary, due to quality scaling.

Given those axioms, all you need is a max-size favicon.ico (for Chrome, Firefox, Edge) and some large Apple touch icons (for Safari).

ImageMagick is used in the examples below (brew install imagemagick)

Step 0: Add a max-size favicon.ico

Create the largest possible (2562) favicon.ico using a PNG with alpha.

magick convert myicon-1024.png -resize 256x256 favicon.ico

Step 1: Add large apple-touch-icon-precomposed.png

Use a 2562+ PNG with alpha.

cp myicon-1024.png apple-touch-icon-precomposed.png

Step 2: Done!

You're finished as far as common web browsers are concerned. You should see your icon on the browser's tabs and bookmarks, recent-sites, etc. Bookmarking to home-screens and start-menus will also work.

Further Refinements

Step 3: Add large apple-touch-icon.png

Use a 2562+ PNG with no alpha (i.e. flattened icon with background color/image).