Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

HTML Favicon

The small icon in the browser tab.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

A favicon is the small image shown next to the page title in the browser tab and in bookmarks.

Add it with a <link> element inside <head>:

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

Tips

  • Use a simple, square image, at least 32×32 pixels.
  • PNG, SVG and ICO formats are widely supported.
  • Many sites keep the file in the root folder as favicon.ico.

Key Takeaways: HTML Favicon

Mastering HTML Favicon helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Favicon Code Example

HTML 
<!DOCTYPE html>
<html>
<head>
  <title>Page with a favicon</title>
  <link rel="icon" type="image/png" href="https://www.google.com/favicon.ico">
</head>
<body>
  <h1>Look at the favicon link in the head.</h1>
  <p>Open this file in a real tab to see the icon.</p>
</body>
</html>
Free sign-in required · Google login available

HTML Favicon Practice Exercises

Check what you learned in “HTML Favicon”.

/ 3 solved
Fill in the blank

Add a favicon to the page.

<link rel="" type="image/png" href="favicon.png">
✓ Correct! Not quite. Try again.
Multiple choice

Where is the favicon <link> placed?

✓ Correct! Not quite. Try again.
Code challenge

Add a <link rel="icon"> to the head that points to "favicon.ico".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
HTML Images
Next ❯
HTML Page Title

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services