Favicon in HTML

Alan Chacko -

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we will explore the idea of favicons in HTML, syntax and how to add it to a webpage.

Contents

  1. Introduction
  2. Basic Syntax
  3. Attributes
  4. Examples

Introduction

A favicon is a small icon displayed left of the page title in a browser tab. It is loaded directly from the page requested, and is usually a logo representing the owner of the site. For example, the favicon of this site is the following image.

Any image format can be used for a favicon such as .jpeg, .png, or .svg. Usually we store it in a file called favicon.ico. This file can be placed anywhere in the project directory, but is usually kept in root or an images folder.

Basic Syntax

On the DOM, the favicon is usually rendered as a 16x16 pixel image. It can be placed along with your HTML metadata using a <link> tag.

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
  ...
</head>
<body>
  ...

Attributes

Favicons require the following attributes to be specified in the link tag:

  • rel="icon": tells the DOM to use this image as a favicon.
  • type="image/<file type>": specifies the filetype of the image used.
  • href="<location>": specifies the location of the favicon image.
  • (optional) sizes=16x16: specifies the size of the image used as a favicon, not supported in all modern browsers as most icons default to size 16x16. This atrribute is not necessary for .ico and .svg files.

Examples

Below are a list of tags for favicons of different filetypes:

<!-- for icos -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- for  pngs -->
<link rel="icon" type="image/png" href="/images/favicon.png" sizes="16x16" />

<!-- for jpegs -->
<link rel="icon" type="image/jpeg" href="/images/favicon.jpeg" sizes="16x16" />

<!-- for svgs -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />

With this article at OpenGenus, you must have the complete idea of Favicon in HTML.

Sign up for FREE 3 months of Amazon Music. YOU MUST NOT MISS.