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.
Related
First, I apologize that I don't fully understand what's going on here. I am new to AngularJS and I am building an app that I am running on localhost:3000. I make changes to my files, and I refresh the localhost:3000 page.
But after a few times of doing this, my changes do not get passed to the server.
Upon inspecting the developer tools, I see that it is using an older version of the file that I have overwritten with new code. No matter how many times I refresh the page, the changes do not get passed to the server.
If I come back after a few hours, it gets all the changes like it should. But only the first time, because every time after that I have the same problem.
I've tried restarting the http-server, I've tried closing and opening the editor, closing and opening the tab, restarting my computer, but none of these fixes the problem permanently.
If you need any more information, I'll edit it into this question. Thanks!
Try clearing your browser cache
Either
ctrl + f5
or
Right click on refresh button and choose the last option (hard reload)
(only in chrome, I guess)
That's almost certainly a caching issue.
You need to look at the network traffic when the page is downloading.
How you do that will depend on the browser you use, but try pressing F12 for a start
Check the RESPONSE headers for anything "cache"
Also check for a Status code of 304 - "Not Modified"
That might reveal to you instructions from the server to the browser to cache the file for a few hours, or that the browser is being told the copy it has is up to date.
Alternatively it might be server side caching, in which case I can't help you much.
One other solution is to change the file reference to include the date modified as a query string.
e.g.
instead of
src="/scripts/myscript.js"
use
src="/scripts/myscript.js?dt={filemodifieddateformyscripts.js}"
When using chromium, in my angularjs application, when I click on any link, all my favicons get loaded.
My main HTML page contains 10 lines like
<link rel="icon" type="image/png" href="favicons/favicon-57x57.png" sizes="57x57">
with size going up to 192x192. This might be wrong as it's just an "adaptation of something I found somewhere".
However it doesn't explain, why all of them get loaded every time, does it? All the links just change the URL after the hashbang and usually lead to no server request at all, apart from fetching 10 favicons.
Even if I did everything wrong, the favicon is global for the whole site, so there's no need to reload it, right?
With a little fiddling with the headers I can serve them with any of 200 OK or 304 NOT MODIFIED or 200 OK (from cache), but whatever I do, they all always get requested.
This doesn't happen in Firefox.
What you described is a known issue of Chrome, related to the fact that Chrome doesn't support the sizes attribute.
Firefox also used to be impacted, and it still doesn't support sizes. However, it doesn't load all icons anymore. As far as I know, this is not documented anywhere. This may have been fixed as a side effect.
There is no "solution" but a workaround: declare less icons. I suggest you to use this favicon generator. The generated images and HTML were designed with this issue in mind. For example, it does't generate the 192x192 PNG icon by default, because Android Chrome (the browser it is dedicated to) primarily uses the Webb App manifest. Full disclosure: I'm the author of this service.
For god knows what reason, Office Add-ins on my local word client is Caching a html file that I dynamically load in (through angular) and refuses to give me a way to remove it from the cache. My only solution is to rename the file and force it to look for a new one.
I know it's a caching issue and not a code issue because when I load the app up inside the web-client it always gets the new version and not the old version.
Please help, renaming files every time I change them is stupid and time consuming
I had the same, not with Angular but JS add office add ins, cut off my webserver and still was able to load the HTML!
For me what worked was the "Clear" button under Trust Centre -> Trusted Add-in catalogues.
Perhaps this is HTML5 - something to do with you manifest, something like this in your HTML, or the equivalent automatically occurring?
`<html.... manifest="/manifest.appcache">
There are loads of suggestion for how to prevent this I haven't tried it yet, but this looks like it contains reasonable examples to test - if imparted in an unusual manner!
http://alistapart.com/article/application-cache-is-a-douchebag
Second option which is now working a treat for me!
In internet Explorer go to Internet Options -> General tab -> Settings -> Temporary Internet files -> tick "Every time I visit the webpage". Naturally this only works for locally hosted sideloading apps.
Oddly enough IE seems to be the object loaded in Office 2016, not Edge, although I have had an Edge message appear in my side-load space, I'll try and grab a shot of it next time I see it (it was during an error it appeared!).
There are a few tricks that might work like this:
What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?
Or in CSS like this:
https://css-tricks.com/can-we-prevent-css-caching/
Today (Win 10 1903 and newest Office 2016) Office AddIns are using Edge as WebViewHost. The WebViewHost seems to store the cached files here:
dir /s %LOCALAPPDATA%\Packages\Microsoft.Win32WebViewHost_cw5n1h2txyewy\AC\#!123\INetCache\
In our case we are using Azure App Service (IIS) as backend for our Office AddIn.
And we added the following web.config setting to let the client re-validate all cached files on each access:
...
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="0.00:00:00" cacheControlCustom="must-revalidate" />
</staticContent>
...
Of course, the cacheControlMaxAge may be adjusted to your needs.
Hitting Ctrl + Shift + F5 helped for me.
An easy workaround for this would be to append some random query string at the end of the url, thus making sure your browser has a cache miss.
For example, instead of getting the file http://myaddin/myfile.html, append a big enough random query string parameter so that you instead query for http://myaddin/myfile.html?cache=s98sj398nf03984jf3498n.
I am working on a site: greatlakesecho.org When I try to edit a post, the content just disappears from the visual editor. I am running the latest version of Word Press but this happened on the previous version as well. I am using the Project Largo theme with the site.
The site was recently migrated from to a new host and has gone an overhaul into a responsive design. This first started happening when I changed the character encoding to remove odd symbols from the posts. I was successful in that by changing it to utf16. At this point only older posts that were created before the migration would disappear when I clicked edit. I have since updated to the latest version of Word Press and it happens to every post.
I've already made sure the wp-config has the correct encoding.
It happens with all themes.
Tried deactivating all plugins.
I also see this when enabling debuggin:
WordPress database error: [Table 'greatlak_wp776.wp_itsec_lockouts' doesn't exist]
SELECT lockout_host FROM wp_itsec_lockouts WHERE lockout_active=1 AND lockout_expire_gmt > '2014-04-22 19:52:36' AND lockout_host='35.9.132.246';
WordPress database error: [Table 'greatlak_wp776.wp_itsec_lockouts' doesn't exist]
SELECT lockout_user FROM wp_itsec_lockouts WHERE lockout_active=1 AND lockout_expire_gmt > '2014-04-22 19:52:36' AND lockout_user=93;
edit: Extra Info
Wordpress has this documented on their documentation. It can be found here, of course you will be converting to utf16 instead of utf8. http://codex.wordpress.org/Converting_Database_Character_Sets
Check your wp-config file's encoding, make sure it's set to utf-16
Activate a new theme, see if that still happens. If so, it was a theme issue.
Deactivate all plugins, see if it still happens. If so, reactivate 1 by 1 and see when it happens again.
Also, check your browsers console for any errors
I had to remove the Navis Media Credit plugin manually. I searched through the plugins folder using WinSCP and apparently when I was removing all the plugins using the WordPress admin panel, this one wasn't actually getting removed. This plugin was conflicting with the theme I am using and I learned this by deleting all the plugins and using one of the default WP themes.
It may be a Chrome Extension. Here is what I experienced...
In Chrome - a Wordpress site loads the Add New Post screen which appears to get overwritten - this happens after typing a few characters (not immediately) in the title or body. Updated theme, removed plugins, no change. At one stage noticed a bug in html2canvas.js but now cannot reproduce.
Tested in Firefox, works fine.
Traced to a Chrome Extension - Screen Shader - F.lux for Chrome 1.7.720 - one that removes BLUE from Chrome display (for night work). It probably does use use html2canvas. When it is deactivated, Chrome again behaves normally. Tried with another plugin "Blue Light Filter Guard" - not as well featured - but it does not trigger the bug.
May not be the same as your problem, but try in Firefox and check your Chrome Extensions.
I'm managing several DotNetNuke portals (as well as the main hosting itself). All of the portals have the default DNN icon in the address and when they're bookmarked. I want to have a custom favicon.!
It's the icon on the left side of this:
(source: dotnetnuke.com)
I've tried clobbering the default favicon.ico file in the root directory (where the web.config file is located). I've deleted, I've replaced, I've restarted the browser, I've bounced IIS. None of that works.
Has anyone come across a solution for the wonky favicon problem in DNN?
Times have changed in the DotNetNuke world since this question was answered. Now, the favicon is much easier to change.
Go to Site Settings underneath the Admin menu, and scroll down to Appearance. There should be an option to upload a new icon, or use one currently on your site.
You need to place the favicon in each portal's own folder (Portals/0/favicon.ico). Make sure you delete the icon in the root of your website, as that will (supposedly) override any portal-specific favicons and apply to all portals.
Have a look here as well: http://www.dotnetnuke.com/Community/Forums/tabid/795/forumid/108/threadid/183454/scope/posts/threadpage/3/Default.aspx.
Favicons are notorious for being very aggressively cached by the browser. Sometimes even clearing the cache doesn't even do the trick, it can drive you mad. Clear cache, shift-refresh etc etc...
Have you tried clearing your browser cache? Or try using a browser on a different machine or just a different browser (FF versus IE for isntance). The favicon will cache and drive you crazy when it actually has changed.
The other thing to check is to see if you have more than one portal running on your DNN instance. If you have more than one portal, you can do a different favicon for each portal by putting the favicon in portal root and not the main web root.
http://www.hanselman.com/blog/FavIconicoCanBeABandwidthHog.aspx
Worth reading for performance purposes.