Favicon not appearing after 6 months

Technical Q&A
1

Hi,

As the title says. My Favicon (SVG) set up in Shopify refuses to appear on google search after months. The page was indexed and reindexed a few times for changes made, but the favicon is not there still.

Any advice or idea why it could be so?

Thanks!

4

Hi Nathalia,

Appreciate the quick reply.

That would be great! Not sure what the SVG formatting means, it’s SVG, I am not technical. But I would appreciate help with “linked in Shopify’s theme settings, and accessible via HTTPS”.

Thanks!

7

How can I check the link definition of the favicon in the theme’s code? Does this differ per theme?

Thanks.

11

Now this is certainly interesting. 3 profiles trying to solve your simple issue (take you to private messaging), not one of them asked for the website url (something a real person would ask) in order to see the html code to check if the favicon is valid…

12

Yep, I finally understood it with that DM message and email, lol. Checked their accounts and yeah… lol

13

Sorry man. This place in infested. The best thing you can do is go to Online Store → Three Dots → Edit Code and check for yourself.

Once you’re there, go to the left hand panel and click on the Explorer button, minimize everything so you can see what you’re looking at. Click on Layout → Theme.liquid

Press Cntrl F (find) and search “favicon” or “icon”

It should look like

 <link rel="icon" type="image/png" sizes="16x16" href="//Your-Store.com/YourFaviconFile.png">

But sometimes the href points to “settings.favicon” or something similar.

You can also do this on the Website: Right-Click, click View Page Source, Cntrl F, Search “favicon”

14

SVG favicon can be tricky.

Not all browsers support them, some of the supporting ones require them served in specific way.

Have not tried it myself yet, but have a look at SVG Favicons: Why They're Better and How to Actually Use Them - Favicon.im Blog
Especially the “Implementing SVG Favicons the Right Way”

Also see SVG favicons | Can I use... Support tables for HTML5, CSS3, etc

15

Hi @aDucki ,
Google does NOT reliably show SVG favicons in search results, even if Shopify allows you to upload one.

Use a PNG instead of SVG

Upload a PNG favicon in Shopify:

  • Size: 48Ă—48 or 96Ă—96
  • Transparent background
  • Simple, high-contrast design
16

Yep, did that. Waiting to see if it changes.

Thanks.

18

If anyone stumbles upon this post - changing to PNG and requesting reindexing (google search console) seems to solve the issue.

Cheers,

aDucki