Make every icon size a website needs from a single image. The tool produces PNGs for browser tabs, Windows, iPhone, Android and web apps, and builds a favicon.ico file. You can fill the square or fit the whole image, round the corners and set a background, and it gives you the HTML to paste into your page.
How to use it
- Choose a logo or image, ideally square.
- Pick the fit, corner rounding and background.
- Download the sizes you need, or the .ico file.
- Copy the link tags into your page head.
When it helps
- Adding an icon to a new website.
- Making app icons for a web app.
- Updating a brand icon everywhere at once.
- Producing an apple-touch icon.
Good to know
- Start with a simple design, because tiny icons lose detail.
- Use a transparent background for tab icons and a solid one for home screen icons.
- A source image of at least 512 pixels gives the best quality.
Which sizes you need and why
Browsers show a 16 by 16 or 32 by 32 icon in tabs and bookmarks, with the larger one used on high-resolution screens. Windows shortcuts use 48 by 48. iPhones and iPads use a 180 by 180 apple-touch icon when someone adds your site to their home screen, and Android and installable web apps use 192 and 512 pixel icons.
The .ico file packs several sizes into one file so older browsers and tools that request favicon.ico by default find something good. Modern sites can list PNG icons directly in the page, which is why the tool gives you both.
Worked example: a simple letter icon
Imagine your logo is a bold letter on a coloured square. Upload it, choose Fit inside if you want the whole thing visible, and leave rounding at zero for a sharp square or raise it to about 20 percent for friendly corners. Download the .ico plus the 180 and 512 sizes, then paste the HTML snippet into the head of every page.
Check the result at actual size in a browser tab. If fine details disappear at 16 pixels, simplify the design: fewer elements, thicker strokes, higher contrast.
Common mistakes
The most common mistake is using a detailed logo with small text. At 16 pixels, text turns to mush. Use a single letter or symbol instead. Another is a transparent icon on a dark browser theme, where a dark logo vanishes. Give the icon a background or use a colour that works on both.
Also remember browsers cache favicons aggressively. After changing yours, you may need to clear the cache or open the page in a private window to see the new one.
Questions
What's inside the .ico file?
The 16, 32 and 48 pixel versions.
Does it upload my logo?
No, it stays in your browser.