How to Add an Icon to Your Home Page

What you're adding and where it goes

An icon on your home page is a small image — usually 16 by 16 pixels or 32 by 32 pixels — that appears in your browser tab, in bookmarks, and sometimes in search results. This icon is called a favicon, short for "favorite icon". It's the tiny square you see next to a website's name when you have multiple tabs open.

The favicon sits in your website's root folder (the main directory where your home page file lives) or in a dedicated folder you create for images. Your HTML code then points the browser to that file so it knows to display it. Without this instruction, the browser won't know the icon exists.

Most websites use either a PNG file (which handles transparency well) or an ICO file (the traditional favicon format). A PNG works fine for modern browsers, so that's the simpler choice if you're starting out.

Key Takeaways

A favicon is a small image file (usually 16×16 or 32×32 pixels) that appears in browser tabs and bookmarks.
You need to save your icon file in your website's root folder or an images folder, then add one line of code to your HTML head section.
PNG and ICO are the most common formats; PNG is simpler if you're new to this.
The code that links your icon to your page is a single <link> tag that goes between your <head> tags.
After you add the code, you may need to clear your browser cache or do a hard refresh to see the icon appear.

Prepare your icon file

Start with an image that's square — 64 by 64 pixels or larger. If your image is rectangular or oddly sized, the browser will stretch or crop it, and it will look blurry or cut off in the tab. You can use any image editor: Photoshop, GIMP (free), Canva, or even Paint if you're working with a straightforward shape or logo.

Save the file as a PNG with a straightforward name like favicon.png or icon.png. Avoid spaces and special characters in the filename. Then move that file into your website's root folder — the same folder where your index.html (or home page file) lives. If you keep images in a separate folder, you can put it there instead, but the root folder is the easiest path.

If you want to support older browsers or follow the traditional approach, you can convert your PNG to an ICO file using an online converter (search "PNG to ICO converter"). read the ICO file and save it in the same location as your PNG.

Add the favicon link to your HTML

Open your home page HTML file in your text editor. Find the <head> section — this is the part at the top of your file between <head> and </head> tags, before the <body> section starts. This is where you put information about the page that doesn't display as visible content.

Add this line anywhere inside the <head> section:

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

If your favicon file is in a subfolder called images, change the href to href="images/favicon.png". If you're using an ICO file instead, change type="image/png" to type="image/x-icon" and change the filename to favicon.ico.

Save your HTML file. That's the only code change you need to make.

Test the icon in your browser

Open your home page in a browser and look at the tab at the top. You may not see the icon right away because browsers cache favicons — they store the old version in memory to load faster next time. To force the browser to load the new icon, do a hard refresh: press Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac.

If you still don't see it after a hard refresh, check three things. First, make sure the favicon file actually exists in the location you specified — open your file manager and navigate to your website folder to confirm. Second, make sure the filename in your HTML code matches the actual filename exactly, including capitalization. Third, check your browser's developer tools: press F12, go to the Network tab, and reload the page. Look for a request to your favicon file. If it shows a 404 error, the browser couldn't find the file.

Once the icon appears in the tab, test it in a bookmark. Add your page to bookmarks and check whether the icon shows up there too. Different browsers display favicons in slightly different places, but the same file works across all of them.

Favicon sizes for different uses

A single 32 by 32 pixel PNG works for most situations — tabs, bookmarks, and browser history. But if you want your icon to look sharp on mobile home screens or in search results, you can add additional sizes. This requires a few more lines in your <head> section.

For Apple devices (iPhones and iPads), add this line:

<link rel="apple-touch-icon" href="apple-icon.png">

Create a 180 by 180 pixel PNG file called apple-icon.png and save it in your root folder. This icon appears when someone adds your page to their home screen on an iPhone.

For Android and other devices, the original favicon line you added handles most cases. You don't need to create multiple versions unless you want your icon to look different on specific devices — most of the time, one good 32 by 32 PNG is enough.

Common mistakes and how to fix them

The most common mistake is putting the favicon file in the wrong folder. If your HTML file is in a folder called website, and you put the favicon in a subfolder called website/images, your href needs to say href="images/favicon.png". If you just write href="favicon.png", the browser looks in the same folder as your HTML file and won't find it.

Another frequent issue is using the wrong file format or a corrupted file. If you converted your PNG to ICO using an online tool, the conversion sometimes fails silently — the file looks fine but won't display. Try uploading a fresh PNG instead, or use a different converter.

If you're testing locally on your computer (not on a live server), some browsers are stricter about loading favicons. Open your page through a local server instead of just double-clicking the HTML file. If you have Python installed, navigate to your website folder in the command line and run python -m http.server 8000, then visit localhost:8000 in your browser. This simulates how the browser behaves on a real website.

Frequently Asked Questions

What size should my favicon be?

Start with 32 by 32 pixels for the standard favicon. If you want to support Apple devices, create a 180 by 180 pixel version for the apple-touch-icon. Larger sizes (64×64 or 128×128) work too, but the browser will shrink them down, so there's no visual benefit.

Can I use a JPG file instead of PNG?

Technically yes, but PNG is better because it supports transparency — the area around your icon can be see-through instead of a solid color. If you only have a JPG, convert it to PNG using an online tool or image editor before adding it to your page.

Why doesn't my favicon show up after I added the code?

The most likely reason is that the file path in your href doesn't match where you actually saved the file. Double-check the filename and folder location. Also try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to clear the browser cache. If it still doesn't work, check your browser's developer tools (F12, Network tab) to see if the favicon request returns a 404 error.

Do I need to add favicon code to every page, or just the home page?

Adding it to your home page is enough for most cases — the browser remembers the favicon for the entire website. However, if you want to be thorough or if different sections of your site have different icons, you can add the code to other pages too. The code is the same on every page.

What if I want to change my favicon later?

Save your new icon file with the same filename (or update the filename in your HTML code), then do a hard refresh in your browser. You may also need to clear your browser's cache completely if the old icon persists. On most browsers, you can do this in Settings under Privacy or History.

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.