I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching
Related
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.
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" />
Adapted from lineofbird's answer beloew, you can do the following:
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.
Navigate to the url by pressing Enter
Refresh with Ctrl+F5
Restart your browser (e.g. Chrome, Firefox)
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:
Hover over tab
Right Click
Select reload
Your favicon should now be refreshed
This is the easiest way I've found to refresh the favicon locally.
By destroying the file your browser uses to store old favicons, you can force new ones to be loaded.
Close your browser. Make sure there are no longer browser processes running (e.g. check Task Manager for chrome.exe or firefox.exe).
Navigate to where your browser stores user files:
For Chrome, go to the Chrome data directory.
For Firefox, go to the Firefox profile folder.
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.
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" />
If you use PHP you could also use the MD5-Hash of the favicon as a query-string:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />
This way the Favicon will always refresh when it has been changed.
As pointed out in the comments you can also use the last modified date instead of the MD5-Hash to achieve the same thing and save a bit on server performance:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />
In Chrome on Mac OS X one can remove file with favicon cache
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
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.
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:
Visit your file at http://example.com/favicon.ico in your browser.
Delete the favicon.ico from your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's missing.
Upload new one to your webroot.
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.
ON MAC:
⌘ + Shift-R or hold down Ctrl and click the reload button in the browser.
For Internet Explorer, there is another solution:
Open internet explorer.
Click menu > tools > internet options.
Click general > temporary internet files > "settings" button.
Click "view files" button.
Find your old favicon.ico file and delete it.
Restart browser(internet explorer).
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.
Try Opening In a New Tab
I tried many of the things above (resetting cache, refreshing, using the link tag, etc), I even checked my .htaccess file and reset the ExpiresByType variable.
But this is what finally worked for me in both Chrome (25.0.x) and Safari (6.0.1):
Flushing cache
Hard-linking the favicon with the <link> tag
Navigating to mysite.com/favicon.ico
Opening mysite.com in a new tab
(Up until step 3, refreshing in the same tab kept reproducing the old icon.)
Chrome Version: 68.0.3440.106
Just restart Chrome (in your address bar):
chrome://restart
For Chrome on macOS, if you don't want to delete the entire Chrome favicon database as suggested already here, you can delete only the conflicting icons:
Quit Chrome
Load the favicons database (using sqlite here):
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Search for the file that is causing issues
select * from favicons where url = 'http://mysite.dev/favicon.ico';
If you are happy with the output:
delete from favicons where url = 'http://mysite.dev/favicon.ico';
Alternatively, you can search for a pattern that you can reuse to delete multiple entries:
Search for multiple files that are causing issues
select * from favicons where url like 'http://mysite.dev%';
And again if you are happy with what this returns:
delete from favicons where url like 'http://mysite.dev%';
Type .exit and hit return to quit sqlite
Restart Chrome
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.
Chrome's favicon support is buggy - disregard this answer
I wrote this answer under the impression that this is what it took to refresh favicons in Google Chrome. However, it turns out that this only works for the first five minutes or so, until the icon gets irretrievably lost in Chrome's history synchronization.
Original answer
You don't have to clear your cache, restart your browser, or rewrite your HTML - you just need to change the icon's URL, once, so that the browser will forget the previously-cached icon.
Assuming that you've defined your icon via <link> elements in your page's <head>, you can do that by running this standard-JS one-liner in the console:
[].slice.call(document.querySelectorAll('head>link[rel$="icon"]')).map(function(ln){ln.href+='?v=2'});
For a more advanced implementation of this that can automatically do this for end users in production, see freshicon.js.
I recently restored my bookmarks and was looking for a way to restore the FavIcons without visiting each page. My search brought me to this thread.
For those in a similar circumstance merely download the FAVICON RELOADER addon. Once installed you will find the "reload favorite icons" command in your BOOKMARKS dropdown menu.
https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/?src=api
If you are using PHP .. then you can also use this line.
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=<?php echo time() ?>" />
It will refresh your favicon on each page load.
If you are just interested in debugging it to make sure it has changed, you can just add a dummy entry to your /etc/hosts file and hit the new URL. That favicon wouldnt be cached already and you can make sure you new one is working.
Short of changing the name of the favicon, there is no way you can force your users to get a new copy
This is a workaround for the chrome bug: change the rel attribute to stylesheet! Keep the original link though. Works like a charm:
I came up with this workaround because we also have a requirement to be able to update customer's sites / production code and I didn't find any of the other solutions to work.
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
I know this is a really old question but it is also one that is still relevant, though these days applies only to mozilla. (I have no idea what explorer does coz we don't code for non standard browsers).
Chrome is well behaved if one includes an icon tag in the header.
Although mozilla are well aware of the issue, as usual, they never fix the annoying small stuff. Even 6 years later.
So, there are two ways of forcing an icon refresh with firefox.
Have all your clients uninstall firefox. Then re-install.
Manually type just the domain in the url bar - do not use http or www
just the domain (mydomain.com).
This assumes of course that your ns records include resolution for the domain name only.
Simple,
1: I don't want to fiddle around with codes (ps my site builder doesn't use codes, it uses "upload file" button and it does it itself)
2: I tried the CTRL+F5 and it doesn't work for me so....
I HAVE A SOLUTION:
IE: Clear All browser history and cookies by going to the settings cog O
Chrome: Go to the menu in the top right corner below the X that looks like a = , then go to settings, history, CLEAR BROWSING DATA and check all of the boxes that apply (I did history, cookies and empty the catche from the beginning of time)
Just change this filename='favicon1.ico'
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:
I opened by FTP program, downloaded my favicon.ico AND favicon.gif files,
then DELETED them from my server's files.
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")
I THEN uploaded both files back onto my server, and PRESTO - the correct icons were instantly displayed.
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
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" />
Close all Google Chrome windows
Adding one more answer that I do not see here. I tried flushing my Google Chrome cache, reloading the tab, refreshing the tab, opening in a new tab, and even opening a new window. Nothing worked for me. What did finally work for me was to close all Google Chrome windows (if you're like me, you probably have 3+ windows with a bunch of tabs, and maybe even have more windows/tabs in another desktop, don't forget those!). Once all of your windows are closed, then try opening a fresh new window and reloading your site.
Hope this helps someone!
Bonus tip: If you'd like to get all your windows back, you can press "Ctrl + Shift + Up Arrow + T" to get your windows and tabs back.
If the problem continues despite of applying some steps above:
try to restart the IIS Server.
I am totally lost, don't even know what to google anymore, maybe someone can push me in the right direction here:
I have a WildFly Server running, and I did some changes to a JavaScript file.
As soon as I republished the new .war file to the server, the changes caused by the new js file were visible in my browser on the computer.
Yet, as I opened my phone to check the results there, nothing happened. I cleared the cache and, of course, now the changes appeared. On both, computer and phone, I was using Chrome.
I put the HTTP Header "Cache-Control" with "no-cache" as value, but that didn't do anything.
I use NGINX in front of the WildFly, but I checked and NGINX does not filter out that header.
I also tried versioning the files. WildFly offers a very neat solution for that, if you stumble across this question, check out this post to see how that is done. But this didn't do the trick for me either.
Does anybody know what might be going on here?
Thanks for any help or comments!
It ended up being a timing issue.
The browsers on the phones eventually reloaded the current files, and since then changes are visible immediately.
The script trick with the version number works like a charm. So do the headers ("Cache-Control: no-cache"). Both together are probably pretty fail safe. One can't do it all with version numbers, only the includes.
Thanks #Azametzin for the input!
If the cache cleaning through "Cache-Control" is failing somehow, another solution would be to set a new version for JavaScript file. For example:
<script type="text/javascript" src="script.js?v=0.01"> // any version number you want
I'm not very used to WildFly Server, but I believe you could set a function for creating a random number that will be used as the new version everytime the page is refreshed.
Something like: <script type="text/javascript" src="script.js?v={random number here}">
Hope it gives you a direction to follow.
Not all browser which cache-control supports in some browsers in Android device (Not Chrome Android), because the cache-control still works in android device. Some browser which taken from Android doesn't work.
I have a localhost instance I run on a given port, and when developing a site for another client, my previous clients favicon still shows in the tab even though the client has no favicon. How do I remove my previous client's favicon from the browser/server? It does it Safari, Chrome (OS X), and Firefox. I've tried the force refresh (Mac equivalent of Ctrl + F5) to no avail. Any help would be appreciated.
Thanks.
Clear the browser's cache: Ctrl-Shift-Delete (Cmd-Shift-Delete), select what to clear, and for what period of time. Because the new website has the same host as the old one, browser may still think you're on the previous site and display your cached icon.
Or just add a favicon to the new site.
You can force a browser to download new instances of similarly named files by adding a version to them in the form of a query parameter, and updating the version as needed throughout development.
<link rel="icon" href="localhost:4200/favicon.ico?version=2" />
Other than that, closing the tab, and in some cases restarting the browser works if force refreshing the cache didn't.
These are typically stored in with the temp internet files on your server. Clearing the history, cookies, and meta-data should take care of this.
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.
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" />
Adapted from lineofbird's answer beloew, you can do the following:
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.
Navigate to the url by pressing Enter
Refresh with Ctrl+F5
Restart your browser (e.g. Chrome, Firefox)
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:
Hover over tab
Right Click
Select reload
Your favicon should now be refreshed
This is the easiest way I've found to refresh the favicon locally.
By destroying the file your browser uses to store old favicons, you can force new ones to be loaded.
Close your browser. Make sure there are no longer browser processes running (e.g. check Task Manager for chrome.exe or firefox.exe).
Navigate to where your browser stores user files:
For Chrome, go to the Chrome data directory.
For Firefox, go to the Firefox profile folder.
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.
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" />
If you use PHP you could also use the MD5-Hash of the favicon as a query-string:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />
This way the Favicon will always refresh when it has been changed.
As pointed out in the comments you can also use the last modified date instead of the MD5-Hash to achieve the same thing and save a bit on server performance:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />
In Chrome on Mac OS X one can remove file with favicon cache
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
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.
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:
Visit your file at http://example.com/favicon.ico in your browser.
Delete the favicon.ico from your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's missing.
Upload new one to your webroot.
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.
ON MAC:
⌘ + Shift-R or hold down Ctrl and click the reload button in the browser.
For Internet Explorer, there is another solution:
Open internet explorer.
Click menu > tools > internet options.
Click general > temporary internet files > "settings" button.
Click "view files" button.
Find your old favicon.ico file and delete it.
Restart browser(internet explorer).
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.
Try Opening In a New Tab
I tried many of the things above (resetting cache, refreshing, using the link tag, etc), I even checked my .htaccess file and reset the ExpiresByType variable.
But this is what finally worked for me in both Chrome (25.0.x) and Safari (6.0.1):
Flushing cache
Hard-linking the favicon with the <link> tag
Navigating to mysite.com/favicon.ico
Opening mysite.com in a new tab
(Up until step 3, refreshing in the same tab kept reproducing the old icon.)
Chrome Version: 68.0.3440.106
Just restart Chrome (in your address bar):
chrome://restart
For Chrome on macOS, if you don't want to delete the entire Chrome favicon database as suggested already here, you can delete only the conflicting icons:
Quit Chrome
Load the favicons database (using sqlite here):
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Search for the file that is causing issues
select * from favicons where url = 'http://mysite.dev/favicon.ico';
If you are happy with the output:
delete from favicons where url = 'http://mysite.dev/favicon.ico';
Alternatively, you can search for a pattern that you can reuse to delete multiple entries:
Search for multiple files that are causing issues
select * from favicons where url like 'http://mysite.dev%';
And again if you are happy with what this returns:
delete from favicons where url like 'http://mysite.dev%';
Type .exit and hit return to quit sqlite
Restart Chrome
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.
Chrome's favicon support is buggy - disregard this answer
I wrote this answer under the impression that this is what it took to refresh favicons in Google Chrome. However, it turns out that this only works for the first five minutes or so, until the icon gets irretrievably lost in Chrome's history synchronization.
Original answer
You don't have to clear your cache, restart your browser, or rewrite your HTML - you just need to change the icon's URL, once, so that the browser will forget the previously-cached icon.
Assuming that you've defined your icon via <link> elements in your page's <head>, you can do that by running this standard-JS one-liner in the console:
[].slice.call(document.querySelectorAll('head>link[rel$="icon"]')).map(function(ln){ln.href+='?v=2'});
For a more advanced implementation of this that can automatically do this for end users in production, see freshicon.js.
I recently restored my bookmarks and was looking for a way to restore the FavIcons without visiting each page. My search brought me to this thread.
For those in a similar circumstance merely download the FAVICON RELOADER addon. Once installed you will find the "reload favorite icons" command in your BOOKMARKS dropdown menu.
https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/?src=api
If you are using PHP .. then you can also use this line.
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=<?php echo time() ?>" />
It will refresh your favicon on each page load.
If you are just interested in debugging it to make sure it has changed, you can just add a dummy entry to your /etc/hosts file and hit the new URL. That favicon wouldnt be cached already and you can make sure you new one is working.
Short of changing the name of the favicon, there is no way you can force your users to get a new copy
This is a workaround for the chrome bug: change the rel attribute to stylesheet! Keep the original link though. Works like a charm:
I came up with this workaround because we also have a requirement to be able to update customer's sites / production code and I didn't find any of the other solutions to work.
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
I know this is a really old question but it is also one that is still relevant, though these days applies only to mozilla. (I have no idea what explorer does coz we don't code for non standard browsers).
Chrome is well behaved if one includes an icon tag in the header.
Although mozilla are well aware of the issue, as usual, they never fix the annoying small stuff. Even 6 years later.
So, there are two ways of forcing an icon refresh with firefox.
Have all your clients uninstall firefox. Then re-install.
Manually type just the domain in the url bar - do not use http or www
just the domain (mydomain.com).
This assumes of course that your ns records include resolution for the domain name only.
Simple,
1: I don't want to fiddle around with codes (ps my site builder doesn't use codes, it uses "upload file" button and it does it itself)
2: I tried the CTRL+F5 and it doesn't work for me so....
I HAVE A SOLUTION:
IE: Clear All browser history and cookies by going to the settings cog O
Chrome: Go to the menu in the top right corner below the X that looks like a = , then go to settings, history, CLEAR BROWSING DATA and check all of the boxes that apply (I did history, cookies and empty the catche from the beginning of time)
Just change this filename='favicon1.ico'
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:
I opened by FTP program, downloaded my favicon.ico AND favicon.gif files,
then DELETED them from my server's files.
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")
I THEN uploaded both files back onto my server, and PRESTO - the correct icons were instantly displayed.
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
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" />
Close all Google Chrome windows
Adding one more answer that I do not see here. I tried flushing my Google Chrome cache, reloading the tab, refreshing the tab, opening in a new tab, and even opening a new window. Nothing worked for me. What did finally work for me was to close all Google Chrome windows (if you're like me, you probably have 3+ windows with a bunch of tabs, and maybe even have more windows/tabs in another desktop, don't forget those!). Once all of your windows are closed, then try opening a fresh new window and reloading your site.
Hope this helps someone!
Bonus tip: If you'd like to get all your windows back, you can press "Ctrl + Shift + Up Arrow + T" to get your windows and tabs back.
If the problem continues despite of applying some steps above:
try to restart the IIS Server.
I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.
I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.
I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.
I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.
Help is much appreciated.
Other similar questions:
Javascript features work on localhost but not when deployed to Heroku
twitter bootstrap drop down suddenly not working
The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:
<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>
I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encoding to UTF8 (I think this was the real problem/solution)
I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:
Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
Try on different browsers just in case something strange is going on.
Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.
I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .
The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.
Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).
You can also turn Debug off on the local machine and you should see the same issues.
Late to the party but I found out that my issue was that the Bootstrap.js was not being pushed out during deployment.
In addition to the very useful suggestions by #dialex and #Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.
I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.
I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!
I'm using Codeigniter. I solve these issues by changing my base_url in config.php.
Previous :
$config['base_url'] = 'http://localhost/public_html';
Changes to :
$config['base_url'] = 'http://(my intranet server ip adress)/public_html';
Had the same problem
In my .html files I had this line
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
After changing it to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Everything works fine. I guess that internally webjars have http and changing css link to start with https solved my problem