How to fix Wrong Favicon Size errors

How to fix Wrong Favicon Size errors

1. What the errors mean

In Tapita SEO Audit, there are 2 errors relating to favicon size. They are:
  1. Favicon size must be a multiple of 8px square: your favicon image is not a square image, or is not a multiple of 8px. For example, these favicon image sizes do not meet the requirement: 50x50px, 100x200px, 48x53px
  2. Favicon size should be at least 48x48px: your favicon image is smaller than 48x48px. For example: 8x8px, 16x16px

2. Why you should fix it

Your favicon image must meet all Google requirements to be eligible to show on Google Search results. For a full requirement guideline, please refer to this Google doc: https://developers.google.com/search/docs/appearance/favicon-in-search
Info
A favicon isn't guaranteed to appear in Google Search results, even if all guidelines are met.

3. How to fix this error

To ensure your favicon meet all requirements and do not have the above errors, you must make sure (1) it's a square image, (2) its dimensions are a multiple of 8px and (3) the size is 48x48px or larger.
Some examples of correct favicon size: 48x48px, 56x56px, 96x96px

Step 1: Re-size your favicon image

To download your current favicon image, go to Sales channels > Online Store > Edit theme > Theme Settings. The favicon is normally under the section "Favicon" or "Logo".


Once you have the favicon file, resize it to the correct image size using an image editor such as Canva or Image Resizer.

Step 2: Upload the resized favicon image

After you've resized your favicon to the correct image size, upload it at the same Favicon image field in Theme settings.

Step 3: Edit the favicon image size in theme code

Since Shopify themes often define a fixed favicon size in their code, even when you've uploaded a correct favicon image size, it will be reverted back to the theme default image size on live page. That's why you need to do this final step to ensure your favicon is loaded at its correct size.
Go to Sales channels > Online Store > Edit code.
Find the file "theme.liquid". And then search for "favicon" or "icon" in this file.

Then, edit the fixed favicon size into the correct favicon size, for example 48x48px.
Finally, save the file.
And that's it! You have successfully fixed the Wrong favicon size error!