How to Add a Custom Icon to Your Website's Home Page

What you're adding and where it appears

A favicon is the small icon that appears in your browser tab, next to your website's name. It also shows up in bookmarks, browser history, and when someone adds your site to their home screen on a phone. Most websites use their logo or a simplified version of it.

The icon itself is a small image file — usually 16×16 or 32×32 pixels, though modern browsers support larger sizes too. The most common format is .ico, but browsers also accept .png, .jpg, and .svg files. You add it to your website by placing one line of code in the <head> section of your HTML.

This is different from adding images to the page itself. A favicon doesn't appear in the content area — it only shows in the browser chrome and bookmarks.

Key Takeaways

A favicon is the tiny icon in your browser tab, created as a separate image file and linked in your HTML head section.
You can use .ico, .png, .jpg, or .svg files, though .ico and .png are most widely supported across all browsers.
The code to add it is a single line: <link rel="icon" href="path/to/favicon.ico"> placed between your <head> tags.
After uploading the image file to your server and adding the code, clear your browser cache to see the change, since browsers cache favicons aggressively.

Creating or preparing your icon file

Start with an image that represents your site — your logo, a letter, or a simple symbol. The image should work at very small sizes, so avoid fine details that will become unreadable when shrunk to 16 pixels wide.

If you're starting from scratch, design your icon in a graphics program like Photoshop, GIMP, or Figma. Make it square (512×512 pixels is a good starting size), then export it as a .png file. You can also use online favicon generators like favicon.io or realfavicongenerator.net — upload your image, choose your size, and download the result.

If you want to convert an existing .png to .ico format, use a free converter like convertio.co or icoconvert.com. Upload your .png, select .ico as the output format, and download the converted file. Most modern sites skip .ico entirely and just use .png, which all current browsers support.

Uploading the file to your server

Once you have your icon file, upload it to your web server using FTP, SFTP, or your hosting control panel's file manager. The most common location is your site's root directory — the same folder that contains your index.html file. You can also create a subfolder called images or assets and put it there.

Note the exact path to your file. If your favicon is named favicon.png and sits in your root directory, the path is /favicon.png. If it's in an images folder, the path is /images/favicon.png. You'll need this path for the next step.

Adding the code to your HTML

Open your HTML file in a text editor and find the <head> section — it's the part at the top of the file between <head> and </head> tags. This section usually contains your title, meta tags, and links to stylesheets.

Add this line anywhere inside the <head> section:

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

Replace /favicon.png with the actual path to your file. If your icon is named logo.ico and lives in an assets folder, write <link rel="icon" href="/assets/logo.ico" type="image/x-icon"> instead.

For .png files, use type="image/png". For .ico files, use type="image/x-icon". For .svg files, use type="image/svg+xml". If you're unsure which type to use, omit the type attribute entirely — browsers will figure it out from the file extension.

Testing and troubleshooting

After saving your HTML file and uploading it to your server, open your website in a browser. The favicon should appear in the tab within a few seconds. If it doesn't show up, the most common reason is browser caching — your browser has stored the old (missing) favicon and won't check for a new one.

Clear your browser cache by pressing Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac), then reload the page. In some browsers you may need to close and reopen the tab. If you're testing locally on your computer before uploading, open your HTML file in a browser using file:/// — favicons often don't load from local files, so upload to your server first to test properly.

Check that your image file actually exists at the path you specified. Use your browser's developer tools — right-click the page, select Inspect, go to the Network tab, and reload. Look for a request to your favicon file. If it shows a 404 error, the file path is wrong or the file wasn't uploaded.

Adding multiple icon sizes for different devices

Modern websites often include multiple icon sizes so phones, tablets, and desktop browsers all get the right resolution. You can add several lines to your <head> section to cover different scenarios:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">

The first two lines handle browser tabs and bookmarks at different zoom levels. The third line, with rel="apple-touch-icon", is the icon that appears when someone saves your site to their iPhone or iPad home screen. Apple devices expect this to be 180×180 pixels.

You don't have to include all of these — a single favicon works fine for most sites. But if you want your site to look polished across devices, creating three versions (16×16, 32×32, and 180×180) and linking all three takes only a few extra minutes.

Frequently Asked Questions

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

The most common reason is browser cache. Your browser stored the old favicon (or the absence of one) and won't check for a new one until you clear the cache. Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac), clear cached images and files, then reload the page. If it still doesn't appear, check that the file path in your code matches where you actually uploaded the file.

Can I use a .jpg file as my favicon?

Yes, most modern browsers support .jpg files. However, .png and .ico are more reliable across older browsers and devices. If you want maximum compatibility, stick with .png or .ico. If you only care about current browsers, .jpg works fine.

What size should my favicon be?

For a single favicon, 32×32 pixels is the standard that works everywhere. If you're creating multiple sizes, use 16×16 for browser tabs, 32×32 for bookmarks, and 180×180 for Apple devices. Larger sizes (up to 512×512) are supported but unnecessary for most uses.

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

You only add the code once, in your main HTML file or in a template that all pages share. The favicon then appears on every page of your site. If you're using a template system or a content management system, add the code to the header template, not to individual pages.

What's the difference between favicon.ico and apple-touch-icon?

favicon.ico is the standard icon for browser tabs and bookmarks on all devices. apple-touch-icon is specifically for iPhones and iPads — it's what appears on the home screen when someone saves your site. You can have both, and they can be different images if you want.

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.