How to Make a Favicon That Actually Shows Up in the Browser Tab

October 17, 2026 • NOFYI Editorial Team

The Tiny Icon With a Big Job

A favicon is the small icon that appears in the browser tab, in bookmarks, and in browser history next to a site’s name. It is tiny, often only 16 pixels wide, yet it helps readers recognize a site at a glance. When many tabs are open, the favicon may be the only visible clue about which tab belongs to which site. When it is missing, blurry, or out of date, the site looks unfinished.

Making a favicon sounds simple: create a small image and link it in the page. In practice, many favicons fail to show up because of the wrong file type, the wrong size, the wrong file name, caching, or a missing link tag. This guide explains what a favicon is, how to make one that actually appears, and how to fix the most common problems. It includes a worked example that starts with a 512 by 512 logo and ends with a working favicon file.

You do not need design experience to make a usable favicon. You need a simple source image, a clear export process, and a short checklist. Keep the design simple, because detail disappears at small sizes. A bold letter, a simple shape, or a cropped mark works better than a full logo with small text.

What a Favicon Is and Where It Appears

The word favicon is short for favorite icon. It was originally used for bookmarks, and it is now used in many places. Browsers show it in the tab bar, in the address bar on some browsers, in bookmark lists, in history lists, and in shortcuts. Mobile devices may use related icons for home-screen shortcuts and app-like bookmarks. Search results and social shares may use larger versions of the site icon.

A favicon is not the same as a logo, although it is often based on one. A logo is designed to be read at a large size, with full text and detail. A favicon is designed to be recognized at a tiny size. That is why a favicon is often a simplified version of a logo. Trying to squeeze a full logo into 16 pixels usually produces a blurry smudge. Cropping to the most recognizable part usually works better.

ICO Versus PNG: Which Format to Use

Two formats are common for favicons: ICO and PNG. ICO is the traditional favicon format. An ICO file can contain several sizes in one file, for example 16 by 16, 32 by 32, and 48 by 48 pixels. The browser picks the size it needs. This multi-size feature is the main advantage of ICO. It is widely supported, including in older browsers, and it is still a safe default for the main favicon file.

PNG is a modern image format that many browsers also accept for favicons. A PNG favicon is a single size, such as 32 by 32 or 192 by 192 pixels. PNG files are easier to create in many design tools, and they support transparency. They are often used for larger icons, such as home-screen icons and high-resolution tab icons. Some sites use both: an ICO file for broad compatibility, and PNG files for specific sizes.

For most sites, the practical approach is to provide an ICO file named favicon.ico at the root of the site, plus a larger PNG for modern browsers and devices. The ICO file covers the classic case. The PNG file covers high-resolution displays. You do not need dozens of sizes. A small set of well-chosen sizes is enough.

The Sizes That Matter: 16, 32, and 48 Pixels

Three sizes cover most favicon needs. Sixteen by sixteen pixels is the classic tab size. It is the size most people picture when they think of a favicon. Thirty-two by thirty-two pixels is used for larger tab displays, bookmarks, and high-resolution screens. Forty-eight by forty-eight pixels is used for shortcuts, desktop icons, and some browser displays. An ICO file that contains all three sizes gives the browser a choice without needing three separate files.

For modern devices, larger sizes also help. A 180 by 180 PNG is commonly used for Apple touch icons. A 192 by 192 PNG is commonly used for Android home-screen icons. A 512 by 512 PNG is a good source file and is also used for larger install icons. You do not need to create every possible size by hand. Start with a large, clean source image, then export the sizes you need from it.

The key idea is to design for the smallest size. If the icon is readable at 16 by 16 pixels, it will usually look fine at larger sizes. If it only works at 512 by 512 pixels, it will fail where it matters most, in the browser tab.

How to Make a Favicon That Shows Up

Step 1: Start With a Simple Source Image

Start with a clean source image, ideally 512 by 512 pixels, with a simple mark on a solid or transparent background. Use a bold shape, a single letter, or a cropped symbol. Avoid small text, thin lines, gradients that disappear at small sizes, and busy backgrounds. If your logo has a wordmark, do not try to fit the whole word. Use the first letter or the most recognizable symbol. Test the design by shrinking it to 16 pixels on screen. If you cannot tell what it is, simplify it further.

Step 2: Export the Sizes You Need

Export the source image at the sizes you need. For an ICO file, export 16 by 16, 32 by 32, and 48 by 48 pixels into one ICO file. For PNG files, export at least a 32 by 32 or 48 by 48 version, and a larger 192 by 192 or 512 by 512 version for devices. Use a favicon generator or an image editor that supports ICO export. Check that transparency is preserved if your design uses it. Save the original 512 by 512 file so you can re-export later if the design changes.

Step 3: Place the File in the Right Location

Place favicon.ico at the root of your site, so it is available at the address yourdomain.com/favicon.ico. Many browsers look there by default, even without a link tag. If you use a content management system such as WordPress, use its site icon setting rather than uploading the file by hand, unless your setup requires a manual file. The system will handle the file placement and the link tags. If you manage the site by hand, put the file in the root and keep the name exactly favicon.ico, in lowercase.

Step 4: Link the Favicon in Your HTML

Add a link tag in the head section of your HTML that points to the favicon. For an ICO file, the tag names the file and its type. For a PNG file, the tag names the PNG and its size. The exact tag varies by setup, but the pattern is a link element with a rel attribute of icon, a type attribute that matches the file, and an href attribute that points to the file. If your site uses a content management system, the system usually adds this tag for you when you set the site icon. Check the page source to confirm the tag is present and that the href points to the correct file.

Step 5: Clear the Cache to See It

Favicons are cached aggressively by browsers. That means the browser may keep showing an old favicon, or no favicon, even after you upload a new one. This is the most common reason a correct favicon appears to fail. To check the new favicon, clear the browser cache, or test in a private window, or use a different browser. You can also open the favicon URL directly in the browser and refresh it. If the direct URL shows the new icon but the tab still shows the old one, the problem is caching, not the file. Wait, restart the browser, or clear the site cache if your site uses a caching plugin or service.

Step 6: Test on More Than One Browser and Device

Test the favicon in at least two browsers and on a phone if you can. Different browsers cache favicons differently and use different sizes. A favicon that shows up in one browser may not show up in another until the cache is cleared. Check the tab, the bookmark, and the home-screen shortcut if you support one. If the favicon appears in one place but not another, the file is probably correct and the missing display is a caching or size issue.

Worked Example: From a 512 by 512 Logo to favicon.ico

Imagine you have a square logo that is 512 by 512 pixels. It shows a bold letter N on a solid background. The letter is large and clear. The background is simple. This is a good source file because it stays readable when shrunk.

First, simplify the logo for favicon use. Remove any tagline or small text under the letter. Make sure the letter has enough contrast with the background. If the logo has a thin border, remove it or make it thicker. Save this simplified version as your new 512 by 512 source file, and keep the original logo untouched.

Next, export the favicon sizes. Create an ICO file that contains 16 by 16, 32 by 32, and 48 by 48 versions of the simplified mark. Also export a 192 by 192 PNG for high-resolution displays. Check each size. At 48 pixels, the letter should be clear. At 32 pixels, it should still be clear. At 16 pixels, it should be recognizable as a bold letter, even if the edges are slightly rough. If the 16-pixel version is a blur, increase the weight of the letter, increase the contrast, or crop tighter.

Next, place the files. Put favicon.ico at the root of the site. Put the PNG version in the same place or in your images folder, depending on your setup. Add the link tags or set the site icon in your content management system. Then clear the cache and test. Open the site in a private window. Look at the tab. If the letter appears, the favicon works. If it does not, open the favicon URL directly. If the direct URL shows the icon, the file is correct and the tab is showing a cached result. Clear the cache and test again.

This worked example shows why each step matters. The 512 by 512 source gives you enough detail to export clean small sizes. The simplified design keeps the mark readable at 16 pixels. The multi-size ICO gives the browser the size it needs. The cache check prevents a false diagnosis. Without any one of these steps, the favicon might look correct in the editor and still fail in the tab.

Common Reasons a Favicon Does Not Show Up

Limitations of Favicons

A favicon is a small identifier, not a branding solution. It cannot carry a full logo, a tagline, or detailed artwork. It cannot fix a confusing site name or a cluttered tab bar. It also cannot be guaranteed to appear everywhere. Some browsers, some private modes, and some feed readers do not show favicons, or they show them with a delay. A favicon that works in one browser may take time to appear in another because of different caching rules.

Favicons also have practical limits. An ICO file with many sizes is larger than a single-size file. A very detailed favicon may look noisy at small sizes. A favicon with low contrast may disappear on dark browser themes. A favicon that depends on color alone may be hard to recognize for readers with color vision differences. For that reason, use shape and contrast, not color alone, to make the mark recognizable.

Finally, favicons do not affect search rankings by themselves. They help recognition and usability, which can improve the experience of returning visitors. They do not replace clear titles, good content, or a usable site. Treat a favicon as a finishing detail, not as a substitute for the rest of the site.

Frequently Asked Questions

Why does my favicon not show up after I upload it?

The most common reason is browser caching. The browser may be showing an old or empty cached result. Clear the browser cache, test in a private window, or open the favicon URL directly and refresh it. If the direct URL shows the new icon, the file is correct and the tab will update once the cache clears.

Should I use ICO or PNG for a favicon?

Use ICO for the main favicon file because it can hold 16 by 16, 32 by 32, and 48 by 48 sizes in one file and is widely supported. Use PNG for larger icons, such as home-screen icons. Many sites use both: an ICO file for compatibility and a PNG for high-resolution displays.

What size should my source image be?

Start with a clean 512 by 512 pixel source image. That size gives you enough detail to export small sizes cleanly. Design for the smallest size, 16 by 16 pixels, and check that the mark is still recognizable there. A design that only works at 512 pixels will fail in the browser tab.

Do I need to clear the cache to see a new favicon?

Often, yes. Browsers cache favicons aggressively. After you upload a new favicon, clear the browser cache, use a private window, or test in another browser. If your site uses a caching plugin or a content delivery network, clear that cache too. The new favicon may take time to appear in all browsers.

Final Thoughts

A favicon that actually shows up is the result of a simple process done carefully. Start with a simple 512 by 512 mark. Export an ICO file with 16, 32, and 48 pixel sizes, plus a larger PNG for devices. Place the file correctly, link it in the page, and clear the cache to test it. Keep the design simple, because detail disappears at small sizes. A clear, high-contrast mark will be recognized in the tab, in bookmarks, and in history, and it will make the site look complete.

Related tool: Browser Info — free to use in your browser, no sign-up.

Try a Tool

Free, in your browser — no sign-up.

Related Articles