How to force an update of cached files, images, favicon
File caching
Browsers automatically save webpage images, stylesheets, favicon, and other files directly on your computer – this is called caching. Caching lets you visit the same site multiple times without having to download those files over and over again – you save time, the hosting company saves bandwidth, and the world makes sense again.
Problems with caching
Caching poses a problem when a website makes changes to certain files. For instance, you may change some styles in the CSS or replace the favicon. Since the file typically retains the same filename, the browser has no way of knowing it has been updated. Our clients revisit our site daily looking for remote technical support, so we need to be able to force their browsers to grab updated stylesheets as we expand our site.
Forcing browsers to update cached files
Luckily, there is a simple way to automatically notify browsers when you’ve made changes to your files by passing a URL parameter. Using the ver tag parameter, we can increment the version number each time we want to force users to download the new files.
Simply add the following bit of markup:
?ver=x.x
This technique works when requesting information such as an href in HTML or src in CSS. Simply increment the number each time you make changes to ensure browsers download the latest version.
Force cached favicon to refresh
< link rel="shortcut icon" href="http://immense.net/favicon.ico?ver=2.0" />
Force cached stylesheet to refresh
< link rel="stylesheet" href="http://immense.net/style.css?ver=1.17" media="screen" />
Force cached backround image to refresh
If you use background images in your stylesheet, use this technique directly in your stylesheet.
#navLogo {background:transparent url(images/sprite.png?ver=1.3) no-repeat 0 0;}
*Update December 16, 2011
Just to be clear, you can put anything you want after the ? to force the browser to recognize it as a different instance of the file. I stick with ver=1.3 or v=1.2 because that works for me, but feel free to put anything you want.
Thanks for the info.. great tip!
That might be a nice workaround to the aggressive caching-behaviour (especially the favicons). However: technically speaking this solution doesn’t depend on a “tag”, it’s an additional URL-Parameter, more specific a GET-Parameter, but not a tag in the meaning of the word. The article is very good – nothing to add.
Thanks, Rene. I sure did reference it incorrectly and the article is updated to reflect that.
Hey good tip, but if you add a parameter to the static file it won’t be cached at all, but this is not desirable for resources that are not changed frequently.
A better approach is to modify the file path (or name) by introducing a hash which will change when the file is modified; then in the apache configuration you can strip that value to get the right file path (or name). See here: https://developers.google.com/speed/docs/best-practices/caching?hl=es-419#LeverageBrowserCaching
@alejandro, thanks for the tip!