HomeMethod

Knowledge

Web VitalsTechniquesSnippetsAnswersImpactsBottlenecks

Missing favicon and web performance implications

Quick catch up on favicons

What is a favicon?

A favicon, short for “favorite icon,” is a small graphic icon associated with a website.

It appears in the browser tab next to the website’s title or page name, bookmarks, and search results.

It also shows up on your search results on the left side of the Title/URL pair.

Favicons serve as visual identifiers for websites, helping users easily recognize and distinguish between different tabs when browsing the internet.

They are typically in the ICO file format, using the .icon file extension, and are crucial for branding and user experience.

Despite their small size, favicons play a significant role in web design and can cause performance impact in some cases.

Why is a favicon needed?

The need for a favicon arises from its role as a visual identifier for a website. Favicons serve several important purposes:

Branding

Favicon browser locations

Favicons help reinforce brand identity by providing a consistent visual representation across browser tabs and bookmarks.

They contribute to brand recognition and differentiation in a crowded online environment.

User Experience

Favicons enhance the browsing experience by making it easier for users to identify and navigate to specific websites among multiple open tabs.

They provide a visual cue that aids in tab management and site identification.

SEO Implications

While relatively minor, the presence of a favicon may have implications for search engine optimization (SEO).

Search engines may use favicons as part of their algorithms to assess website quality and relevance. Therefore, having a favicon in place could potentially contribute to improved search engine visibility.

Web performance implication of a missing favicon

The absence of favicons typically occurs only once per visit and may not be immediately noticeable unless stumbled upon by chance or deliberately sought out. As a result, they are often easily missed or overlooked.

How to check if there is a missing

The absence of a favicon on a website leads to a specific type of error known as a “404 error,” indicating that the requested favicon file could not be found.

You can check for it in difference locations:

Default browser’s favicon

Each browser has a default favicon icon that it uses if it can’t fetch a personalized one.

On Google Chrome for example, it looks like the following:

Firefox on the other hand will just not show the favicon on the left side of the page’s title.

Network tab

You can easily spot a 404 referred to a favicon.ico file.

Missing favicon showing a 404 error on the network tab

Browser’s console.

Missing favicon.ico showing a 404 error on the browser console

It will show that the browser failed to GET a favicon.ico file, which resulted in a 404 error.

In which case a missing favicon can degrade performance?

The issue with the missing favicon is the 404 overhead.

Waiting time recorded for a missing favicon

The problematic aspect is the duration it takes the server to respond by a 404 for a tiny file, see the 533 bytes size, a disproportional amount of time that might go to several seconds.

I would understand that amount of time if some programming language, like PHP was involved. But it beats why a server needs that long to figure out that a static asset is missing.

Why this overhead in response and issue for web performance?

The affect metric is the Largest Contentful Paint, but it’ subject to specific conditions.

Missing favicon impact on the Largest Contentful Paint

The condition is when exactly the browser discovered the favicon and starts loading it.

It’s important to note that by default, favicons are given high priority, potentially superseding the prioritization of the Largest Contentful Paint (LCP) image.

This can lead to an extended “load delay” and consequently impact the overall LCP score.

Resolving the Issue of a Missing Favicon on Your WordPress Website

To avoid any performance impact resulting from a missing favicon, the solution is to add one on your WordPress website.

Prepare the favicon

Make sure to take into consideration the following:

Design a distinctive graphic

Aim for a visually distinct and easily recognizable graphic for your favicon. Since favicons are small, intricate details may not be visible, so opt for a simple and limited design that effectively represents your brand or website.

Your logo without text, or the first letter of your logo would be a strong candidate for what can be added as favicon.

If the visual is too rich, opt of a color based favicon that reflects your brand’s main color.

Make sure it’s a square

Square images work best for favicons as they maintain clarity and consistency across different browser platforms.

Adding anything other than a square will make the favicon look distorted or disproportionate.

Select File Format

For compatibility across various browsers, it’s recommended to use either .ico or .png format for your favicon.

Recommended Sizes

While favicons can be created in various sizes, the following are commonly recommended sizes for optimal display.

Stick for the following sizes chart as it covers all that is needed for a website’s favicon:

  • 32×32
  • 192×192
  • 180×180
  • 270×270

Drop-in implementation of a favicon

The easiest was to fix the missing favicon issue is to just uploading your favicon.ico file to your WordPress website’s root folder.

The only requirement for this part is that the favicon needs to be a .ico file, and be exactly named favicon.ico.

You will need either an FTP access or your hosting panel’s file manager tool to your WordPress files.

Once done, refresh your website in a web browser. You should see your favicon displayed in the browser tab next to your website title.

Add the favicon using WordPress “Site Identity” setting (recommended way)

Another way to fix the missing favicon issue in WordPress is to use the Customized > Site Identify setting.

Follow these steps to get it done:

  1. Access the WordPress dashboard: Log in to your WordPress website’s admin area.
  2. Navigate to the Customizer: In the WordPress dashboard, go to “Appearance” and select “Customize.”
  3. Select “Site Identity”: Within the Customizer, look for the “Site Identity” section. Depending on your theme, this section may be located under different headings such as “Site Identity,” “Site Title & Logo,” or similar.
  4. Upload the favicon: Within the “Site Identity” section, you should see an option to upload a site icon or favicon. Click on this option to upload your favicon file.
  5. Adjust settings (optional): Depending on your theme and personal preferences, you may have the option to adjust the display settings for your favicon, such as its size or position.
  6. Save changes: Once you’ve uploaded your favicon and made any desired adjustments, be sure to save your changes using the appropriate button in the Customizer.
  7. Preview your site: After saving your changes, you can preview your website to ensure that the favicon is displaying correctly in the browser tab.

Add favicon manually

To manually add a favicon to your WordPress website, you will need to use the wp_head filter.

You should have your favicons files ready.

Following these steps to get it done:

WARNING: DON’T DO ANY OF THE BELLOW IF YOU ARE NOT COMFORTABLE USING PHP AND FAMILIAR WITH EDITING YOUR FUNCTIONS.PHP FILE.

  1. Access your theme’s functions.php file: Navigate to your WordPress theme’s directory and locate the functions.php file. You can access this file via the WordPress dashboard by going to Appearance > Theme Editor, or through FTP.
  2. Edit functions.php: Open the functions.php file for editing.
  3. Add code to register favicon links: Inside the functions.php file, add the following code snippet after changing the /path/to/ to reflect where the files are located:
Code
<?php
function custom_add_favicon() {
    ?>
    <link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-180x180.png" />
    <meta name="msapplication-TileImage" content="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-270x270.png" />
    <?php
}
add_action( 'wp_head', 'custom_add_favicon' );
  1. Save Changes: After adding the code, save the functions.php file.
  2. Clear Cache: Clear your browser cache and reload your WordPress website to see the changes. Your custom favicon should now be applied.

That’s pretty much it! Happy missing favicon fixing 🙂

Support our family now