What is a favicon? Shopify like most platforms gives you the ability to easily add a favicon to your store. It is the small image that displays in a browser tab next to your store’s name.
A favicon is a really tiny image – just 16 x 16 pixels. While it is really small it is still an important element in your Shopify store that you should not overlook. Far too many online stores do not even bother with adding their store’s favicon.
- Helps visitors instantly recognize your store
- Helps to brand your store
- Makes you store look complete
- Serves as a reminder when they have dozens of tabs open
- Creates consistency in your marketing (using same icon as social media)
Shopify Where To Add Favicon
Adding your favicon in Shopify is really easy.
Simply click Online Store >> Themes >> Customize
Next, click Theme Settings >> Favicon
Then just upload your favicon image. There might be some slight differences between different themes. The favicon is connected to your Shopify theme.
When you change themes you will need to upload your favicon again.
While the image will display at 16 x 16 px in most browsers it should be at least 32 x 32 px in Size.
The file format should be in PNG and transparency IS supported. Shopify will automatically scale your favicon image down to 32 x 32 px.
What To Use As Your Shopify Favicon
The best strategy is to use 1 single icon across all your marketing. The icon you use on your Facebook page, your Instagram page and any other social media can be use as your favicon as well.
This helps to create consistency and helps people to instantly recognize your brand.
The best strategy is to use your logo if it makes sense. Most modern logo’s use some sort of simple graphic which lends itself perfectly to be used as a favicon.
General Favicon Tips For Shopify and Branding
Make sure you keep the colours of your icon consistent and that your favicon matches the colour scheme of your Shopify store. Using a bright colour will help your favicon stand out when someone has multiple tabs open.
Favicons support transparency which means you can get creative with how you use transparency in the image.
Keep in mind that this is a really small image. Detail will not show. It needs to be incredibly simple in terms of graphics.
Always design your favicon as a much bigger image. Designing anything smaller than 100 x 100 px is just too difficult. I usually design it at 300 x 300 and then constantly check it to make sure it will look right when scaled down to 16 x 16.