Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
How to Add Favicon in HTML?

How to Add Favicon in HTML?

By Tiya Bansal
4 mins read
Last updated: 4 May 2023
199 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

We all have seen a small symbol next to the title of our website. Have you ever wondered what it is and how it is made? This tiny icon is known as the Favicon.

A favicon is a small image that appears in the browser tab next to the page title. Like this:

FAVICON TITLE IMAGE

WIKIPEDIA FAVICON

Favicons are a great way to differentiate a site from other sites especially when visitors have many tabs open or are browsing through their browser history or bookmarks bar.

Favicons help in a brand's exposure since people learn to associate the favicon's colors, fonts, and so on with the brand as they use the website.

This article provides a full explanation of how to add a favicon in HTML and what are various supported image types for the same in different browsers. Read it till the end to have a better understanding of how favicons appear on different devices.


What is a Favicon?

An HTML Favicon, also known as a favorite icon, is a graphical picture shown on the browser tab that indicates which website you are browsing. A favicon is typically 16 x 16 pixels in size and saved in the ICO file format.

Also called a bookmark icon, it can be defined as a small logo with a .ico file extension, not with any other .bmp or .gif file that is often shown in the address bar with a customized picture of the frequently visited URL. It aids in advertising, marketing, and the creation of a standard trademark.

Examples

FAANG


Most modern browsers have replaced the favicon in the address bar with an image that indicates whether or not the website is using HTTPS.

Favicons are used to enhance the user experience and ensure brand consistency. By including a favicon in your HTML page, you make it easier for users to recognize a site in their tabs, bookmarks, and embedded lists of links.

HEADER

Navigating and surfing are made simpler since different websites appear with their favicons when they are pinned in the browser tabs area. It plays an important aspect in websites like Google, and Facebook where you may have seen a small logo on the left side of the address bar that gives a professional appearance and also displays in the user's favorite bookmarks.

If your website lacks a favicon, viewers will often see a generic web page icon that varies depending on the browser. As an example,

  • In Google Chrome

SAMPLE SITE

  • In Microsoft Edge

image alt

  • In Internet Explorer

NO FAVICON


How to Add Favicon in HTML?

Let's see how to create a favicon before moving on to how to add a favicon in HTML.

The steps for creating the favicon are as follows:

  • To generate the favicon, go to www.favicon.cc or any of your favorite websites to create your own personalized favicon.
  • Once the favicon has been successfully created, we can download it by clicking on the download favicon option.
  • After downloading, a favicon with the name favicon.ico appears in the file system drive.

NOTE: You can use any image you like for your favicon, but it is recommended to use simple and high-contrast images frequently as they perform best due to the small size of the favicon.

To add a favicon to your website, save your favicon image to the root directory of your web server, or create a folder named images in the root directory and save your favicon picture there. A common and popular name for a favicon image is favicon.ico.

Let’s walk through the steps involved in adding a favicon to your webpage using HTML:

  • A favicon is added to a web page's <head> element. All "meta" data of a webpage is contained in the "head" tag.

  • Add the <link> element (as shown below) after the <title> element in your index.html file. The <link> tag is most often used for adding a favicon to your website or linking to external style sheets.

  • Make sure to use the relative file path for your favicon picture in place of favicon_image_location.

  • Use the above syntax in your HTML file's <link> tag. Save the file.

  • Now open the HTML file in your preferred browser. The icon is shown on the website.


NOTE: Although the shortcut link type is frequently seen before an icon, this link type is non-conforming and ignored and should no longer be used by site publishers.

Example

Let's see an example on how to add Favicon in HTML:

1. Use Favicon Generator to create a favicon. In this way:

Favicon in HTML Example One


2. Click the button that says Download. You can find a .ico file or a zip file in your Downloads folder.

Favicon in HTML Two 3. Extract the image and put it in the same folder as your index.html file. 4. Add the location of the logo/image to your index.html file.

Output

Favicon in HTML Three


Learn More:

The World Wide Web Consortium (W3C) standardized the favicon in the HTML 4.01 recommendation, which was published in December 1999. To provide the file format, file name, and location, the standard implementation employs a link element with a rel attribute in the document's <head> section.

A third party registered the.ico file extension with the Internet Assigned Numbers Authority (IANA) in 2003 under the MIME type. However, Internet Explorer cannot show files supplied with this standardized MIME type when utilizing the .ico format to display as pictures (and not as a favicon).

The HTML living standard said in 2011 that for historical reasons shortcut is allowed immediately before an icon, however, a shortcut does not have any significance in this context.

Although, the .ico files have been widely accepted by browsers from a long time and are frequently used for favicons, you may also use other image file types, such as.png, .svg, .jpeg, and even animated GIFs.

Favicons can be 16x16, 32x32, 48x48, or 64x64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.

Favicon File Format Support

The following table shows the file format support for a favicon image in different browsers:

BrowserICOPNGJPEGSVGGIF
Google ChromeYesYesYesYesYes
Microsoft EdgeYesYesYesYesYes
Mozilla FirefoxYesYesYesYesYes
OperaYesYesYesYesYes
iOS SafariYesYesYesYesYes

Conclusion

  • This article explained how to add a favicon in HTML and how to design a favicon.

  • A favicon is a small image file including one or more icons that can be used to represent a website, blog, or even just a single web page.

  • A favicon image is displayed to the left of the page title in the browser tab.

  • Favicons are a great way to make your site stand out from others, especially when users have a lot of tabs open or are looking through their browser history or bookmarks bar.

  • You may find plenty of favicon generators and good open-source references to help you on your way.

  • Favicons must be kept simple with image format as favicon.ico. This format is supported by all browsers.

  • The favicon plays a vital role in website development and also, and we have seen various methods of adding a favicon, thereby achieving cross-browser compatibility.

  • Favicon helps in creating a visual specification with the domain name of the website.