Adding a Favicon to Your Website in HTML

The simplest way to add a favicon

A favicon is the small icon that appears in your browser tab next to your page title. To add one, place a single line of code in the <head> section of your HTML file, before the closing </head> tag:

Replace favicon.ico with the path to your image file. The file can live in your root directory (the main folder of your website) or in a subfolder — just make sure the path matches where you actually saved it.

That's the complete process. Your favicon will show up in the browser tab, bookmarks, and browser history once you reload the page.

Key Takeaways

Add a single <link> tag to your HTML <head> section pointing to your favicon file.
The most common favicon format is .ico, but .png, .jpg, and .svg files work too — just change the type attribute to match.
Your favicon file needs to exist at the path you specify, or browsers will show a broken icon and generate error messages in your console.
Browsers cache favicons aggressively, so you may need to do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to see changes after you update the file.

File formats and which one to use

The .ico format is the traditional choice and works everywhere, but modern browsers support other formats too. If you use .png, change your link tag to type="image/png". For .jpg, use type="image/jpeg". For .svg, use type="image/svg+xml".

Most developers use .png or .svg now because they're easier to create and edit than .ico files. A .png favicon should be at least 32×32 pixels, though 64×64 or larger is better for sharp display on high-resolution screens. .svg files scale to any size automatically.

If you want your favicon to work on Apple devices (iPhones, iPads, and Macs), add a second line for the Apple touch icon:

Where to place the favicon file

The simplest location is your website's root directory — the main folder where your index.html lives. If you put favicon.ico there, some browsers will find it automatically even without a link tag, though you should still include the tag to be certain.

You can also organize favicons into a subfolder. If you create a folder called images and put your favicon there, your link tag becomes <link rel="icon" type="image/x-icon" href="images/favicon.ico">. The path is relative to your HTML file's location, so make sure it matches exactly.

Complete example with multiple formats

Here's what a real <head> section looks like with favicon support for different devices and browsers:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link rel="icon" type="image/png" href="favicon.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> </head>

The favicon link can go anywhere in the <head> section, but placing it near the top keeps your code organized. Both the standard favicon and the Apple touch icon point to files in your root directory.

Troubleshooting when your favicon doesn't appear

If you reload your page and see no favicon, first check that the file path in your href attribute matches where you actually saved the file. Open your browser's developer tools (F12 on Windows, Cmd+Option+I on Mac), go to the Console tab, and look for a 404 error mentioning your favicon. A 404 means the browser couldn't find the file at that path.

Second, do a hard refresh to clear your browser's cache. Browsers remember favicons aggressively, so an old version may still be showing. On Windows, press Ctrl+Shift+R. On Mac, press Cmd+Shift+R. This forces your browser to download the page and all its resources fresh.

Third, make sure your image file actually exists and is readable. If you're testing locally on your computer, open the file directly in your file manager to confirm it's there. If you're testing on a live server, use an FTP client or your hosting control panel to verify the file was uploaded.

Favicon sizes for different contexts

Different places on the web use different favicon sizes. Browser tabs typically show 16×16 or 32×32 pixels. Bookmarks use 16×16. Browser history uses 16×16. Apple devices use the apple-touch-icon, which should be 180×180 pixels for best results.

If you want one favicon to look good everywhere, use .svg format — it scales perfectly to any size. If you use .png, create it at 64×64 or larger and let the browser shrink it down. Smaller source images look blurry when enlarged.

For maximum compatibility across all devices and contexts, some developers create multiple favicon files at different sizes and link to all of them. This is optional but useful if your favicon contains fine details that need to stay sharp at small sizes.

Frequently Asked Questions

Do I need a favicon for my website to work?

No. A favicon is purely visual and doesn't affect how your website functions. Browsers will display your page normally without one. However, a favicon makes your site look more professional and helps users identify your tab when they have multiple tabs open.

Can I use an animated GIF as a favicon?

Technically yes, but most browsers don't animate favicons in tabs. Some browsers animate them in bookmarks or history. For best results, use a static image. If you want animation, .svg files support CSS animations, though browser support varies.

What if I change my favicon — how long until it updates?

Browsers cache favicons for a long time, sometimes weeks. To see your new favicon immediately, do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). On a live website, visitors may see the old favicon for days until their browser cache expires, unless they also do a hard refresh.

Does the favicon file name have to be favicon.ico?

No. You can name it anything you want — icon.png, logo.ico, my-favicon.svg. The name doesn't matter. What matters is that the href attribute in your link tag points to the correct file name and path.

Can I use a favicon on a local HTML file I'm testing on my computer?

Yes, but the file path needs to be correct. If your HTML file and favicon are in the same folder, use href="favicon.ico". If your favicon is in a subfolder, use the relative path like href="images/favicon.ico". Favicons work the same way locally as they do on a live server.

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.