Favicon image not uploading

Technical Q&A

Topic summary

Main issue: A Shopify site’s favicon (small site icon shown in browser tabs and in Google results) wouldn’t appear when added via theme settings/Liquid code.

What changed: The favicon tag was added directly to theme.liquid after the tag. The icon then became visible in the browser tab and in the page source.

Search visibility: For the favicon to update in Google results, a recrawl may be needed and can take days. Use Search Console to request recrawl.

Remaining problem: The displayed favicon looks lower quality than the international site. Cause identified: the icon has a non‑transparent background, is skewed, and doesn’t fill the canvas properly.

Recommended actions:

  • Use the international site’s properly prepared favicon PNG, or
  • Generate a full favicon set (for old/new browsers and devices) from a 260×260 original logo via RealFaviconGenerator.
  • Upload generated icons to admin > content > files and reference them in theme.liquid.
  • Remove/comment out the theme settings favicon to avoid conflicts.

Status: Partially resolved (icon loads). Quality and search appearance pending asset replacement and recrawl.

Summarized with AI on December 25. AI used: gpt-5.
7

Hi @manekakknowle

Issue is the background is not transparent, image is skewed and not taking up the full size of the image document.

Use the icon from your international site.
https://yvesrocherusa.com/cdn/shop/files/favicon-32x32.png

However, If you’re wanting full coverage for new/old browsers and devices and have access to the original logo file @260x260px…
Check out this site https://realfavicongenerator.net you can create all possible favicons from a logo upload and test how they will display on different browsers / devices.

You will need to load icons to admin > content > files and incorporate to your theme.liquid.
Depending on how many options you select during setup something like this

Making sure to comment out / remove an icon being loaded from theme settings.

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

Regards