All you need to know about favicons
What is a favicon?
The term ‘favicon’ is short for “favourite icon”, and is a small graphic that is representative of a website or a web page. For example, our Fever Flame acts as a representation for This is Fever’s website. It is typically sized either as a 16×16 or 32×32 pixel image, but can sometimes be a larger size, as modern standards allow this so that high-resolution displays can be accommodated.
Favicons act as visual identifiers for websites and are displayed in various locations. These include browser tabs, bookmark bars, some address bars, and the browser history. By appearing in these locations, favicons allow users to remember which site each of their tabs, bookmarks, and previously visited pages belong to, which aids navigation.
How are favicons cached in browsers?
Caching is an important mechanism that is utilised by browsers in order to store local copies of files, allowing improved performance and reduced load times when users revisit pages. Web resources like images, stylesheets, scripts, and (of course) favicons are all subject to caching. However, there are some slight differences to the way that favicons are cached.
As with standard caching, when a user first visits a website, the favicon is requested by the browser and stored in the browser’s cache. When a user revisits the site, the browser takes the favicon from the cache rather than taking it from the server again, as this is quicker. However, the difference comes when you look at the duration of the caching.
Browsers often cache favicons for an extended time period, compared to other resources. HTTP headers sent by the server, such as Cache-Control and Expires, influence the caching duration by specifying how long a resource should be cached for. However, the internal caching policies of browsers can potentially override these headers, and this leads to unpredictable caching behaviour for favicons.
Why don’t favicons update immediately?
Due to these factors impacting the way that browsers cache favicons, there is sometimes a delay between the time that a favicon is changed, and the time that it updates on the website.
Favicons are small, and unlikely to change frequently, so many browsers choose to cache them quite aggressively. This means that, sometimes, an updated favicon won’t appear on the website until the cached copy of the previous favicon expires or is manually cleared.
Additionally, favicons are often not rechecked against the server unless directly instructed to do so – unlike with other resources. Therefore, a browser will assume that a favicon is unchanged unless told otherwise. This will often happen when an updated favicon is uploaded with the same filename and path as its predecessor, because the browser will see that the name and location haven’t changed, and assume that the favicon is unchanged also.
A final factor contributing to the delayed updating of favicons is that browsers do not see them as being critical resources, so they don’t prioritise re-fetching them.
The combination of these factors means that the updating of favicons in the browser cache often takes a backseat to the re-caching of other resources. This can lead to frustration from both web developers and their clients, as they expect to see changes reflected quicker, but ultimately it is not too big of an issue, as the favicon will update, albeit slightly later than desired.
For more information on caching, feel free to check out our article on clearing your browser cache, cookies and history, or contact us directly to get in touch with any questions you might have regarding favicons, caching, or any of our array of design and development services.
