Please note that some of the changes recommended in this guide involve making direct changes to the theme code. If you encounter difficulties with this, please contact a third-party developer for more troubleshooting, customization, or functionality.
In a browser tab, the favicon helps users quickly recognize and tell apart different websites, especially when many tabs are open.
We recommend uploading a 32×32 px favicon in PNG format. Once you have your image, go to the theme editor and navigate to Theme settings > Favicon to upload it.
When the favicon is not showing in the browser tab, this is usually caused by custom codes added in the theme.liquid template. The custom code may be interfering with the theme’s default code and preventing the favicon from displaying.
The code for the favicon can be found in the upper section of the file:
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}To resolve this issue, you should move any custom code that is currently positioned above the favicon code below it.