? HTML Favicon

⚡ Quick Overview

A favicon (short for “favorite icon”) is the small icon displayed in the browser tab next to the page title. It also appears in bookmarks and sometimes browser history. Favicons make your website easy to recognize and give it a more professional, branded look.

Typically, a favicon is a small square image (commonly 16×16 or 32×32 pixels) that you link inside the HTML document’s <head> section using a <link> tag.

? Key Concepts

A favicon is an icon associated with a website, shown mainly in browser tabs and bookmarks.
It is usually stored as favicon.ico in the website’s root directory.
Common sizes: 16×16, 32×32 (and larger sizes for modern devices).
Common formats: .ico, .png, .svg (ICO gives widest support).
The favicon is linked using a <link rel="icon" ...> tag inside <head>.
Browsers cache favicons aggressively, so changes may not show up until cache is cleared.

? Syntax & Theory

Basic steps to add a favicon to your site:

Create or download a small square icon image.
Save it as favicon.ico in your website’s root directory.
Add a <link> tag inside the <head> of your HTML document.

? View Basic Favicon Link

<!-- This line goes inside the <head> tag -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />

You can also use other formats like PNG:

? View PNG Favicon Example

<!-- PNG favicon example (also inside <head>) -->
<link rel="icon" href="favicon.png" type="image/png" />

? Live Output / Explanation

?️ What You’ll See in the Browser

When the favicon file (for example favicon.ico) is correctly placed in your project and linked in the <head>, most browsers will show the icon next to the page title in the tab.

Important: favicons do not appear inside the webpage body. They are part of the browser’s interface (tab bar, bookmarks, sometimes history and shortcuts). If you don’t see your new favicon:

Double-check that the path in href is correct.
Make sure the file exists and is in the right directory.
Clear your browser cache and reload the page.

? Tips & Best Practices

Place your favicon file in the site’s root directory for best compatibility.
Use .ico for maximum browser support; PNG and SVG are fine for modern browsers.
Keep the image simple and readable at small sizes (16×16 or 32×32 pixels).
Use online favicon generators to create .ico files from PNG or JPG images.
Always add the <link rel="icon"> inside the <head>, not in the body.
Clear your browser cache after changing the favicon so the new version appears.
A clear, branded favicon makes your site easier to spot among many open tabs and bookmarks.

? Try It Yourself

Create a 32×32 PNG image, save it as favicon.png, place it in your project, and link it with:
<link rel="icon" type="image/png" href="favicon.png"> inside <head>.
Replace the favicon with a different image. Clear your browser cache and reload the page to confirm the change.
Move the favicon file into a subfolder (for example images/favicon.ico) and update the href path to match: <link rel="icon" href="images/favicon.ico" type="image/x-icon">.
Experiment with both .ico and .png versions and test them in different browsers.

? Summary

A favicon is the small site icon shown in browser tabs, bookmarks, and other UI areas.
It is linked in the <head> using <link rel="icon" ...>.
Typical sizes are 16×16 or 32×32 pixels; .ico provides the broadest support.
Correct file placement, proper href paths, and cache clearing are key to getting your favicon to show.
Adding a favicon boosts your site’s branding and improves user recognition across many open tabs.