HTML Favicon Tutorial for Beginners – Simple Explanation

A favicon is that tiny little image you see in your browser tab, right next to the page title. It is short for “favorite icon”. It makes your website look more professional and easy to spot among many open tabs.

What is a Favicon?

Have you ever noticed the small icons on your browser tabs? For Google it is a colorful G. For YouTube it is a red play button. For this site, you might see a small icon too. Those are favicons.

A favicon helps people recognize your website at a glance. When someone has ten tabs open, your little icon helps them find your page faster.

How To Add a Favicon to Your Website

Adding a favicon is easy. You need two things: an image file and one line of HTML code.

Step 1: Get or create a favicon image

You can use any small image. It should be simple and easy to see because it will be very tiny. Common sizes are 16×16 pixels, 32×32 pixels, or 64×64 pixels.

You can make your own favicon on free websites like favicon.cc or favicon.io. Just draw something simple or upload a picture and let the website turn it into a favicon.

Step 2: Save the favicon in your website folder

Save your favicon image to the main folder of your website (the root folder). A common file name is favicon.ico or favicon.png. You can also create an “images” folder and put it there.

Folder Structure Example

my-website/
├── index.html
├── favicon.ico
└── images/
    └── (other images go here)

Step 3: Add the link tag to your HTML

Inside the <head> section of your HTML file, add a <link> tag. Put it right after the <title> tag.

In the example above, I used an external favicon from another website. For your own site, you would use a path like href="favicon.ico" (if the file is in the same folder) or href="images/favicon.png" (if it is inside an images folder).

Understanding the Link Tag

Let me break down what that <link> tag means:

rel="icon" – Tells the browser “this is an icon file”
type="image/x-icon" – Tells the browser what kind of file it is (you can also use image/png or image/jpeg)
href="..." – Tells the browser where to find the icon file

Tip: The <link> tag is empty. It has no closing tag. It only has attributes.

Where to Put the Favicon File

You have a few options for where to save your favicon file:

Option 1: Root folder (simplest)

Save favicon.ico directly in the same folder as your index.html file. Then use:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Option 2: Images folder (more organized)

Save your favicon inside an “images” folder. Then use:

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

Option 3: No forward slash (relative to current page)

If your HTML file and favicon are in the same folder, you can also use:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Supported Image Formats for Favicons

Good news. All modern browsers support multiple image formats for favicons. You do not have to use the old .ico format anymore.

Here is what works in all major browsers (Chrome, Edge, Firefox, Safari, Opera):

Format	File Extension	Best For
PNG	.png	Most recommended. Good quality and transparency.
ICO	.ico	Old format, still works. Supports multiple sizes in one file.
JPEG	.jpg or .jpeg	Works but not ideal because no transparency.
GIF	.gif	Works. Can be animated (but please do not animate your favicon).
SVG	.svg	Works in modern browsers. Scales perfectly but not needed for tiny icons.

Tip: PNG is usually your best choice. It supports transparency and looks sharp. Save your favicon as favicon.png and use type="image/png" in your link tag.

Full Example With Real Steps

Here is a complete example you can try on your own computer:

1. Create a folder called “my-site” on your computer.

2. Download or create a small square image. Make it something simple like a star, a heart, or your initial. Save it as favicon.png inside the “my-site” folder.

3. Create a file called index.html inside the same folder. Put this code inside:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>

<h1>Hello World!</h1>
<p>Look at the browser tab. See my custom favicon?</p>

</body>
</html>

4. Double click the index.html file. It will open in your browser. Look at the tab. You should see your custom favicon next to the page title.

If you do not see it right away, try refreshing the page or clearing your browser cache. Sometimes browsers take a moment to show the new favicon.

Quick Summary

A favicon is the small icon in your browser tab.
Use the <link> tag inside the <head> to add one.
The rel="icon" attribute tells the browser it is an icon.
The href attribute tells the browser where to find the image file.
PNG format is usually the best choice.
Save your favicon in the same folder as your HTML file or in an images folder.

What Just Happened? Let Me Explain

A favicon makes your site look more professional.
It helps users find your tab when they have many tabs open.
You do not need special software. Any simple image editor or free online favicon maker works.
If your favicon does not show up, check the file path. Make sure the file name matches exactly. “favicon.png” is different from “Favicon.png”.
The <link> tag is also used for other things like linking to CSS files. You will see it again in later chapters.

Tip: Open VS Code and create a new folder called “favicon-demo”. Create an index.html file. Then go to a free favicon generator website, make a simple favicon (like a blue square with a white star), download it as PNG, and save it in the same folder. Add the link tag to your HTML. Open the page in your browser and see your custom favicon appear on the tab.

HTML Favicon Reference

Here are the tags and attributes we covered in this chapter:

Tag / Attribute	Description
`<link>`	Defines a relationship between the HTML document and an external resource
`rel="icon"`	Specifies that the linked resource is an icon
`type`	Specifies the MIME type of the icon (like image/png or image/x-icon)
`href`	Specifies the path to the icon file