New/update favicon per page

Question

Thought someone might know of a script out there, or know how to update the favicon per section of a site. There's strong colours running through each section of a build I'm working on and I thought it might be a nice UI touch to update the colour of the favicon depending on what section you're on. These could be an array of icons, but something that would force a change, rather than just adding the favicon link rel in each section.

I know Gmail can update the favicon with un-read/new emails.

Any help/ideas would be appreciated.

Cheers, R

Answer 1

You're on the right track with using the link rel's on every page, but the trick to forcing the favicon refresh is to append a number at the end of the icon file as a parameter that's always changing (time is the safest bet).

Example with php:

<?php
    echo '<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?t=' . time() . '" />';
?>

Doing this makes the browser think the file is new every time it sees it, thus avoiding the caching issue. I hope this points you in the right direction!

Answer 2

You can have a different favicon per page. You'll just need to add the following code to each HTML file:

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