How to Add a Favicon to Your Website

A favicon is the small icon that appears in your browser tab

When you open a website, you see a tiny image next to the page title in your browser tab. That image is called a favicon — short for "favorite icon." It's usually 16 by 16 pixels, though browsers will scale it if needed. Adding one takes a single line of HTML in the <head> section of your page, the same place where you link your CSS file.

The favicon serves two purposes. First, it makes your site easier to recognize when someone has multiple tabs open — they can spot your icon without reading the tab text. Second, it appears in browser bookmarks and history, so people see your brand there too. Most modern websites have one, and browsers will look for it automatically even if you don't add it yourself.

Key Takeaways

A favicon is a small image file (usually PNG, ICO, or SVG) that appears in the browser tab next to your page title.
You add a favicon by placing a single line in the <head> section of your HTML that points to the image file.
The image file should be saved in your website's root folder or in a folder you specify in the link path.
Different browsers and devices may request different sizes, but one 32-by-32-pixel image works for most modern uses.
If you don't add a favicon, browsers will automatically look for a file named favicon.ico in your root folder.

The simplest way: one line of HTML

Open the HTML file for your page and find the <head> section — this is where your <title> tag and <link> tags for CSS already live. Add this line anywhere inside the <head>:

Replace favicon.png with the actual name of your image file. If your favicon is in a subfolder called images, write href="images/favicon.png" instead. That's all you need. When someone visits your page, the browser will load that image and display it in the tab.

The type="image/png" part tells the browser what kind of file it is. If your favicon is a different format, change this: use type="image/x-icon" for .ico files, or type="image/svg+xml" for .svg files.

What image format to use

You have three main choices for favicon format, and each has a trade-off. PNG files are the most common choice today. They're small, they support transparency (so your icon can have a see-through background), and every modern browser handles them. A 32-by-32-pixel PNG favicon is usually under 5 kilobytes.

ICO files are the older standard format. You may still see them on older websites. They can hold multiple sizes of the same image in one file, which was useful when browsers needed different sizes. Most new projects don't use them anymore, but if you have an .ico file, the HTML line is <link rel="icon" type="image/x-icon" href="favicon.ico">.

SVG files are vector images that scale perfectly to any size without losing sharpness. They work well if your favicon is a straightforward logo or shape. The HTML line is <link rel="icon" type="image/svg+xml" href="favicon.svg">. SVG favicons are newer, so very old browsers may not display them, but this is rarely a problem in practice.

For most projects, create or export a PNG file at 32 by 32 pixels and use that. It's straightforward, it works everywhere, and it's small enough that it won't slow down your page.

Where to save your favicon file

The easiest place to save your favicon is in the root folder of your website — the same folder that holds your main index.html file. If you save it there and name it favicon.png, you can use the straightforward HTML line: <link rel="icon" type="image/png" href="favicon.png">.

If you organize your files into subfolders, you need to tell the browser where to find the favicon. For example, if you have a folder called assets and your favicon is inside it, use href="assets/favicon.png". The path is relative to the HTML file, just like when you link a CSS file.

Some older websites put the favicon in the root folder and name it exactly favicon.ico. If you do this, browsers will find it automatically without needing an HTML line at all. However, it's better to add the HTML line anyway, because then you control which file is used and you're not relying on the browser's automatic search.

Testing your favicon in the browser

After you add the HTML line and save your file, open the page in your browser. The favicon should appear in the tab next to the page title. If it doesn't show up right away, try these steps.

First, hard refresh your browser. Press Ctrl+Shift+R on Windows or Linux, or Command+Shift+R on Mac. This clears the browser's cache and forces it to reload the page and the favicon from scratch. Browsers often cache favicons aggressively, so a normal refresh may not be enough.

Second, check that the file path in your HTML is correct. Open your browser's developer tools (press F12), go to the Console tab, and look for any error messages about the favicon. If the file path is wrong, you'll see a 404 error. Make sure the filename and folder path match exactly — capitalization matters.

Third, verify that the image file actually exists in the location you specified. Open your file manager and navigate to the folder to confirm the file is there.

Adding multiple sizes for different devices

Some websites add extra lines to serve different favicon sizes to different devices. This is optional — one 32-by-32-pixel favicon works fine on phones, tablets, and computers. But if you want to provide a larger image for devices that request it, you can add more lines in the <head>.

For example, you might add a larger PNG for general use and a special image for Apple devices:

The first line tells browsers to use favicon-32.png when they need a 32-by-32-pixel icon. The second line is specifically for iPhones and iPads — when someone adds your site to their home screen, Apple devices will use the apple-touch-icon.png file instead. This image should be at least 180 by 180 pixels.

For most small websites and projects, this extra work isn't necessary. One favicon line is enough. Add multiple sizes only if you want to fine-tune how your site looks on different devices.

Frequently Asked Questions

What size should my favicon be?

A 32-by-32-pixel image works for nearly all modern browsers and devices. If you want to support older browsers or provide a larger image for Apple devices, create a 180-by-180-pixel version for the apple-touch-icon line. Browsers will scale images up or down as needed, so the exact size is flexible.

Can I use a JPEG file as a favicon?

Technically yes, but PNG is better. JPEG doesn't support transparency, so your favicon will have a solid background color instead of blending with the browser tab. PNG files are also usually smaller. Stick with PNG unless you have a specific reason to use JPEG.

Why isn't my favicon showing up after I added the HTML line?

The most common reason is browser caching. Hard refresh your page with Ctrl+Shift+R (Windows/Linux) or Command+Shift+R (Mac). Also check that the file path in your HTML matches the actual location of the image file — capitalization matters. If you still don't see it, open the browser console (F12) and look for error messages about the favicon file.

Do I need a favicon for my website to work?

No. A favicon is optional and doesn't affect how your page functions. However, it makes your site look more professional and helps people recognize it in their browser tabs and bookmarks. Most modern websites include one.

Can I change my favicon later without breaking anything?

Yes. You can replace the image file or change the HTML line to point to a different file anytime. Just remember that browsers cache favicons, so people may see the old one for a while. A hard refresh will show the new one when ready.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.