How to make a favicon for your website
Design an icon that stays recognisable at 16 pixels, generate every size browsers and phones need, and add the right HTML to your site.
Where your favicon appears
A favicon is the small icon that represents your site. It appears in browser tabs, bookmarks and history, on the home screen when someone saves your site on a phone, and in many search results next to your site name. In a row of twenty open tabs, it is often the only way a visitor finds your site again.
Each of those places displays the icon at a different size, from 16 pixels in a tab to 512 pixels on some app screens. A good favicon is designed to work at the smallest size first.
Sizes and files you need
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | Browser tabs and older browsers, many tools that look for /favicon.ico |
| PNG icon | 32 × 32 | Modern browser tabs on high-density screens |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen shortcuts |
| Android / PWA icons | 192 × 192 and 512 × 512 | Android home screen and installed web apps |
| SVG icon (optional) | Scalable | Modern browsers that support vector favicons |
Designing for 16 pixels
At 16 × 16 pixels there are only 256 dots to work with. A full logo with a wordmark becomes an unreadable smudge. Successful favicons usually use one bold element from the brand: a single letter, a simple symbol or a distinctive shape on a solid background.
- Use one or two letters or a single symbol, not the full logo with text.
- Choose bold shapes and thick strokes. Thin lines disappear when scaled down.
- Use strong contrast. Test the icon on both light and dark browser themes.
- Fill the square. Leave only a small margin so the icon does not look tiny next to other tabs.
- Start from a square, high-resolution source, at least 512 × 512 pixels, ideally a PNG with transparency or an SVG.
Step-by-step: generating a full favicon pack
- Prepare a square source image, at least 512 × 512 pixels. If you have an SVG logo, export it with SVG to PNG at 512 or 1,024 pixels.
- Open Favicon Generator and choose the source image.
- Preview the smallest sizes. If the 16-pixel version is unreadable, simplify the design and try again.
- Download the pack. It contains favicon.ico, PNG icons at 16, 32, 48, 180, 192 and 512 pixels, and ready-to-paste HTML.
- Upload the files to the root of your website, or the folder your platform uses for static files.
- Paste the HTML tags into the head section of your pages, or into your site builder's custom head code setting.
- Open your site in a new private browser window to check the tab icon, since browsers cache favicons aggressively.
The HTML that connects it
Browsers find icons through link tags in the page head. A typical minimal set is a link to /favicon.ico for broad compatibility, a PNG icon with sizes set to 32x32, and an apple-touch-icon link pointing to the 180-pixel PNG. Installed web apps also read icons from a web app manifest file, which lists the 192 and 512-pixel versions.
Many website builders, including common hosted platforms and content management systems, have a dedicated site icon setting. If yours does, upload the 512-pixel PNG there and let the platform generate tags; use the generated pack only when you control the HTML yourself.
Favicons in search results
Google can show your favicon next to your site in search results. Its published guidelines ask for a square icon, a stable URL that search crawlers are allowed to fetch, and a size that is a multiple of 48 pixels, such as 48, 96 or 144. The favicon should represent your brand and must not be inappropriate. After you add or change an icon, it can take some time before search results update.
Worked example: a bakery website
A local bakery's logo is a detailed illustration of a loaf with the shop name underneath. Used directly as a favicon, the 16-pixel version is a brown blur. The owner creates a simple square instead: a bold white letter B on the bakery's brand red. Generating the pack from a 512-pixel PNG of that design gives a crisp tab icon that stands out among other tabs, and the same mark looks good as the iPhone home screen icon. The full illustrated logo stays on the website itself, where there is space for it.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Old icon still shows | Browser cache | Check in a private window; clear the cache or wait |
| No icon at all | Wrong path or missing tags | Open /favicon.ico directly in the browser to confirm it loads |
| Blurry tab icon | Source too small or too detailed | Use a larger, simpler source image |
| White square on iPhone | Missing apple-touch-icon | Add the 180-pixel PNG and its link tag |
| Icon invisible in dark mode | Dark shape on transparent background | Add a solid background colour to the icon |
Adding the favicon on popular platforms
On WordPress, open the Customizer or the Site Editor and look for the Site Icon setting. Upload a square image of at least 512 × 512 pixels, and WordPress generates the sizes and tags automatically. Shopify, Wix, Squarespace and similar hosted builders have an equivalent favicon or site icon field in their site or theme settings. In these cases, you only need the 512-pixel PNG from the generated pack.
For hand-coded sites and frameworks, upload favicon.ico and the PNG files to your public or static folder, which is served from the root of the site, and paste the generated link tags into the head of your main layout or template so they appear on every page. Many modern frameworks also have conventions such as placing an icon file in a specific folder; follow your framework's documentation if it has one, and remove any old default icon files so they do not override yours.
Keeping the icon consistent with your brand
A favicon is often the first piece of your brand people see repeatedly, so treat it as part of your visual identity rather than an afterthought. Use the exact brand colour values from your style guide, and keep the same icon across your website, web app, social profile pictures and any installed app so people recognise it everywhere.
When you update your logo, update the favicon at the same time, and use the same file names so existing tags keep working. Because browsers cache favicons for a long time, some visitors may see the old icon for days. If an immediate change matters, you can add a version query to the icon URLs in your link tags, for example favicon.ico?v=2, which encourages browsers to fetch the new file.
Accessibility and dark mode
Browser tabs can be light or dark depending on the visitor's settings. An icon drawn in black on a transparent background disappears against a dark tab bar, and a white icon disappears in a light one. Placing your symbol on a solid, brand-coloured square or circle is the simplest way to guarantee visibility in both. Also check the icon at 16 pixels in a greyscale preview; if it is still recognisable without colour, it will work for people with colour vision differences too.
Testing your favicon properly
After publishing, test the favicon in the places where people will actually see it. Open the site in two or three different browsers in a private window, which avoids cached icons. Bookmark a page and check the icon in the bookmarks bar. On an iPhone, open the site in Safari, choose Add to Home Screen and look at the home screen icon; on Android, add the site to the home screen from Chrome's menu.
Also open your favicon URLs directly in the browser, for example yoursite.com/favicon.ico and yoursite.com/apple-touch-icon.png, to confirm they load rather than returning a not found page. If you use a content delivery network or caching plugin, clear its cache after uploading new icons. These checks take a few minutes and catch the missing-file problems that cause blank or default icons.
Summary
Design a simple, bold, square mark that reads at 16 pixels; generate the full set of sizes from a 512-pixel source; upload the files and add the link tags or use your platform's site icon setting; then test in private windows and on phone home screens. A clear favicon costs little effort and helps visitors find your site among their open tabs and bookmarks every day.
Frequently asked questions
Do I still need an .ico file? Modern browsers accept PNG and SVG, but favicon.ico remains the most universally recognised fallback and many tools request it automatically.
Can I convert an existing PNG to ICO only? Yes. PNG to ICO creates a multi-size ICO with frames from 16 to 256 pixels.
Is my logo uploaded? No. The favicon pack is generated in your browser.