Emoji Favicon for Shopify
Add an emoji favicon to your Shopify store without touching the Online Store favicon upload. Works for every theme including Dawn, Debut, and custom themes.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Shopify
Open the theme code editor
Online Store › Themes › ... › Edit code on your current theme.
Edit layout/theme.liquid
Find the <head> block. Add the favicon and apple-touch-icon tags above the existing {% raw %}{{ content_for_header }}{% endraw %} line.
<!-- layout/theme.liquid --> <link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket"> <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket">
Remove the Shopify favicon upload
Theme Settings › Favicon › remove the uploaded image, or leave it as a fallback.
Popular emoji favicons for Shopify
Click any emoji to see the Shopify-specific install snippet.
Troubleshooting
Shopify favicon override still active
In Theme customizer, click the favicon slot and hit remove. If your theme hardcodes it, the <link> you added will win because it is higher in the head.
Checkout page showing wrong favicon
Shopify checkout is a separate template. Paste the same snippet into checkout.liquid (Plus plans only) or accept the default on non-Plus.
Theme update overwrote my snippet
Fork the theme before updating, or store the snippet in a theme app extension or a custom app block.
App blocks injecting their own favicon
Disable third-party app blocks in Theme customizer and re-check.
Mobile Safari showing square icon
Confirm apple-touch-icon is pointing to the PNG endpoint, not the SVG. iOS does not parse SVG touch icons.
Frequently asked questions
Do I need Shopify Plus?
No. Any Shopify plan that lets you edit theme code works — Basic, Shopify, Advanced, Plus.
Does it work in the Shopify preview URL?
Yes, as long as you saved the theme change.
Will this break my theme’s built-in favicon logic?
No. Your <link> lives above content_for_header, so it is emitted first and browsers prefer the highest-priority declaration.
Can I A/B test different emoji favicons?
Yes — render the URL from a theme setting and expose it in the customizer.
Does it slow down the storefront?
No. The favicon is a 1KB SVG from a global CDN.