• Tutorial List

HTML Favicon

Last updated Jul 08, 2020
add HTML Favicon on your Website

A favicon is an image (usually it is a logo) that represents your website. The favicon usually appears in places such as the browser’s tab, address bar, browser history, bookmark bar, etc.

Favicon Example
Favicon Example

According to the W3C, the size of the favicon image must be 16×16 pixels or 32×32 pixels, and the image type must be one of PNG, GIF, or ICO.


How to Add Favicon on your Website?

To add the favicon on a Webpage you have to use the rel=”icon” attribute of the <link> tag.

<link rel="icon" href="./my-logo.png" type="image/png">
  • rel="icon" – It defines that it is a favicon.
  • href="..." – The href attribute takes the path of the image file.
  • type="..." – It is optional, with the help of this attribute you can specify the type or format of the image.

For the Apple iOS Home Screen Icon, you have to add rel="apple-touch-icon".

Example:

The declaration of a favicon is always inside the <head> tag.

<!DOCTYPE html>
<html>
  
  <head>
    <title>HTML Favicon Example</title>
    
    <!-- Favicon -->
    <link rel="icon" href="./my-favicon.png">
	<link rel="apple-touch-icon" href="./my-favicon.png">
    <!-- End of the Favicon -->
    
  </head>
  
  <body>
    ...
  </body>
  
</html>

Ask Questions

Your email address will not be published. Required fields are marked *