Why is my favicon not displaying on my site?

Shopify Discussion

Topic summary

Favicon not displaying on a Shopify storefront after previously working. The current theme.liquid tag had an empty href, preventing the icon from loading.

Key points and guidance:

  • Root cause identified as an incorrect href value in the favicon tag. The icon must be hosted and referenced correctly.
  • Recommended fix: upload the favicon file to the theme’s Assets folder and update the theme.liquid to point to that file (via the Assets URL) or use the theme setting.
  • An alternative solution shared: use the theme setting (settings.favicon) and output a PNG favicon with Shopify’s image_url filter at 32×32 px inside a conditional, replacing the old code. A member reported this worked for them.

Artifacts central to the thread:

  • Screenshots showing how to upload to the Assets folder and a snippet view of the updated code.

Status:

  • The original poster confirmed uploading the favicon to Assets and asked if their updated code is correct, but did not confirm the final result.
  • A working snippet was provided by another member; resolution for the original poster remains unconfirmed.
Summarized with AI on December 20. AI used: gpt-5.
1

Our favicon used to show but it hasn’t been showing for a while now. I followed some advice on other discussions and pasted the below in the href of the favicon code in theme.liquid:

I also made sure my favicon image I uploaded to the site was 96x96 and png.

Favicon is currently still not showing on our site: https://www.twentytwoshop.com/

Any suggestions?

2

Hi @Chris_Whalley . Wrong value in href attribute.
Upload your icon to assets folder. In theme code add such part (instead of current):

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

3

Thanks. How do I upload to assets folder?

4

2024-02-06_13-03.png
2024-02-06_13-03.png641×703 51.7 KB

5

Thanks just done that. This is what the coding currently looks like - is this correct?
Capture.PNG

6

Did you get this fixed? I just fixed mine with the below code:

{%- if settings.favicon != blank -%}

{%- endif -%}

Just go into your theme.liquid code, search “favicon”, delete old code and replace with the above. Worked like a charm for me!