How to add a favicon to your website
- Create the icon from an image or from text/emoji, and check the browser-tab preview.
- Download the package and unzip it.
- Upload all files to the root folder of your website.
- Paste the HTML snippet into the
<head>of your pages.
What's in the favicon package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 | All browsers, Google search results |
| favicon-16x16.png / favicon-32x32.png | 16, 32 | Modern browser tabs |
| apple-touch-icon.png | 180×180 | iPhone & iPad home screen |
| android-chrome-192x192.png / 512x512.png | 192, 512 | Android home screen, installable web apps |
| site.webmanifest | — | Name, colors and icons for web apps |
Favicon design tips
- Simplify. At 16×16 pixels, a single letter or symbol works far better than a full logo.
- Use strong contrast so it's visible on both light and dark browser themes.
- Match your app icon so users recognise your brand everywhere. Made an app icon already? Use the same artwork here.
Frequently asked questions
What favicon sizes do I need in 2026?
A favicon.ico (with 16, 32 and 48 px inside) for browsers and Google search results, a 180×180 apple-touch-icon for iPhone home screens, and 192×192 and 512×512 PNGs referenced in a web manifest for Android and installable web apps. This generator creates all of them.
Where do I upload the favicon files?
Put all files in the root folder of your website (the same folder as your homepage), then paste the HTML snippet inside the section of every page.
Why isn't my new favicon showing?
Browsers cache favicons aggressively. Hard-refresh the page (Ctrl+F5 / Cmd+Shift+R) or open it in a private window. Google search results can take a few weeks to show a new favicon.
Can I make a favicon from text or an emoji?
Yes. Switch to the "Text" tab, type one or two letters or an emoji, and pick colors.