How to make a favicon
- Drop a square image of at least 512 pixels into the box.
- Pick a background color or keep transparency.
- Press Generate icons.
- Download all icons as one ZIP file.
- Copy the HTML snippet into the head of every page.
What this favicon generator gives you
- Small icons from 16 to 96 pixels for tabs and shortcuts.
- A 180 pixel Apple touch icon for the iPhone home screen.
- 192 and 512 pixel icons for Android and web apps.
- A 144 pixel icon for Windows tiles.
- Center cropping so a rectangle image still works.
- A ready HTML snippet with the right rel and sizes attributes.
Why one favicon is no longer enough
A favicon used to be a single 16 pixel image. Today the same icon shows up in many places. It appears in a browser tab and the bookmarks bar. It appears on a phone home screen and a Windows tile. It even shows in search results. Each spot uses a different size.
Supply only a 16 pixel icon and every larger spot stretches it. It looks blurry next to sites that did it right. Supply only a 512 pixel icon and the browser shrinks it to 16. Fine detail turns to mush.
Every size this favicon generator creates
| Size | Where it shows |
|---|---|
| 16 and 32 px | Browser tabs and bookmarks |
| 48 px | Search results and some desktop shortcuts |
| 96 px | Desktop shortcuts and some TV browsers |
| 144 px | Windows tiles |
| 180 px | iPhone and iPad home screen |
| 192 and 512 px | Android home screen and web app splash |
Design for the smallest size first
A 16 pixel icon holds just 256 pixels. A full logo with a name becomes unreadable. A detailed drawing becomes a smudge.
What works is one strong shape. Try a single letter, a simple mark or a clear outline. Use high contrast against both light and dark tab colors. Here is an easy test. Shrink your design to 16 pixels and view it at real size. Can you tell what it is? If not, nobody else can either.
Transparency and where it fails
Browser tabs handle transparency well in light and dark themes. The iPhone home screen ignores it and fills the gap with black. A dark logo can vanish there. Android handles transparency. Its adaptive icons may crop the edges though.
The safe choice is a solid background for the Apple touch icon. Use transparency elsewhere. This tool applies your choice to the whole set. Does the iPhone matter to your visitors? Pick a background that suits your mark.
PNG instead of ICO
The old favicon format was ICO. It is a Windows file that holds several sizes in one. Every browser from the past decade accepts PNG favicons. PNG files are simpler to make and easier to check. You need ICO only for very old Microsoft browsers.
How to put your icons in place
Upload the icons to the root folder of your site and not a subfolder. Browsers ask for /favicon.ico on their own when a page declares nothing else. Several tools also assume root paths. Then paste the snippet into the head of every page.
Expect a delay before you see the new icon. Browsers cache favicons very hard. A normal refresh often does not help. Check in a private window or another browser.
Common favicon generator problems
My old favicon still shows
Your browser cached it. Open a private window to check the new one.
My icon looks blurry
Your source image was too small. Use a square image of at least 512 pixels.
Why a favicon helps your site
A clear favicon helps people find your tab among many open tabs. It makes bookmarks easy to spot. Google also shows site icons next to mobile search results. A sharp icon there looks more trustworthy than a blank globe. Small details like this build brand recognition over time. Return visitors spot your tab and click back faster.
Who uses a favicon generator?
Bloggers brand new sites. Web developers finish client projects. Small business owners polish their storefronts. App makers prepare web app icons.
Your images stay private
The tool resizes everything in your browser. Your logo never leaves your device. Need to crop your logo square first? Use the image cropper. Want smaller files? Try the PNG compressor. Want to resize other images? The image resizer helps.