CoderGuides

Adding a Favicon to Your HTML Site

Objective: To add a favicon to your HTML site.

As defined by W3C, a favicon is a "graphic image (icon) associated with a particular Web page and/or Web site". It is the image (icon) that appears in a browser's title bar or a page's tab, such as in the image you see below to the left of the text, "CoderGuides":

This article explains how to add a favicon to your HTML site.

Example of Favicon

When you create a brand new page in HTML and go to the browser, you will not see a favicon.

Example of Favicon

It may look like this if you are using Google Chrome.

Example of Favicon

In order to add a favicon to your site, the first thing you need is an image. The is the image we're going to be using for our favicon in this example. I've named the file of this image "mysite.png".

Example of Favicon

To add this image as the favicon, we're going to add a line of code to the <head> section of our code (line 6). We add the rel attribute value of "icon", along with image file in the href attribute. The rel attribute is used to define the value. In this case, the value is defined as the "icon" representing the current document. Make sure to use the correct path for your image inside the href attribute. In this example, the "mysite.png" image is in a folder called images, which is itself inside a folder called assets. Your code should look like this (line 6). Make sure to do this for each HTML page of your website, so that the favicon appears on every page in the browser.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>MySite</title>
  <link rel="icon" type="image/png" href="assets/images/mysite.png">
  -- REST OF CODE --
</head>

And that's all you have to do. And now when we refresh the page in the browser, we can see our favicon:

Example of Favicon

And in Google Chrome, it would look like this:

Example of Favicon