HTML CSS JavaScript Python Swift TypeScript SQL React

How to Add a Favicon in HTML

What you’ll build or solve

You’ll add a favicon that appears in the browser tab for your site.

When this approach works best

This approach works best when you want a recognizable site icon across tabs, bookmarks, and browser UI.

Learn HTML on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSEHTML

Unlock Web Development: Start building web pages using the foundational markup language of the web

Beginner friendly

Use it when you:

Brand a personal site, portfolio, or landing page.
Replace the generic default tab icon in a small web project.
Help users spot your tab in a crowded browser window.

Skip this approach when:

You can’t edit the HTML <head> because a hosted builder restricts it. You may need a platform setting instead.
You plan to change the icon frequently during testing. Browsers cache favicons aggressively.

Prerequisites

A favicon file, commonly .ico or .png.
Access to your site files, including your HTML and a place to store the icon.
A way to serve the site, such as a local dev server or a hosted site.

Step-by-step instructions

Step 1: Add a favicon link in the `<head>`

Put your favicon file in your project, then add a <link rel="icon"> tag inside the <head> of your HTML.

Option A: Single ICO file at the site root (most common)

Place favicon.ico at the root of your site and link to it:

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">
<linkrel="icon"href="/favicon.ico">
<title>My Site</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

Option B: PNG file in a folder

Use this if your favicon is a PNG stored in a folder like images/.

Open in Mimo

<linkrel="icon"href="/images/favicon.png"type="image/png">

Option C: Both ICO and PNG (broader support)

Use both if you want a widely compatible ICO plus a sharp PNG.

Open in Mimo

<linkrel="icon"href="/favicon.ico">
<linkrel="icon"href="/images/favicon.png"type="image/png">

What to look for

The favicon link must be inside <head>, not <body>.
Use the correct path. /favicon.ico points to the site root, while images/favicon.png is relative to the current HTML file.
ICO works widely. PNG can look sharper at small sizes.

Examples you can copy

Example 1: Basic favicon.ico at the site root

Open in Mimo

<linkrel="icon"href="/favicon.ico">

Example 2: PNG favicon stored in an images folder

Open in Mimo

<linkrel="icon"href="/images/favicon.png"type="image/png">

Example 3: Both ICO and PNG included

Open in Mimo

<linkrel="icon"href="/favicon.ico">
<linkrel="icon"href="/images/favicon.png"type="image/png">

Common mistakes and how to fix them

Mistake 1: Putting the favicon link in the `<body>`

What you might do:

CSS

Open in Mimo

<body>
<linkrel="icon"href="/favicon.ico">
<h1>Hello</h1>
</body>

Why it breaks:

Browsers look for favicon links in the document head. In the body, the tag may be ignored.

Correct approach:

Move it into <head>.

Bash

Open in Mimo

<head>
<linkrel="icon"href="/favicon.ico">
</head>

Mistake 2: Using a local file path in `href`

What you might do:

Open in Mimo

<linkrel="icon"href="C:\Users\Ana\Desktop\favicon.ico">

Why it breaks:

Browsers can’t load a local file path from a website URL.

Correct approach:

Put the file in your project and link to it with a web path.

Open in Mimo

<linkrel="icon"href="/favicon.ico">

Mistake 3: Replacing the favicon but seeing the old one

What you might do:

You replace favicon.ico, but the old icon still shows.

Why it breaks:

Browsers cache favicons heavily, so changes can look stuck.

Correct approach:

Hard refresh the page, or rename the file and update the href.

Open in Mimo

<linkrel="icon"href="/favicon-v2.ico">

Troubleshooting

If you still see the default icon, confirm the <link rel="icon"> is inside <head> and the path is correct.
If it works locally but not after deployment, the server may be case-sensitive. Check file name casing, such as favicon.ico vs Favicon.ico.
If the icon won’t update, hard refresh, clear site data, or rename the file and update the link.
If you get a 404 for the favicon in DevTools Network, the file isn’t at that path. Move it or update the link.
If the icon looks blurry, generate the favicon from a higher-resolution source.