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.

Step 1: Create Your Icon

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

Step 2: Add the Favicon to Your Website

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!

0 Interaction

118 Views

33 Likes

Adding a Favicon: Get It Done

Welcome to Ptutorials