How to use the favicon generator
- 1 Choose your source: drop a logo or image, or switch to From text or emoji and type one to three characters.
- 2 Pick the shape, background colour and, for text, the text colour. Check the preview at real browser sizes.
- 3 Press Download favicon package to get the ZIP file.
- 4 Upload the files to the root folder of your website and paste the HTML code into the head section of your pages.
Designing an icon that works at 16 pixels
Start from a square image at least five hundred and twelve pixels wide with a simple shape. If your logo is a PNG with soft or uneven edges, tidy it into a vector with PNG to SVG, or round it off with Round Image Corners before generating the icons.
- Test the favicon on light and dark browser themes.
- Use one bold letter rather than a full word.
- Keep the same colours as your logo so the tab is instantly recognisable.
Features
Complete icon set
favicon.ico, PNG sizes, Apple touch icon, Android icons and a web manifest.
Image or text
Use your logo, or create a clean letter or emoji icon in seconds.
Ready-made HTML
Copy the link tags straight into your website template.
When to use it
New websites
Give a new site a proper tab icon from day one instead of the default blank page symbol.
Personal projects
Make an initial or emoji icon for a portfolio, blog or side project without a designer.
Web apps
Get Android and Apple home screen icons so the site looks like an app when saved. To round a logo first, use Round Image Corners.
Updating a brand
Replace an old favicon quickly after a logo change.
Related Image tasks
Frequently asked questions
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, history and search results next to your site name. A clear favicon helps people find your tab and recognise your site.
Which favicon sizes do I need?
Browsers use sixteen and thirty-two pixel icons, Apple devices use one hundred and eighty, and Android uses one hundred and ninety-two and five hundred and twelve. This generator creates all of them.
Where do I put the favicon files?
Upload them to the root folder of your website, the same place as your home page, and add the HTML lines to the head of every page or your main template.
Why is my old favicon still showing?
Browsers cache favicons for a long time. Clear your browser cache or open the site in a private window to see the new icon.
What makes a good favicon?
Keep it very simple: one letter, a symbol or the main part of your logo, with strong contrast. Fine detail and long words become unreadable at sixteen pixels.
Can I use an emoji as a favicon?
Yes. Choose From text or emoji and type the emoji. It is drawn into the PNG and ICO files, so it looks the same everywhere, regardless of the visitor's device.
Do I still need a favicon.ico file?
Modern browsers can use PNG icons, but some tools and older browsers still request favicon.ico from the site root, so it is sensible to include it.
Is my logo uploaded to make the icons?
No. The icons, the ZIP file and the code are all created in your browser, so your logo never leaves your device.
How this tool works. These image tools run entirely in your browser using the Canvas API built into every modern browser, the open-source libheif decoder for iPhone HEIC photos and Tesseract, a widely used open-source OCR engine, for reading text. Each tool is tested with real phone photos, screenshots and scans before it goes live, and nothing you open is sent to a server.
Built and reviewed by Hamza Farooq, founder and lead developer
· Last updated
· How we check our tools
· Report a problem