Favicon generator
What is a Favicon Generator?
A favicon is the small icon shown in browser tabs, bookmarks, history and on phone home screens. A site without one looks unfinished and is harder to find among many open tabs. This generator creates clean favicons from an emoji or one or two letters, so you can have a recognisable icon in seconds without a design tool.
How to use it
- Choose an emoji or type one or two letters.
- Pick the background colour, text colour and corner rounding.
- Preview the icon at 16, 32 and 180 pixels.
- Download the PNG files and copy the HTML tags into your page's
<head>.
Example HTML
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>Which sizes do you need?
- 16 × 16 and 32 × 32: browser tabs and bookmarks, including high-density screens.
- 180 × 180: apple-touch-icon for iOS home screen shortcuts.
- 192 × 192 and 512 × 512: Android and PWA manifest icons.
- favicon.ico at the site root is still requested by some tools and crawlers.
Design tips
- At 16 px, detail disappears. One bold letter or a simple emoji reads best.
- Use strong contrast between background and symbol.
- Test in both light and dark browser themes.
- Google Search can show your favicon next to results; it must be at least 48 × 48 px and represent your brand.
Frequently Asked Questions
What size should a favicon be?
Provide 16 by 16 and 32 by 32 for browsers, 180 by 180 for Apple devices and 192 and 512 pixel versions for Android and PWAs.
Where do I put the favicon files?
Upload them to your site, usually the root folder, and add the link tags to the head of every page.
Why does my new favicon not show?
Browsers cache favicons aggressively. Clear the cache, open a private window or add a version query string to the file URL.
Can I use an emoji as a favicon?
Yes. This tool renders the emoji into PNG images, which works in all browsers.