Adding a Favicon: Get It Done

What’s a Favicon? It’s that little icon you see in the browser tab or bookmarks. Helps people spot your website fast.

  1. Step 1: Create Your Icon

    2. Make an icon that’s at least 16x16 pixels (or larger like 32x32). Save it as .ico, .png, or .jpg format.

  2. Step 2: Add the Favicon to Your Website

    3. Drop the favicon file into the root directory of your website. Then, throw this code in your HTML file between the <head> tags:


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

Replace "path/tofoldername/favicon.ico" with the actual location of your file. If your favicon’s chilling in the root directory, use this:


<link rel="icon" href="https://www.example.com/images/favicon.ico" type="image/x-icon">

If you want to get fancy, here’s how to support multiple icon sizes:


<!-- This is a single-line comment -->
<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/path/to/favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="/path/to/favicon.png" type="image/png" sizes="16x16">
    <title>Document</title>
    <!--
      This is a multi-line comment
      that spans multiple lines
    -->
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph with a <a href="https://example.com">link</a>.</p>
  </body>
</html>

Test it out, refresh your browser, and if it’s not showing, clear your cache. Done!

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.

top-home