How to make a favicon
- Choose the source. Text or emoji is the quickest way to a clean icon: one or two letters of your brand, or an emoji such as 🚀. Image uses your logo; a square PNG with a transparent background gives the best result.
- Style it. Pick the text and background colours, a square, rounded or round shape and how much padding there is around the content. The preview shows a browser tab and every size, including the tiny 16 px version.
- Download and install. Unzip the files into the root folder of your website (where
index.htmlis) and paste the HTML tags into the<head>of your pages.
What is in the ZIP?
favicon.icowith 16, 32 and 48 px versions, used by all browsers, Windows and many tools that look for/favicon.ico.favicon-16x16.pngandfavicon-32x32.pngfor browser tabs and bookmarks.apple-touch-icon.png(180 × 180) for iPhone and iPad home screens. It always has a solid background, because iOS shows transparent areas as black.android-chrome-192x192.pngandandroid-chrome-512x512.pngplussite.webmanifestfor Android home screens and installable web apps.favicon-html-tags.txtwith the tags shown below the tool.
Tips for a sharp favicon
At 16 × 16 pixels details disappear, so simple shapes and strong contrast work best. A full wordmark becomes unreadable; use the first letter or the symbol of your logo instead. Keep some padding so round icons on Android do not cut off the edges, and check the 16 px preview before downloading.
Example
A bakery called “Sunny Bread” types SB, picks white text on orange #f97316, the rounded shape and 12 % padding. After uploading the ZIP's files and pasting the five HTML lines, the orange SB icon appears in browser tabs, bookmarks, Google search results on mobile and on phone home screens.
Does Google show my favicon?
Yes, Google uses your favicon next to your site in mobile search results. It needs a square icon of at least 48 × 48 pixels that is linked in the HTML and not blocked by robots.txt, which the files from this tool meet. It can take a few days to a few weeks before Google picks up a new icon.
Want a larger logo version too? The background remover makes a transparent PNG from a photo, and the image resizer scales it to any size.
Frequently asked questions
Is this favicon generator free?
Yes. It is free, with no sign-up and no watermark, for personal and commercial websites.
Is my logo uploaded?
No. The icons are drawn in your browser and the ZIP is created on your device. Nothing is uploaded or stored.
Which favicon sizes do I need?
A favicon.ico (16, 32 and 48 px), a 180 px Apple touch icon and 192 and 512 px icons for Android. The ZIP contains all of them.
Where do I put the favicon files?
Upload them to the root folder of your website, so that yoursite.com/favicon.ico works, then paste the HTML tags into the head of every page.
Can I use an emoji as a favicon?
Yes. Choose Text or emoji and type or paste the emoji. It is drawn with your device's emoji font, so it looks like the emoji style of your system.
Why does my old favicon still show?
Browsers cache favicons for a long time. Reload with Ctrl+F5, open the site in a private window or clear the browser cache to see the new icon.