How to Force a Refresh of favicon.ico

See HTML: Tips and Tricks for similar articles.

I ran into this problem while writing our Creating, Styling, and Validating Web Forms course. I was showing how browsers make an automatic request for "/favicon.ico" when first visiting a new site. However, once they've received the icon or determined it doesn't exist, they don't request it again on subsequent visits. That created a headache for me when trying to show how to deliver the icon. Unfortunately, it's not easy to force the browser to refresh the favicon.ico, but it's doable.

Follow these steps to for Google Chrome to make a new request for favicon.ico:

  1. Navigate to the folder that contains the Favicons file.
    • On Mac, that is /Users/YOUR_USERNAME/Library/Application Support/Google/Chrome/Default
    • On Windows, that is C:\Users\YOUR_USERNAME\AppData\Local\Google\Chrome\User Data\Default
  2. Delete the Favicons file.
  3. Shutdown Google Chrome.
  4. Reopen Google Chrome and open Google Chrome Developer's Network tab.
  5. Navigate to the site for which you were trying to get the new favicon.ico file. In the Network tab, you should see that the favicon.ico file was downloaded: Favicon downloaded

Written by Nat Dunn. Follow Nat on Twitter.


Related Articles

  1. How to Ask Good Technical Questions
  2. How to Properly Nest Lists in HTML
  3. How to Install and Use Visual Studio Code for Class
  4. How to Open HTML Files in Your Browser from Visual Studio Code
  5. How to Create a Simple HTML Document
  6. How to Work with Empty and Container Tags in HTML
  7. How to Mark Up a Citation in HTML
  8. How to Create an HTML Table
  9. How to Force a Refresh of favicon.ico (this article)