Favicon Generator: what it does
A favicon is the little icon in the browser tab, bookmarks and Google search results. Drop your logo (or type one to three letters and pick colours and a shape), check how it looks in a light and a dark browser tab at the real 16-pixel size, and download everything a website needs in one ZIP: a multi-size favicon.ico with 16, 32 and 48 px icons, 16 and 32 px PNGs, a 180 px Apple touch icon for iPhone home screens, 192 and 512 px Android icons, a site.webmanifest, and the lines of HTML to paste into your page’s head. Your logo is processed in your browser and never uploaded.
How to use it
- Drop your logo, or choose “From letters” and type one to three letters.
- Adjust the padding and background, and check the icon in the light and dark tab previews.
- Add your website name and theme colour for the web manifest.
- Download the ZIP, upload the files to your site’s root folder and paste the HTML into your page’s head.
Tips
- Simplify for 16 px: a full logo with small text turns into a blur. Use the symbol only, or one or two letters.
- Use padding 0–8% for bold symbols and more for round logos, so the icon doesn’t look cramped in a tab.
- Check the dark tab preview: a black logo on a transparent background disappears in dark mode. Add a background colour if it does.
- Google shows your favicon in mobile search results; it must be a multiple of 48 px square, which favicon.ico (48 px) and the 192 px icon both satisfy.
- After uploading new icons, browsers can keep the old one for days. Test in a private window.
Frequently asked questions
What files does a website need for its favicon?
Today: favicon.ico in the site’s root folder (for old browsers and Google), a 32 px PNG, an Apple touch icon of 180 × 180 px, and 192 and 512 px icons listed in a web manifest for Android. The ZIP contains all of them plus the HTML that links them.
How do I add the favicon to my website?
Upload the files to your site’s root folder (next to index.html) and paste the HTML lines into the head of every page. On WordPress use Appearance → Customize → Site Identity → Site Icon with the 512 px PNG; on Shopify use Theme settings → Favicon.
Why is the Apple touch icon not transparent?
iPhones fill transparent areas of home-screen icons with black, so the 180 px icon always gets a solid background: your chosen colour, or white.
Can I make a favicon from text?
Yes. Choose “From letters”, type one to three letters, and pick the font, colours and a square, rounded or round shape.
Is my logo uploaded?
No. Every icon is drawn by your browser on your device, and the ZIP is made there too.