A favicon is the small icon in browser tabs, bookmarks and history lists. The same image also appears when someone adds your site to a phone home screen, and in some search results. Each of those places expects a different size or file type, which is why a single image is not enough.
This generator builds the whole set in your browser from one source image; the image is not uploaded.
How to use it
- Choose a square or nearly square image: PNG, SVG or JPG. An SVG or a PNG of at least 512 × 512 px gives the sharpest results, because the largest icon in the package is 512 px.
- Choose a background: transparent or a color.
- Adjust the padding percentage and the corner radius percentage.
- Check the preview, which shows your icon in a mock browser tab at real size.
- Download the ZIP and copy the HTML snippet with the copy button.
- Upload the files to your site, usually to the root folder, matching the paths in the snippet, and paste the snippet into the head section of your pages.
What is in the package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside | Older browsers, Windows, tools that request /favicon.ico automatically |
| favicon-16x16.png | 16 px | Browser tabs |
| favicon-32x32.png | 32 px | Tabs on high-density screens, bookmarks |
| apple-touch-icon.png | 180 px | iPhone and iPad home screen shortcuts |
| android-chrome-192x192.png | 192 px | Android home screen, web app manifest |
| android-chrome-512x512.png | 512 px | Larger icons and splash screens for installed web apps |
| site.webmanifest | text file | Tells Android and Chrome which icons to use |
You can open site.webmanifest in any text editor to review its contents before uploading. If you only need a single Windows icon with custom sizes, the PNG to ICO tool is simpler. The ICO format page explains how the format stores several sizes in one file.
Designing for 16 pixels
At 16 × 16 pixels, a detailed logo turns into a smudge. Icons that survive small sizes share a few traits:
- One simple shape, a single letter or a bold symbol rather than a full logo with text.
- Thick strokes and high contrast. Thin lines disappear or turn gray.
- Little empty space. Use the padding slider sparingly, so the symbol fills most of the square.
- A test on light and dark tabs. A dark logo on a transparent background can vanish in dark mode. A colored background with rounded corners solves this.
On iPhones and iPads, home screen icons do not show transparency, and transparent areas usually appear black. If your source has a transparent background, choosing a background color gives you a predictable result.
For more design advice and the reasons behind each file, read How to make a favicon.
Frequently asked questions
Do I still need favicon.ico?
Modern browsers mostly use the PNG files linked in the HTML, but many tools and older browsers still look for /favicon.ico in the root of your site automatically. Including it avoids errors in your server logs and costs nothing.
Why does my new favicon not show up?
Browsers cache favicons for a long time. Reload the page with a cleared cache, open the site in a private window, or rename the files and update the paths in the HTML so browsers treat them as new.
Can I use an SVG as the source?
Yes. SVG is an ideal source because it stays sharp at every size. The package itself contains ICO and PNG files; it does not include an SVG favicon.
Where do I paste the HTML snippet?
Inside the head section of every page, or in the shared header template if your site uses one. Make sure the file paths in the snippet match where you uploaded the files.