Lesson 15 of 30

HTML Favicon

2 min read · Free · No login needed

Look at your browser tabs. Each one has a small icon on the left of the title — that is the favicon (short for "favourite icon"). It is your website's tiny logo. Without one, the browser shows a plain default icon, and your site looks unfinished.

How to add a favicon

Make a small square image — 32×32 or 48×48 pixels is enough — save it as favicon.ico or favicon.png, put it in your website's main folder, and add this line inside the <head> of your page:

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

Making the icon

Use any image editor to shrink your logo to a small square. Free online tools like favicon.io can turn a PNG or a letter into a proper favicon file in seconds. Keep the design very simple — at 16 pixels wide, fine details disappear. A single letter or a bold shape works best.

Where the favicon appears

Besides browser tabs, the favicon shows up in bookmarks, in the browser history, and on the phone home screen when someone saves your site. It is a small detail, but it makes your site look professional and easy to recognise.

Tip: Browsers cache favicons aggressively. If you change yours and the old one still shows, hard-refresh the page (Ctrl + Shift + R) or clear the browser cache.

Example

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

<h1>My Site</h1>
<p>Look at the browser tab — it shows my favicon.</p>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Images HTML Page Title