Favicon set
One picture into every icon size a browser asks for, plus favicon.ico and the markup to reference them.
Result
Good to know
- Every icon is square, so a wide picture is squashed rather than cropped. Crop it to a square first if that matters — and start from something at least 512 px across, because enlarging a 32 px icon just makes a blurry 512 px one.
- favicon.ico holds the 16, 32 and 48 pixel versions in one file, which is what a browser fetches from the root of a site whether the page asks for it or not. Its size field is a single byte, so nothing larger than 255 pixels can go in it.
- The iOS icon is the one to think about twice: it is drawn on a home screen with no page behind it, so a transparent one turns black there. Filling it with a colour is usually the right answer for that size.
- The markup names the files as they are downloaded, so it works once they sit at the root of the site. The 192 and 512 pixel icons belong in a web app manifest rather than in a link tag — the line for it is there as a reminder. Everything happens in your browser.
30 views