Drop your logo into the box above and you get every icon a website needs in one ZIP: favicon.ico for browser tabs, the Apple touch icon for iPhone and iPad home screens, and the Android icons with their manifest. The previews show the icon on a light and a dark browser tab and on a home screen, so you can see whether it holds up before you publish it. The HTML to paste into your pages comes with it. There's no signup or watermark.
What's in the favicon set
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | Browser tabs, bookmarks and history |
| apple-touch-icon.png | 180 px, solid background | Home screens on iPhone and iPad |
| icon-192.png and icon-512.png | 192 and 512 px | Android home screens and installed web apps |
| site.webmanifest | Text | Tells Android browsers where the two icons are |
Apple's developer guide names the file apple-touch-icon.png and lists 180 × 180 pixels for iPhone; Google's web.dev asks for at least a 192 and a 512 pixel icon in the manifest for Chrome. Each icon is shrunk from your picture separately, so the small ones keep clean edges.
Make it readable at 16 pixels
A browser tab shows a favicon about 16 pixels wide. What works at that size:
- A symbol, not a word mark. Use the icon part of your logo, or the first letter, rather than the full name.
- Fill the square. A wide logo fitted into a square becomes a thin strip; Fill the square uses its middle instead.
- Strong contrast. Check the dark tab preview: a black logo on a transparent background disappears there. A Background color keeps it visible everywhere.
- Little or no space around it. Space around the picture suits the home screen icons more than the tab, where every pixel counts.
If your logo still has a white box around it, remove the logo's background first, then bring the transparent PNG here.
Adding the favicon to your website
- Unzip the favicon set into your website's root folder, where your home page lives.
- Paste the HTML shown next to the previews into the head section of every page, usually a shared header template.
- Open your site in a private window to see the new icon; browsers keep the old favicon cached for a while.
Browsers may also look for /favicon.ico in the root folder on their own when a page names no icon, which is why that file keeps its traditional name. Most site builders have a favicon or site icon setting in their dashboards instead; upload favicon.ico or icon-512.png there.
Just the ICO file
For a single favicon.ico, select favicon.ico only. To choose other icon sizes, from 16 up to 256 pixels in one file for Windows shortcuts too, use the PNG to ICO converter.
Frequently asked questions
Which files do I get?
favicon.ico with 16, 32 and 48 pixel icons for browser tabs and bookmarks, apple-touch-icon.png at 180 pixels for Apple home screens, icon-192.png and icon-512.png for Android, and site.webmanifest, which lists the Android icons.
Where do the files go?
In your website's root folder, next to the home page, so their addresses are /favicon.ico, /apple-touch-icon.png and so on. Then paste the HTML into the head of your pages. Most site builders and blog platforms have their own favicon or site icon setting; upload favicon.ico or the 512 pixel PNG there instead.
Do I need the HTML if favicon.ico is in the root folder?
Browsers may look for /favicon.ico on their own when a page names no icon, but the HTML makes it certain and also points to the Apple and Android icons.
Why is the Apple icon on a white background?
Home screen icons are solid tiles, so the Apple icon always gets a background: white, or the color you choose. The other icons stay transparent unless you pick a color.
My logo looks tiny or blurry in the tab. What can I do?
A tab shows the icon about 16 pixels wide, so wide logos and fine text shrink to a smudge. Use just the symbol or first letter of your logo, choose Fill the square, and keep the space around the picture at zero.
Can I use an SVG logo?
Yes. An SVG is drawn at each size directly, so every icon in the set is sharp.
Are my images uploaded?
No. The icons are made inside your browser, so your logo never leaves your device, and there's no signup or watermark.