Web Publishing
Mar 12, 2013
Tip and Trick Editorial
No Comments

How to Force the Refresh of Website Favicon

Favicon, acronym for favorite icon, which is also known as shortcut icon, website icon, URL icon, or bookmark icon, is an important image that provides a graphical identification for a website for easy recognition on browser’s window, tab or shortcut, favorite or bookmark.

Favicon may be changed by webmaster on re-branding or redesign of the site. Or no favicon was created during the initial creation of the new site or blog, where no icon or generic favicon is shown instead. In any case, a web browser may or may not refresh the newly updated favicon to replace the old favicon despite the favicon.ico file has been updated.

The issue arises when the favicon.ico file has been cached by the web browser. The web browser will reuse the cached version of favicon instead of requesting and downloading the favicon.ico from the server, until the cached image expires. In addition, some web browsers do not refresh or recheck for new favicon.ico file even though the favicon file was previously nonexistent, and continued to show the generic blank favicon.

To force a refresh of favicon on your web browser, try the following trick:

  1. In the address bar of the web browser, type in the exact URL pointing to the favicon.ico (for example, https://www.tipandtrick.net/favicon.ico), and hit Enter.
  2. The favicon logo should be shown on the web browser.
  3. Press Ctrl + F5 key to force a refresh of the favicon.
  4. Close all windows of the web browser.
  5. Restart the web browser and the favicon of the site will be updated.

An alternative method, just in case the above method does not work, is as follows:

  1. Make a backup of the favicon.ico.
  2. Delete the favicon.ico from the web server.
  3. Run the web browser.
  4. In the address bar of the web browser, type in the exact URL pointing to the favicon.ico (for example, https://www.tipandtrick.net/favicon.ico), and hit Enter.
  5. A 404 error (page not found) is displayed.
  6. Reupload the favicon.ico to the web server.
  7. Reload the web page in the web browser, the updated favicon will be displayed.

While favicon placed in the root directory must have the name of favicon.ico, the standards introduced by W3C which use a link element shortcut icon or icon with a rel attribute in the section of the web page allows favicon with different file format, file name and location. Hence, changing the file name of favicon and using the link relation to specify the favicon can allow newly updated favicon to refresh and update for all visitors to the website on all web browsers, instead of just your browser.

To do so, add the following line to the <head> section of the web page (remember to change the URL and favicon file name as appropriate):

<link rel=”shortcut icon” href=”https://www.tipandtrick.net/favicon.ico” />

favicon-link-rel

To update the favicon used in the bookmark or favorite of the web browser, depending on web browser, you may need to delete the saved bookmark and re-add the bookmark again.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!