A favicon set for a website.
The icons a website needs (favicon.ico, PNGs, the Apple touch icon and a manifest) made from one picture in your browser, in a ZIP.
By Suraj Kumar2 min read
Browsers, phones and home screens each look for their own icon.
The files.
favicon.ico with 16, 32 and 48 px inside, PNGs at 16 and 32 px, the Apple touch icon at 180 px, Android's 192 and 512 px icons, and site.webmanifest naming them.
Apple's icon.
iOS shows clear parts of a touch icon as black, so it is drawn on the background colour, white unless you choose another.
The lines for your page.
favicon-head.html holds the lines to put in your page's head; put the files at your site's root.
Further reading
Topics: favicon generator · favicon sizes · apple touch icon · favicon package · web manifest icon
A little less theory. A little more doing.
Try it on your own terms, with a free browser tool.
Try the tool