Favicon Sizes Explained: Build a Complete Icon Set for Your Site
That tiny icon in a browser tab is easy to ignore until your site shows a blank globe. A good favicon helps visitors spot your tab and recognise your bookmark. This guide covers the sizes you need, how to design for tiny dimensions, and how to generate the full set from one image.
Why a favicon matters
A favicon appears in browser tabs, bookmarks, history and, in larger versions, on phone home screens. With many tabs open, a distinctive icon is often how people find you again.
The favicon generator on PDFImgTools takes one uploaded image and produces the whole set in your browser, without uploading the file.
A consistent icon also builds trust, since visitors associate the symbol with your brand over time.
The sizes you get
Different places request different dimensions. The tool outputs PNG files at 16, 32, 48, 64, 180, 192 and 512 pixels, plus an ICO-ready set, all zipped together with a ready-to-paste HTML snippet.
You rarely need to think about each size individually. Upload once, take the zip, and keep it together in a folder named after your site for future redesigns.
- 16 and 32 pixels: browser tabs and bookmarks
- 48 and 64 pixels: desktop shortcuts and some browser UIs
- 180 pixels: the usual size for iPhone and iPad home screen icons
- 192 and 512 pixels: Android and web app icons
How to generate your set
Keep your source artwork. If you later change brand colours, you can regenerate the entire set in a minute instead of redrawing icons.
- Open the favicon generator and upload a clear, square-ish image.
- Check the preview at small sizes.
- Download the zip containing the PNG sizes and the ICO-ready set.
- Upload the files to your site, usually the root folder.
- Copy the HTML snippet into the head section of your pages.
Designing for tiny sizes
At 16 pixels, detail disappears. Start with a simple shape, a single letter or a bold symbol with strong contrast against its background. A full logo with a tagline will turn into noise.
Use a square source image, ideally larger than 512 pixels, so the big sizes stay sharp. Leave a little padding around the shape, because rounded corners on phones can clip edges.
Test with your real brand colours. A pale icon on a white tab can vanish, while a dark one may disappear on a dark theme.
- One shape or letter, not a whole logo
- High contrast between icon and background
- Square source, at least 512 pixels wide
- Test on both light and dark tab bars
Adding the HTML snippet
The generator includes link tags that point to each file. Paste them inside the head section of your pages, and make sure the paths match where you uploaded the files. After publishing, you may need a hard refresh, since browsers cache favicons stubbornly.
If you use a content management system, look for a site icon setting first, since it may already handle the link tags for you.
Common mistakes
Finally, avoid text in the icon unless it is a single letter. Words almost never survive at tab size.
- Uploading a wide, detailed logo that becomes unreadable at 16 pixels
- Forgetting to update the file paths in the HTML
- Testing only once, then seeing the old cached icon and assuming it failed
- Using a transparent icon with dark lines that vanishes on dark tabs
A practical scenario
A small bakery launches a website with only a long logo that includes the shop name. At 16 pixels it is unreadable. The owner instead crops a square around the wheat symbol, uploads it, checks the preview, and downloads the zip. She uploads the files to the site root, pastes the snippet into the head, and refreshes. The tab now shows a clear symbol, and the home screen icon on phones looks sharp too.
Frequently asked questions
What source image should I use?
A simple, square image that is large, such as 512 pixels or more, works best.
Why does my old favicon still show?
Browsers cache favicons. Clear the cache or do a hard refresh after you publish.
Is my image uploaded to a server?
No. The set is generated locally in your browser.
