Fixing a Broken Shopify Favicon in Google Search Results
Problem overview
If your Shopify store's favicon appears broken or missing in Google search results, you are not alone. This is a common issue in the Shopify development community and typically stems from how Shopify renders your favicon URL when it is added through the native theme editor. Google expects a stable favicon URL, and URLs with dynamic query parameters can cause Google to treat the icon as unstable or unusable, resulting in a broken or missing favicon in search results.
Why this happens
Shopify often appends query parameters to favicon URLs when the icon is configured through the theme editor. Those parameters control cropping or other transformations, for example:
https://yoursite.com/cdn/shop/files/favicon.png?crop=center&height=32&v=1465769041&width=32
Google prefers stable URLs without changing query parameters. See Google Search Central for guidance on favicons and requirements here.
The reliable fix
The simplest, most reliable solution is to add and serve your favicon directly from your theme assets and reference it with a stable asset URL in your theme code. That prevents Shopify from appending unpredictable query strings and gives Google a durable URL to fetch.
Step-by-step guide
-
Upload the favicon to your theme assets
- In the Shopify admin, open Online Store > Themes > Actions > Edit code.
- Under the Assets folder, upload your favicon file (for example, favicon.ico or favicon.png).
- You can read more about the theme assets structure and best practices on Shopify‘s developer docs here.
-
Reference the asset with a stable link tag
- Edit your theme.liquid (or the appropriate layout file that outputs the
<head>) and add a link tag that references the uploaded asset using Liquids asset_url filter. Example:
- Edit your theme.liquid (or the appropriate layout file that outputs the
<link rel="icon" href="{{ 'favicon.ico' | asset_url }}" />
- If you use PNGs for multiple sizes, you can include additional tags for specific sizes, for example:
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | asset_url }}">
- The asset_url filter ensures the asset is served from the theme assets with a predictable path. For more on the filter, see the Shopify Liquid docs here.
-
Remove or override any dynamically generated favicon links
- If your theme or an app injects another favicon link tag (one that includes query parameters), make sure your explicit link is loaded after it or remove the conflicting tag. Only a stable favicon link should remain in the final HTML head.
-
Publish the theme and verify
- Save and publish your theme changes.
- Inspect the live HTML to confirm the favicon link uses a stable asset URL without variable transformation parameters.
Verification and troubleshooting
- Check Google search results: It can take some time for Google to recrawl and update how your site appears in search. Use Google Search Console to request indexing and monitor how Google renders your pages.
- Inspect the page source: Confirm the
<link rel="icon">tag points to the asset URL you added and not a URL with appended crop or transform parameters. - Test favicon behavior in browsers: While browsers are often tolerant of query parameters, Google has stricter expectations, which is why stabilizing the URL matters.
Additional resources
- Shopify theme assets and structure: https://shopify.dev/themes/assets
- Google’s favicon guidance for search: https://developers.google.com/search/docs/appearance/favicon-in-search
- HTML
<link>element reference for icons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
