Favicons

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).

Step 0: Add a max-size favicon.ico

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

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

Use a 256²+ PNG with alpha.

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 256²+ PNG with no alpha (i.e. flattened icon with background color/image).