Favicons helps to represent your brand in a tiny image among the other browser tabs.
Your customers might find it easy to identify your website when they have many tabs from different websites opened simultaneously.
Bookmarks - Among pool of websites bookmarked by your customers, your favicons would be helpful for them to identify your website.
Once you have created your shopify site (Be it a test store or live) you might have noticed that your website favicon will be Shopify icon by default. You will have to change this manually in the theme either via the theme settings or directly making changes to the theme layout code. Now lets dive into the simple steps of updating favicons in Shopify.
Changing Favicon using Theme Settings:
1. Login to the Shopify Panel.
2. Navigate to Sales Channels -> Online Store -> Themes.
3. On the Current Theme section, click on the "Customize" button
4. Click on the "Theme Settings" tab and click on the "Favicon" button. This will display the current favicon image preview.
5. Click on the "Change" button.
6. You will be displayed with options to choose an image from the Library or use one of the Free images. The best recommended is to design a Favicon unique to your website and use the upload option to upload the favicon file.
7. Once you have uploaded the file, click on the uploaded image to select the same.
8. Click on the "Save" button to save the changes.
Changing Favicon using Theme Layout Code:
1. Login to the Shopify Panel.
2. Navigate to Sales Channels -> Online Store -> Themes.
3. On the Current Theme section, click on the "Actions" dropdown and select "Edit Code" option.
4. Click on the "Assets" folder and click on the "Add a new asset" link. This will display a popup with upload option. Upload your website icon file by choosing the file and clicking on the "Upload Asset" button.
5. Once you have uploaded it, your favicon (I named it favicon.ico) will get listed in the Assets folder.
6. Click on the theme.liquid file under the Layout folder. This will open the file in a small editor on the right side.
7. Search for the below line:
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
8. Replace this line with the below line (replace favicon.ico with your file name):
<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}" type="image/png">
Now when you refresh the page, your new favicon will start to display.