HTML Favicon

Now a days approximately every website is displaying small app icon in web browser. Every latest browser support feature of favicon. HTML5 provide favicon tag to specify icon image source. This icon image may be of ico or png format. Ico favicon is recommended, as it has support in all web browsers. Favicon is adjacent with page title. Favicon can be generated using Online Favicon Generator.

Dimensions of Favicon

Standard dimensions for favicon is 16x16, or it may also be 32x32.

How to add Favicon

Next question is how to add favicon for your wrbsite. Its answer is simple we can add this usimg link tag. Create an image of png or ico type with high contrast and save it in either root directory or in separate image folder. Then provide it relative address in href attribute of link tag. It is important to define type of link tag as image/x-icon and rel as icon.

Syntax

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

Example

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

Favicon File Format

Now a days all latest versions of web browsers support multiple types of favicon. These image types include ico, png, gif, jpeg and svg. Maximum of websites use ico or png file types for displaying favicon icon.

Importance of Favicon

In modern era favicon also plays an important role to get user attention. It is the website logo that can also view in search engines along with title of page.

Favicon Colors

Favicon image can be any of mono or RGB type. In mono color it is only using black and white color. Favicon images must be sharp as to be clear in browser tab.

Webpage Favicon Example

How to set favicon of website

 

Comments
Login to TRACK of Comments.