How to Force a Refresh of favicon.ico

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. HTML Heading Levels and Sectioning Content
  2. How to Ask Good Technical Questions
  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 Force a Refresh of favicon.ico (this article)