How do I force a favicon refresh?

Simon_24039 0
Viewed 776322

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one. Problem is that I can not see it in any browser. The old favicon shows up or I get no favicon at all, but not my new one. I do not think this is a Grails issue per se, more an issue with favicons.

What is supposed to happen with favicons? How are they supposed to work? I have numerous bookmarks in my browser which have the wrong icons and they never seem to get refreshed. How do I force the server/browser to stop caching them? It seems pretty silly to always cache them given they are normally only 16x16. Why not just upload them with every visit to the page? It is not exactly a huge overhead.

favicon
32 Answers

Rename the favicon file and add an html header with the new name, such as:

<link rel="SHORTCUT ICON" href="http://www.yoursite.com/favicon2.ico" />
user_2185890

Depending on the browser they are handled differently, but typically I find that going to the default page of the site, and doing a hard refresh. CTRL + F5 (or āŒ˜ Command + SHIFT + F5 on macOS), will typically get it to update.

Mitchel_Sellers_132790

Well, overhead is overhead, but yes, not too big.

Also, browsers are sometimes "greedy" about cached files. You could clear cache and/or restart your browser and may see the change. If that fails though...

My cheapo solution is to:

  1. Visit your file at http://example.com/favicon.ico in your browser.
  2. Delete the favicon.ico from your webroot.
  3. Visit http://example.com/favicon.ico again in a browser, verify it's missing.
  4. Upload new one to your webroot.
  5. Visit http://example.com/favicon.ico again in a browser, verify it's the new one.

If that sequence doesn't work, then something else is going on.

user_630940

More than likely a web browser issue. You will have to delete your cache from your browser, close your browser and reopen it. That should fix it.

I don't believe your favicons will get refreshed on your favorites until you revisit that page, and assuming that you had previously cleared your browsers cache.

Your web browser will not go out to the internet to check for a new favicon on its own... thank goodness.

user_2667630

Chrome Version: 68.0.3440.106

Just restart Chrome (in your address bar): chrome://restart

user_52273650

When you request the favicon from Google, you can take a look at the response headers.

Last-Modified: Fri, 09 Jan 2009 16:35:02 GMT
Date: Thu, 01 Dec 2010 00:00:01 GMT
Expires: Fri, 01 Dec 2011 00:00:01 GMT
Cache-Control: public, max-age=31536000
Age: 7

If you put an "Expires: " header on the response, client browsers will re-request the icon after that timestamp. While doing active development, you could set the expires timestamp to a second or two in the future, and always have it fetch this, although that's a poor longterm plan.

user_1826900

This works for Chrome:

  • on Mac: delete file

    ${user.home}/Library/Application Support/Google/Chrome/Default/Favicons

  • on Windows: delete files

    C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons-journal

source

user_2856910

Just change this filename='favicon1.ico'

user_58508060

Also make sure you put the full image URL not just its relative path:

http://www.example.com/images/favicon.ico

And not: 

images/favicon.ico
user_201260

Here's how I managed it with a simply animated favicon and FireFox 3.6.13 (beta version) It will probably work for other versions of FireFox as well, let me know if it doesn't. It's basically artlung's solution, but addressing the .gif file as well:

  1. I opened by FTP program, downloaded my favicon.ico AND favicon.gif files,
  2. then DELETED them from my server's files.
  3. Then I opened them in my browser as artlung suggested: http://mysite.com/favicon.ico AND http://mysite.com/favicon.gif Once those addresses loaded and displayed 404 error pages ("page not found")
  4. I THEN uploaded both files back onto my server, and PRESTO - the correct icons were instantly displayed.
user_6106620

Use query string at the end of the file path. Query string variable value must be different with every build.

if previous build is:

<link rel="icon" href="http://example.com/favicon.ico?v=v1" />

OR

<link rel="icon" href="http://example.com/favicon.ico?v=stringA" />

then next build should be:

<link rel="icon" href="http://example.com/favicon.ico?v=v2" />

OR

<link rel="icon" href="http://example.com/favicon.ico?v=stringB" />

user_71867390

Please follow below steps to change app icon:

  1. Add your .ico file in the project.
  2. Go to angular.json and in that "projects" -> "architect" -> "build" -> "options" -> "assets" and here make an entry for your icon file. Refer to the existing entry of favicon.ico to know how to do it.
  3. Go to index.html and update the path of the icon file. For example,

<link rel="icon" type="image/x-icon" href="abc.ico">

Alternatively, rename your icon file with favicon.ico and replace it in the directory.

  1. Restart the server.
  2. Hard refresh browser and you are good to go.
user_102341370
Related