Shopify Favicon Generator
On Shopify the favicon is a theme setting backed by the image CDN, not a file you put on a server. The theme decides which tags get rendered, and most themes render exactly one.
The favicon is a theme setting
Dawn and the other Online Store 2.0 themes declare a favicon setting in the theme's settings schema. The merchant picks an image in the theme editor, and the theme's layout file renders a single icon link whose URL is generated by Shopify's image CDN at the size the theme asks for.
Two consequences follow. Changing stores or themes means re-picking the image, because the setting belongs to the theme rather than to the shop. And any icon the theme does not render (the iOS home screen icon, the larger Android sizes, a manifest) has to be added by editing the layout file.
Setting the favicon in the theme editor
- 1
Open the theme customizer
In the admin: Online Store, then Themes, then Customize on the theme you want to change. Editing a theme you have not published only changes the draft.
- 2
Open theme settings
The theme settings panel is separate from the section list. It is the settings control at the bottom of the customizer's left sidebar. Dawn groups the favicon under its own heading.
- 3
Select a square PNG
Pick an image at least 512x512 even though the theme requests a small render. The CDN downsizes from what you upload, so a larger source leaves room for the other tags you may add later.
- 4
Save, then check the published store
The customizer preview and the live storefront are different URLs. If you edited a draft theme, publish it before deciding the favicon didn't change.
What the theme renders, and what to add
{%- comment -%} layout/theme.liquid — what Dawn already does {%- endcomment -%}
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
{%- comment -%} Sizes the theme does not emit. Upload these to the theme's Assets. {%- endcomment -%}
<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ 'icon-192x192.png' | asset_url }}">Edit code, then layout/theme.liquid. Files added under Assets are addressable with the asset_url filter.
Coverage out of the box
| Surface | Handled by the theme setting? | If not |
|---|---|---|
| Browser tab | Yes | Nothing to do |
| iOS home screen | No | Add an apple-touch-icon link in theme.liquid |
| Android install icon | No | Needs a manifest with 192 and 512 PNGs |
| Social share preview | No | Separate Open Graph image, not the favicon |
Shopify favicon FAQ
Will a theme update overwrite my theme.liquid edits?
Updating a theme installs a fresh copy, so hand edits to layout/theme.liquid do not carry over automatically. Keep a note of what you changed, or track the theme in git with the Shopify CLI, before you start editing code.
The favicon changed in the customizer but not on the live store.
Check whether you were editing the published theme or a draft. If it was published, the URL in the rendered link is a CDN URL. Load the storefront in a private window, since the browser caches the old icon by its own rules.
Can I put favicon files at the store's root URL?
No. You have no control over what Shopify serves at /favicon.ico, and theme assets are served from the CDN under their own paths. Everything has to go through the theme setting or an asset_url reference in the layout.
Shopify favicon not working?
The two ways it fails on Shopify, and the exact cause of each.