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 a fundamental mechanism that is utilised by browsers in order to store and serve local static copies of files, allowing improved performance and reduced load times when users revisit pages. Caching vastly improves loading speeds and decrease the bandwidth burden on the host server as it stores static Web resources like images, stylesheets, scripts.

Favicons use browser caching to reduce load times and minimise unnecessary requests to the server. When a user visits your website for the first time, their browser downloads the favicon and stores a local copy. On future visits the browser requests the content from the cache rather than taking it from the server again.

Where favicons differ is how browsers choose to manage that cache. While HTTP headers such as Cache-Control and Expires can tell browsers when to refresh a resource, browsers can also apply different caching and storage rules for favicons compared to standard web content. They are often cached much more aggressively as there is less need to revalidate them as frequently as other website assets.

Why don’t favicons update immediately?

Updating a favicon can sometimes take longer than updating other website assets because browsers cache this asset more aggressively as they generally assume favicons change very rarely.

Additionally, browsers may continue displaying their existing cached copy instead of immediately downloading the updated files until the cache is manually cleared or expires. Sometimes this occurs when you upload a new favicon using the same filename and URL, browsers may continue displaying their existing cached copy instead of immediately downloading the updated file.

The reliable solutions to ensuring your favicon loads the updated favicon is to upload the new version with a different file name to let the browser know it’s a new resource. And to clear caches manually to make the server refetch the latest content.

Small details make a big difference online. From favicons and browser caching to website performance and user experience, getting the technical details right helps your website work harder for your business.

If you’d like to learn more about caching, take a look at our guide to clearing your browser cache, cookies and history. And if you need support optimising your website or solving a technical issue, our team is always happy to help.