Favicon Generator
Make every favicon file your site needs from text, an emoji, or an image.
Emoji look different on each device. Your files use the look you see now.
Emoji CopyFind and copy more emoji(opens in a new tab)PNG, JPG, SVG, or WebP. A square image of 512×512 or larger looks sharpest. Your image never leaves your browser.
Preview
My SiteMy SiteMy SiteMy SiteMy Sitehttps://example.com
Download
Two steps to add it to your site.
Get the files
Unzip them into your site’s root folder (/). Click a file to download it on its own.
Add the HTML
Paste it inside <head> on every page. If you put the files in another folder, change the paths.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
After adding it, open your site in a new or private window to check the tab icon. Browsers may still remember the old one.
Favicon Generator
A favicon is the small icon that represents a site in browser tabs, bookmarks, history, and search results. When someone adds the site to a phone’s home screen, it also becomes the app icon.
This tool lets you design an icon from text, an emoji, or an image, then makes five image files and a manifest, each sized and padded for where it’s used. Your text and images are processed in your browser and never sent to a server.
How to use
- Choose whether to start from text, an emoji, or an image.
- Adjust the shape, colors, and size, and check the previews to see how it looks in browser tabs, bookmarks, search results, and on phones.
- Click "Download all as ZIP" and upload the files to your site’s root folder.
- Copy the HTML and paste it inside <head> on every page.
Key terms
favicon.ico
An icon file in the Windows ICO format. Put it at /favicon.ico in your site’s root, because some tools, like RSS readers, look only there. This tool puts a single 32×32 image in it.
apple-touch-icon
A 180×180 PNG that iPhones and iPads use when someone adds your site to the home screen. iOS ignores rel="icon" and uses this link instead. It looks best with about 20px of padding and a background color.
Web app manifest
A JSON file with your site’s name and a list of icons. Android uses the 192×192 icon on the home screen, the 512×512 icon on the screen shown while the web app opens, and the maskable 512×512 icon for different launcher shapes.
Maskable icon
A manifest icon whose purpose is maskable. Android crops it into a circle, squircle, or rounded square depending on the device, so keep the important part inside the safe zone, a circle 80% as wide as the icon, and fill the background to the edges.
Six files cover almost everything
Favicon packages used to include dozens of sizes. Today, this set is enough.
| File | Size and use |
|---|---|
| favicon.ico | 32×32, browser tabs and bookmarks |
| apple-touch-icon.png | 180×180, iPhone and iPad home screens |
| icon-192.png | 192×192, Android home screens |
| icon-512.png | 512×512, screen shown while the web app opens |
| icon-mask.png | 512×512, Android maskable icon |
| manifest.webmanifest | The list of icons above |
The apple-touch-icon looks best with the artwork in the middle 140 of its 180 pixels and a background around it. The maskable icon keeps the artwork in the middle 409 of its 512 pixels. This tool redraws the same design to these proportions for each file.
Getting your favicon into Google Search
Google finds your favicon through a rel="icon" or rel="apple-touch-icon" link on your home page. It must be square, and Google recommends larger than 48×48. Supported formats include ICO, PNG, GIF, JPEG, and BMP. SVG isn’t on the list.
Googlebot must be able to crawl both your home page and the icon file, and a new icon can take several days to several weeks to show up in results.
Making it readable in a small tab
A favicon in a browser tab is shown very small. A shrunken logo loses its thin lines and small text, so one bold letter or symbol from the logo usually reads better.
Without a background, the icon may be hard to see in either a light or a dark tab. Check both tab previews.
Why this tool doesn’t make an SVG favicon
SVG favicons stay sharp at any size and can even change color in dark mode. But text and emoji in an SVG are drawn with the fonts on each viewer’s device, so the icon looks different from device to device. Google Search also doesn’t list SVG as a supported format.
That’s why this tool makes only ICO and PNG files, which keep exactly the look you see on screen.
FAQ
I changed my favicon, but the tab still shows the old one.
Browsers often keep using an icon they’ve saved. Check in a new or private window. Google Search can take several days to several weeks to pick it up after recrawling.
Can I use an emoji favicon?
Emoji are drawn with the font on your device (from Apple, Microsoft, Google, and others), and each font has its own terms. For a long-term site icon, it’s safer to download an image from an emoji set with published terms, like Twemoji (CC BY 4.0) or Noto Emoji (Apache 2.0), and use it as an image.
Why is there no 16×16 image in favicon.ico?
Current advice is that one 32×32 image is enough, because browsers scale it down as needed. A logo with very thin lines may blur when shrunk, though, so check the browser tab preview.
Is my image uploaded to a server?
No. Your image and text are drawn only in your browser and are never sent or saved anywhere. Reloading the page starts over from the defaults.