The favicon is the smallest piece of branding on your website and one of the most visible. It sits in every browser tab, in bookmark lists, in history, and on phone home screens when someone saves your site. Over the years the number of required files has grown and then shrunk again. Here is a sensible, modern set and how to make it.
The files a website needs
| File | Size | What it is for |
|---|---|---|
favicon.ico | 16, 32 and 48 px inside one file | Classic favicon; many browsers and tools request it from the site root automatically |
favicon-32x32.png | 32 x 32 px | Browser tabs on regular screens |
favicon-16x16.png | 16 x 16 px | Small tab and list views |
apple-touch-icon.png | 180 x 180 px | iPhone and iPad home screen shortcuts |
android-chrome-192x192.png | 192 x 192 px | Android home screen, listed in the web manifest |
android-chrome-512x512.png | 512 x 512 px | Larger icon for installed web apps and splash screens |
site.webmanifest | Small text file (JSON) | Tells browsers which icons to use when the site is added to a home screen |
icon.svg (optional) | Vector, any size | A scalable icon for browsers that support SVG favicons |
The ICO file is a container that can hold several sizes at once, which is why one file covers 16, 32 and 48 pixels. Keeping it at the root of your site, at /favicon.ico, is still worthwhile because some browsers, feed readers and other tools look there by default.
The SVG favicon is a nice addition: it stays sharp at any size and can even switch colors for dark mode with a media query inside the SVG. Not every browser uses it, though, so keep the PNG and ICO files as fallbacks.
Design tips for tiny sizes
A favicon is shown at 16 or 32 pixels most of the time. At that size, a detailed logo turns into a smudge. Design for the small size first.
- Simplify. Use a single letter, a symbol or the most recognizable part of your logo, not the full logo with text.
- Avoid thin lines. A one-pixel line at 512 pixels disappears completely at 16 pixels.
- Use strong contrast. Tabs can be light or dark depending on the browser theme. Test your icon against both.
- Fill the space. A small symbol floating in a large empty square looks tiny in a tab. Use only a little padding.
- Start large and square. Use a source image of at least 512 x 512 pixels, or an SVG. A square image avoids distortion and unwanted cropping.
- Give home screen icons a solid background. iPhones and iPads apply their own rounded corners to home screen icons and do not show transparent areas the way you might expect. A solid background color usually looks better there.
If your logo is an SVG and you want a PNG version at a specific size for other uses, the SVG to PNG converter renders it at any resolution.
Creating the set
The favicon generator creates every file listed in the table except the optional SVG.
- Open the generator and add a square-ish image: PNG, SVG or JPG.
- Choose a background: transparent or a color.
- Adjust the padding and corner radius until the preview looks right.
- Check the preview, which shows the icon in a mock browser tab at real size.
- Download the ZIP. It contains
favicon.ico(16, 32 and 48 px), the 16 and 32 pixel PNGs, the 180 pixel Apple touch icon, the 192 and 512 pixel Android icons andsite.webmanifest. - Copy the HTML snippet with the copy button.
The generator runs in your browser, so your logo is not uploaded anywhere while you work on it.
The HTML to add
Upload all files to the root folder of your website, next to your home page. Then paste the snippet into the <head> section of every page, usually in a shared template. A typical snippet looks like this:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
If you add an SVG icon yourself, include <link rel="icon" type="image/svg+xml" href="/icon.svg"> as well. If your files live in a subfolder rather than the root, adjust every path, including the icon paths inside site.webmanifest.
Icons for Windows programs
Favicons are not the only use for ICO files. Windows uses them for program icons, shortcuts and folders, where larger sizes up to 256 pixels matter. The PNG to ICO converter lets you choose exactly which sizes go into the file, from 16 to 256 pixels, and whether a non-square image is fitted onto a transparent square or cropped from the center. Each size is stored as a PNG inside the ICO, which Windows Vista and later and all browsers support.
Why your old favicon still shows
Updating a favicon is often more frustrating than creating it, because browsers cache favicons aggressively and separately from the rest of the page.
- Do a hard refresh of the page, or open the favicon address directly, such as
/favicon.ico, and refresh it there. - Clear the browser's cache, or test in a private window.
- Change the file names, or add a version to the links, for example
href="/favicon-32x32.png?v=2", so browsers treat them as new files. - Remember that bookmarks and home screen shortcuts may keep the old icon until they are removed and added again.
Search engines also show favicons next to results. They update on their own schedule after recrawling your site, so a new icon can take a while to appear there. Google Search Central publishes its own favicon guidelines if you want to check the details.
For more about the formats, see the ICO, SVG and PNG format pages.
Frequently asked questions
What size should a favicon be?
There is no single size. Browser tabs use 16 and 32 pixels, phones use 180 to 512 pixels. Generate the full set from one source image of at least 512 x 512 pixels and let each device pick what it needs.
Do I still need favicon.ico?
It is no longer strictly required for current browsers, which read the PNG links. But it is small, harmless, and still requested automatically by some browsers and tools, so it is worth including.
Can I use a JPG for my favicon?
You can use a JPG as the source image. The generator turns it into PNG and ICO files. Keep in mind that a JPG has no transparency, so its background color will show.
