How do I force a favicon refresh?

Adapted from lineofbird's answer beloew, you can do the following:

1. Go directly to the favicon url in the address bar by typing in it's address e.g.

   • www.yoursite.com/favicon.ico
   • www.yoursite.com/apple-touch-icon.png
   • etc.

2. Navigate to the url by pressing Enter

3. Refresh with Ctrl+F5

4. Restart your browser (e.g. Chrome, Firefox)

To refresh your site's favicon you can force browsers to download a new version using the link tag and a query string on your filename.
This is especially helpful in production environments to make sure your users get the update.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

By destroying the file your browser uses to store old favicons, you can force new ones to be loaded.

1. Close your browser. Make sure there are no longer browser processes running (e.g. check Task Manager for chrome.exe or firefox.exe).
2. Navigate to where your browser stores user files:
   • For Chrome, go to the Chrome data directory.
   • For Firefox, go to the Firefox profile folder.
3. Delete the favicon cache.
   • For Chrome, remove Favicons and Favicons-journal
   • For Firefox, remove favicons.sqlite

This will almost definitely work. If not:

• Possibility 1: An update to your browser has changed how the favicon cache works. Please edit this answer with new instructions.
• Possibility 2: Your favicon problem has nothing to do with overaggressive caching. It may instead be a resource-loading problem – using Developer Tools, make sure the new favicon is downloading properly.

This answer has not been given yet so I thought I'd post it. I looked all around the web, and didn't find a good answer for testing favicons in local development.

In current version of chrome (on OSX) if you do the following you will get an instant favicon refresh:

1. Hover over tab
2. Right Click
3. Select reload
4. Your favicon should now be refreshed

This is the easiest way I've found to refresh the favicon locally.