Views

Report Content

×

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!

Share and Join the Discussion

You need to be logged in to participate in this discussion.

×
×