Refresh that Favicon.ico Like a Boss

I was working with a client last week and we had changed her website's Favicon - that little 16x16 pixel graphic that pops up next to the title in your tab and sticks to anything affiliated with your site? Yep, that one.

So the next day she calls me and asks if I'd made the change. Having done so, I immediately realized what the issue was: the cache.

When you go to a website for the first time, your browser will pick up that Favorites Icon and sock it away in the cache. If you make changes to the page itself, a simple refresh will do the job to see the new content. But since that only refreshes the page - not the whole site - if you make a change to your favicon.ico, you will not see that change.

You've got two options:

Clear the Cache

Every browser is different, but get in there and clear the cache. Refresh. That should do it. Not my preferred method.

Just Refresh the Icon

Unfortunately, I'm always riding over 5 tabs with logins set and clearing the cache may be quick, but the reset process to get back to where I was is anything but. So I use the following quickie:

• Go directly to the icon by typing it after the root in the address bar, generally "favicon.ico" - for example, http://www.ejmdesigns.com/favicon.ico. You'll see the icon.
• Refresh the image like you would a web page (refresh icon or F5).
• You're done!

So with that quick little trick, I can see myself or let a client confirm that the favicon.ico has been changed in seconds. And not have to log back into 5 different email accounts, 2 forums, Twimbow...