Shopify lets you upload a favicon for your store, but you can only upload a single image file and it gets scaled down automatically to 32x32 pixels. Find out how to display optimized, high-resolution favicons on things like iPhones, Android, Windows PCs and more.
Favicons are the little icons you mainly see on browser tabs. They make it easy to quickly identify the site loaded on a particular tab, which comes in handy if you have lots of tabs open in your browser.
Every Shopify theme has a theme customizer setting for uploading a favicon. This setting takes a square image which is then set as a favicon at 32x32 pixels.
This works well enough for desktop browsers, as they typically only display the favicon in their tabs and for that the 32x32 pixels are large enough.
But favicons get displayed in lots of other places, and for most of those a 32x32 pixel icon doesn't look very good. Especially on high-resolution smartphones displays the 32x32 size can look very blurry.
Also, Shopify themes typically only include one particular favicon tag. But there are multiple different styles of favicon tags for different browsers and devices. If you want you favicon to display optimally on the majority of browsers and devices, you need to add these additional tags to your theme.
So to get your favicon to display perfectly in all possible scenarios, you have to upload multiple image files and add their corresponding HTML code to your store's theme. So let's see how we can achieve that.
