Favicon & App Icons
One square image becomes every icon a website needs, plus the markup.
One square image becomes every icon a website needs, plus the markup. Free, with no sign-up, no watermark and no upload: it all runs in your browser.
What Favicon & App Icons is for
For shipping a website: one square image becomes the favicon, the Apple touch icon, the Android manifest icons and a social share card, with the HTML to paste into the head.
Worth knowing
Twelve files at nine sizes, a multi-size favicon.ico, an Open Graph card, a web manifest and the head snippet to paste in.
How to use it
- Add your files. Drop them on the page or choose them. They stay on your device.
- Set the output format and quality. The defaults suit most files.
- Press convert and save the results, individually or as one ZIP.
Questions
What size should the source image be?
At least 512 by 512, square, with the artwork not too close to the edges. Everything is scaled down from it, so anything smaller will look soft at the larger sizes.
Why do I need so many icon sizes?
Because each place uses its own: 16 pixels in a browser tab, 180 for an iPhone home screen, 512 for an Android splash screen. Supplying each one avoids the system scaling a wrong-sized icon badly.
Do I still need favicon.ico?
It is worth having. Some older browsers and crawlers request /favicon.ico directly and ignore the link tags, so the multi-size ICO covers them.
What is the Open Graph card for?
It is the picture shown when your link is shared on social media or in a chat. Without one the link appears as a bare blue rectangle.