Adding a Custom Favicon

A favicon or browser icon is a small image that displays next to a page’s title in browser tabs and in other places across the web. Adding a custom favicon makes your site recognizable in a browser full of tabs or bookmarks.

Creating Your Favicon

There are several ways to create your own favicon. Search for “favicon generator” in your preferred search engine and follow the instructions of the site you select. We recommend RealFaviconGenerator, an online tool for creating favicons that will work across multiple platforms.

Adding Your Favicon

To add your favicon, simply save it to the template’s directory/folder. Your favicon might be stored in a sub-directory or sub-folder, or it might be at the top-most level of the directory/folder with the index.html file, which is common.

Modifying the Code for Non .ico Favicon

If you did not use a .ico file type for your favicon, you will need to make a small change in the <head> section of the index.html file by following these instructions:

  1. Open the index.html file in your code editor.
  2. Change the file extension of the favicon in the href attribute. Your new favicon could have a .jpg, .gif, or .png file extension.
  3. Save the index.html file and view the changes in your web browser.

Here is the original code before the change is made:

<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>

Here is the modified code; file extension changed to .png:

<head>
    <link rel="shortcut icon" href="favicon.png">
</head>
Tagged: