In the rest of the browsers, GIF will be displayed, but without animations. You can see the examples below for other file formats.įor the PNG Format, the following code can be used as given below.įor the GIF Format, the following code can be used as given below.Īdditional note: An animated GIF favicon can be set through the tag, but as of now only Firefox allows it. You can change the attribute accordingly for different file formats. In short, you need to place the following code under the element in your HTML document. The standard implementation is to add a link element with a ‘rel’ attribute in the section of the document to specify the file format and file name and location.

Now let’s see how to add a Favicon in HTML! This will enable most browsers to automatically display the favicon. Once your favicon is ready, you must save it in the root folder of your website. Colour DepthĪ colour depth of 8-bit, 24-bit, or 32-bit is recommended. It is recommended to have favicons of 32×32, 57×57, or 76×76 or 96X96 pixels in size. Besides, the animated version of favicons is also suitable as a. ico format enables browsers to automatically detect the favicon.ico and display the favicon. ico format is widely accepted by the browsers and so, it is the commonly used formats. When you are creating a favicon, you must keep in mind the following key characteristics. Websites such as, Favicon.ico & App Icon Generator or favicon.io are useful. You can also choose the easiest method to generate favicons using a website. You can use a program such as Adobe Photoshop to create a favicon. There are different methods to create a favicon. Here you can see the favicon of this website. If there is no favicon in your website, then visitors would only see a generic web page icon. If you have developed a website, once it gets ready, you must design and add a favicon. In short, favicons are essential as it is associated with your brand identity. The favicon is also used by smartphone and tablets as an “App” icon when the user decides to pin your webpage on their home screen. The favicons help identify your website from others, when users have many tabs open, or they are browsing through Bookmarks bar or Browser History. Favicons are significant identity icons that represent a website on the Address bar, Browser tabs, Browser history, Bookmark bar and even in the Favorites toolbar. A Favicon is a small, iconic image associated with a Website or Webpage.

How to make a favicon code.org