FreeBeginner

Custom Favicon

Set your store favicon dynamically using Liquid and theme settings. Supports PNG, SVG, and ICO formats with automatic fallback.

Category: UX Compatibility: All OS 2.0 Themes Updated: Feb 2026

snippets/plynthr-custom-favicon.liquid

{% comment %}
  Plynthr — Custom Favicon
  https://plynthr.com/snippets/custom-favicon/

  INSTALL:
  1. Create snippets/plynthr-custom-favicon.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-custom-favicon' -%} inside <head> in theme.liquid
     (replace any existing favicon tags)

  CUSTOMIZE:
  - Upload your favicon in theme settings or hardcode the URL below
{% endcomment %}

{%- comment -%}
  Priority: theme setting > hardcoded fallback
  To hardcode: replace the if/else with a direct URL
{%- endcomment -%}

{%- if settings.favicon != blank -%}
  <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32 }}">
  <link rel="icon" type="image/png" sizes="192x192" href="{{ settings.favicon | image_url: width: 192 }}">
  <link rel="apple-touch-icon" href="{{ settings.favicon | image_url: width: 180 }}">
{%- else -%}
  {%- comment -%} Fallback: hardcode your favicon URL here {%- endcomment -%}
  <link rel="icon" type="image/svg+xml" href="{{ 'favicon.svg' | asset_url }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
{%- endif -%}

<!-- Theme color for mobile browser chrome -->
<meta name="theme-color" content="{{ settings.colors_solid_button_labels | default: '#000000' }}">

Installation

In your Shopify admin, go to Online Store → Themes → Edit Code
Under Snippets, click "Add a new snippet"
Name it plynthr-custom-favicon
Paste the code above and save
Open layout/theme.liquid
Remove any existing <link rel="icon"> tags
Add {%- render 'plynthr-custom-favicon' -%} inside the <head> section
Upload your favicon in Theme Settings → Favicon

Customization

Upload different sizes for best results: 32×32 (browser tab), 180×180 (Apple touch), 192×192 (Android)
SVG favicons scale perfectly — use them if your logo is simple
Change the theme-color meta to match your brand
For a hardcoded favicon, upload files to Assets and reference them with asset_url

Want this installed for you?

I'll add this to your Shopify store, test it, and make sure it's working perfectly. Done within 24 hours.

Install for Me — $29

✓ Installed & tested ✓ Within 24 hours ✓ Any OS 2.0 theme

FAQ

What size should my favicon be?

Minimum 32×32px for browser tabs. For best results across all devices, upload at least 512×512px and let the snippet handle the resizing.

Can I use an SVG favicon?

Yes. SVG favicons are supported in modern browsers and scale perfectly. Upload the SVG to your theme's Assets folder.

Why doesn't my favicon show immediately?

Browsers aggressively cache favicons. Try a hard refresh (Ctrl+Shift+R) or open an incognito window to see the change.

Custom Favicon

Installation

Customization

Want this installed for you?

FAQ

Related Snippets