What a favicon is and why it shows up in your browser tab

A favicon is the small image that appears next to your website's name in the browser tab, in bookmarks, and in browser history. It is typically 16×16 or 32×32 pixels and can be a simplified version of your logo, a single letter, or any small graphic that represents your site. When someone bookmarks your page or has multiple tabs open, the favicon helps them spot your site at a glance.

Browsers look for a favicon automatically when they load your page. If you do not provide one, the browser displays a generic icon or nothing at all. Adding a favicon takes about five minutes and requires only two things: an image file and one line of code in your HTML.

Key Takeaways

  • A favicon is a small image file (usually 16×16 or 32×32 pixels) that appears in browser tabs and bookmarks.
  • You can create a favicon using any image editor or an online favicon generator, then save it as .ico, .png, or .svg format.
  • The favicon file goes in your website's root folder (the same folder as your index.html), and you link to it with a single line in your HTML head section.
  • Most browsers cache favicons, so you may need to do a hard refresh or clear your cache to see changes immediately.

Creating a favicon image from scratch

Start by deciding what your favicon will be. Keep it simple — a favicon that is only 16 or 32 pixels wide has no room for detail. A single letter, a simplified logo mark, or a solid shape works best. Avoid thin lines, small text, or gradients that will blur when shrunk down.

If you already have a logo or image, you can use that. Open it in any image editor (Photoshop, GIMP, Photopaint, or even Paint on Windows). Crop or resize it to a square — favicons must be square, typically 64×64 or 128×128 pixels. Work at a larger size first, then the browser will shrink it down. Keep the file simple and high-contrast so it remains readable at tiny sizes.

If you do not have design software, use an online favicon generator. Search for "favicon generator" and you will find free tools like Favicon.io, Real Favicon Generator, or Favicon-Generator.org. These let you upload an image, type text, or choose from templates. They generate the favicon file and often provide the HTML code you need as well.

Saving your favicon in the right format

Favicons can be saved in three formats: .ico (the traditional format), .png (modern and widely supported), or .svg (scalable, best for sharp display at any size). Most modern browsers support all three, so choose whichever your tool produces.

If you created your favicon in an image editor, export it as PNG or use an online converter to turn it into .ico format. Name the file favicon.ico or favicon.png — the exact name matters because browsers look for these names by default. If you use a different name, you will need to tell the browser where to find it with an HTML link tag.

Save the favicon file to your website's root folder — the same folder where your index.html or home page lives. This is usually the top level of your website's file structure, not inside a subfolder.

Adding the favicon to your HTML

Open your HTML file in a text editor. Find the <head> section at the top of the page — this is where metadata and links go, before the <body> tag. Add this line inside the head:

<link rel="icon" type="image/png" href="favicon.png">

If your favicon is named favicon.ico instead, change the line to:

<link rel="icon" type="image/x-icon" href="favicon.ico">

If your favicon is in a subfolder (for example, a folder called "images"), update the href to match the path: href="images/favicon.png". Save your HTML file. The next time someone visits your page, the browser will load and display the favicon.

Testing your favicon and troubleshooting display issues

Open your website in a browser and look at the tab. The favicon should appear next to your page title. If it does not show up right away, the browser may be showing a cached version of your old page. Do a hard refresh by pressing Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). This clears the browser cache for that page and forces it to reload everything fresh.

If the favicon still does not appear, check three things. First, verify the file name and path in your href attribute match exactly — file names are case-sensitive on many servers. Second, make sure the image file is actually in the root folder where you said it is. Third, open your browser's developer tools (F12 or right-click and select "Inspect"), go to the Network tab, and reload the page. Look for favicon.png or favicon.ico in the list. If it shows a 404 error, the browser cannot find the file — check the path again.

Different browsers may cache favicons for days. If you change your favicon and want to see the update immediately, you may need to clear your entire browser cache or use an incognito window to test.

Using a favicon generator for multiple formats and sizes

For a more professional setup, use a tool like Real Favicon Generator. Upload your image, and the tool creates favicons in multiple formats and sizes — one for browser tabs, one for Apple devices, one for Android, and others. It generates all the HTML code you need to paste into your head section.

This approach is more work upfront but ensures your favicon looks good everywhere: on desktop browsers, on iPhone home screens, on Android bookmarks, and in Windows taskbars. The generator provides a single block of code with multiple link tags, each pointing to a different favicon file. Copy the entire block into your head section and upload all the generated files to your root folder.

Frequently Asked Questions

What size should my favicon be?

Create your original image at 64×64, 128×128, or 256×256 pixels. The browser will shrink it down to 16×16 or 32×32 for display in tabs and bookmarks. Working larger first ensures the image stays clear when reduced. If you use an online generator, it handles sizing for you.

Can I use a JPEG for my favicon?

JPEG is not recommended because it does not support transparency and does not compress well at tiny sizes. Use PNG or SVG instead. Both support transparency and stay sharp at small sizes. If you only have a JPEG, convert it to PNG using an online image converter.

Why is my favicon not showing up after I added the code?

The most common cause is a browser cache. Do a hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). Also check that the file name in your href matches the actual file name exactly, including capitalization. If the file is in a subfolder, make sure the path is correct.

Do I need a favicon on every page of my website?

No. Put the favicon link in your head section once, and the browser will use it for all pages on your site. You only need one favicon file in your root folder.

What is the difference between .ico, .png, and .svg favicons?

.ico is the traditional format and works on all browsers. .png is modern, supports transparency, and is smaller in file size. .svg is scalable and looks sharp at any size, but older browsers may not support it. For best compatibility, use .png or provide both .ico and .png.