The Usage and Meaning of Favicon.ico

favicon ico

Written by Peace Akinola

February 28, 2021

The so-called favicon (favicon.ico) is the abbreviation of FavoritesIcon. As the name suggests, it allows the browser’s favorites to not only display the corresponding title but also use icons to distinguish different websites.

Of course, this is not all of the Favicon. According to different browsers, Favicon displays are different: in most mainstream browsers such as Firefox and Internet Explorer (version 5.5 and above),

The favicon is not only displayed in the favorites but also appears on the address bar at the same time. At this time, the user can drag the favicon to the desktop to create a shortcut to the website; also,

The tabbed browser even has many extended functions, there are even browers (i.e Firefox) that support animation format.

Production Of Favicon.ico

The method of making Favicon.ico is quite simple. There are three kinds of commonly used Favicon.ico icons: 16×16, 32×32, and 48×48. First, use graphic tools to create two small pictures of 256 colors reflecting the theme of the website:

One is 32×32 pixels, and the other is 16×16 pixels. It should be noted that the color palette should be selected as the “Windows default color palette”, otherwise, in the final effect display; the graphics may undergo color changes very different from your original intention.

Favicon Web page call

The principle of the browser calling favicon is to first search for the favicon.ico file in the directory where the web page is located, and if it is not found, go to the root directory of the website to search.

Therefore, the easiest way is to name the created favicon file favicon.ico and upload it to the root directory of your website.

If you need to put Favicon.ico in another directory or want different web pages to display different favicons, you need to set it in the web page Html file. The specific settings are also very simple. Add the following in the Html section Code:

<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>

Meaning: display favicon in the browser tab and favicon in the favorites.

In addition, Firefox also supports Favicon in GIF animation format. The usage is as follows:

  • first, make a 16*16 gif animation, and then add the following code to the HTML code:
  • Program code:
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="animated_favicon.gif" type="image/gif">

Finally, Update Favicon on your Website

How to update the favicon.ico icon, because the cache of the local browser may not be able to update the favicon.ico icon in time. Close all open browsers and clear the browser cache.

Open the website and add to favorites. Close the browser and reopen the website to update it. If the favicon.ico icon has not been updated at this time, please wait a while before opening the browser and try again.

If you are using a 360 browser and cannot update, the address to clear the cache is C:\Documents and Settings\Administrator\Application Data\360se\data\ico. This location records the ico of the website you are browsing.

Just delete the ico file you want to update, close the browser and reopen the website to update it. If you are using Firefox or Chrome, the update is easier, and you can update the cache by browsing in the privacy mode of Firefox and Chrome.

You May Also Like…

0 Comments

Submit a Comment

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