How to use the favicon generator
- 1Choose Letters or emoji, or upload a square logo.
- 2Pick colors, a shape and the padding around your icon.
- 3Check how it looks in the browser tab preview and at small sizes.
- 4Download the favicon pack and upload the files to the root of your website.
- 5Copy the HTML and paste it inside your page's <head>.
What is in the pack
- favicon.ico containing 16, 32 and 48 pixel versions, for browser tabs and older software
- favicon-16x16.png and favicon-32x32.png for modern browsers
- apple-touch-icon.png (180×180) for iPhone and iPad home screens, always with a solid background
- android-chrome-192x192.png and android-chrome-512x512.png for Android and installable web apps
- site.webmanifest listing the Android icons
- favicon-html.txt with the tags to paste into your page
Designing a favicon that works
Favicons are shown as small as 16×16 pixels, so detail disappears. One or two bold letters, a simple symbol or an emoji reads far better than a full logo with text. Strong contrast between the icon and its background helps it stand out among other tabs.
Check the 16 pixel preview: if you cannot tell what it is at that size, simplify it.
Installing
Upload all the files to the top-level folder of your site, so they are available at addresses like /favicon.ico. Then add the HTML to the <head> of every page. Browsers cache favicons aggressively, so a hard refresh may be needed before you see a new one.
Everything is generated in your browser, and your logo is never uploaded.
Frequently asked questions
What size should a favicon be?
Provide several: 16 and 32 pixels for browser tabs, 180 for Apple devices and 192 and 512 for Android. This pack includes them all.
Do I still need a favicon.ico file?
Most modern browsers use the PNG versions, but favicon.ico is still requested by some browsers, apps and tools, so it is worth including.
Why is my new favicon not showing?
Browsers cache favicons for a long time. Do a hard refresh, open the site in a private window, or check the file path in the HTML.
Can I use an emoji as my favicon?
Yes. Type it in the text box. It is drawn into the image files, so it looks the same everywhere.
Last updated