Favicon checker
Check the favicon, apple-touch-icon and web manifest of any page.
Questions
Which icon files does a site need?
A /favicon.ico for older browsers and tools, an SVG or 32x32 PNG linked with rel="icon", a 180x180 apple-touch-icon for iOS, and a web manifest with 192x192 and 512x512 PNG icons for Android and installed apps.
Why does my old favicon still show?
Browsers cache favicons apart from the page and keep them for a long time. Change the file name, or add a query string to the href, so browsers fetch the new file.
What is a maskable icon?
An icon with room around the logo, marked "purpose": "maskable" in the web manifest. Android crops it to the shape the device uses, like a circle or a rounded square. Keep the logo inside the center 80% of the image.
Where does iOS get the home screen icon?
From the apple-touch-icon link. When the page links none, Safari asks for /apple-touch-icon.png at the root of the site. Use a 180x180 PNG.
Are the links I check saved?
No. The page, its icons and its manifest are fetched when you press Check, and nothing is stored.
How it works
The page at the link is fetched from our server. The checks read its icon and manifest links, then load each icon, /favicon.ico and the manifest to see that they work. Sizes come from the image files, not from the sizes attribute.
The tab and home screen are close to what browsers show, but each browser picks between icons in its own way.
Company of Craft also builds stateofpixel, which catches UI regressions before they merge.