Why isn't my favicon displaying despite adding it to the theme?

Store Design

Topic summary

Issue: A favicon (the small icon shown in browser tabs) is not displaying even after being added in the theme settings for okholmstudio.dk.

Current status: The user uploaded the favicon and provided a screenshot confirming it’s set in the theme. Initial code using the Shopify setting (settings.favicon with img_url ‘32x32’) did not work.

Suggested fixes:

  • Change the Liquid filter from img_url to image_url in the link tag, referencing settings.favicon. The guidance was unclear and appeared to omit the actual tag, causing confusion.
  • If that fails, upload a 32x32 favicon to Files, copy its direct URL, comment out the conditional code in theme.liquid, and hardcode a to test.

Key details: The attached image is central to confirm the favicon was uploaded. theme.liquid is the main layout file; settings.favicon is a theme setting reference; img_url/image_url are Liquid filters used to build image URLs.

Outcome: No resolution yet. Next action is to test with the hardcoded file URL; if it displays, the helper will inspect the theme code to determine why the settings-based method fails.

Summarized with AI on January 12. AI used: gpt-5.
1

Hi, I have added my favicon to the theme, but it isn’t showing.

I tried adding this code from another solution in the community, but with no luck:

{%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

My site is: okholmstudio.dk

Does anyone have a solution to this?

2

Hi @simone11 ,

Did you upload your favicon image to the favicon section? And even then it is not visible?

3

Yes, I have uploaded the favicon. Image attached

Skærmbillede 2023-11-23 kl. 13.40.56.png
Skærmbillede 2023-11-23 kl. 13.40.56.png620×1280 50 KB

4

Use this code:

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

change img_url into image_url

5

How do I find the image url for the favicon?

6

This is your code

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

Replace your code with this

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

then try to upload the favicon image.

7

It doesn’t work… unfortunately

8

Then try this,

  1. upload the favicon image with the size of 32x32

  2. copy the link of uploaded favicon image from the file

  3. comment this line in theme.liquid

{%- if settings.favicon != blank -%}
      
    {%- endif -%}
  1. paste this link

where in href attribute you just paste the copied image link and save it.

then check this is working or not.

If after this favicon will show then i have check your theme code for why favicon is not showing.