Re: Favicon Isn't Showing

Why isn't my favicon displaying on all pages?

loveartesia
Tourist
11 0 3

I've uploaded my favicon into my theme settings but it only shows on certain pages. How do I fix it to show on all?

Replies 7 (7)

PageFly-Richard
Shopify Partner
4439 1016 1669

Hi @loveartesia 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please navigate to theme.liquid file and check if the favicon code has been added to your theme.
You can also add a favicon manually

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Add this code under <head> and make sure you put the link of the image into the code like this

<link rel="shortcut icon" href="{{ 'https://cdn.shopify.com/s/files/1/0615/5462/2723/files/Support.webp?v=1701392184' }}" type="image/png" />

PageFlyRichard_0-1703032163486.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

loveartesia
Tourist
11 0 3

Hi Richard! 

I added the code. Thank you!

 

It still only showing on certain pages within Safari. I just checked with Chrome and it shows on all - guess it may be my browser.

PageFly-Richard
Shopify Partner
4439 1016 1669

The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:

<link rel="mask-icon" href="{{ 'https://cdn.shopify.com/s/files/1/0615/5462/2723/files/Support.webp?v=1701392184' }}"
color="#000000">

<link rel="shortcut icon" href="{{ 'https://cdn.shopify.com/s/files/1/0615/5462/2723/files/Support.webp?v=1701392184' }}" type="image/png" />


Please make sure you will change the link of the image too.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

loveartesia
Tourist
11 0 3

Do I place this code in the place as the one above? 

 

Also, please remind me where to find the links to the photos again.

PageFly-Richard
Shopify Partner
4439 1016 1669

Hi @loveartesia You can upload the image that you want it to display to Shopify > content then hit copy link button at the end of the image

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Richard
Shopify Partner
4439 1016 1669

 

Safari uses "apple-touch-icon" and not just "icon". Also, you will have to specify the icon for all Apple devices if you want it to show up in all of them.

Please try this above the code you added with your link

<link rel="apple-touch-icon" href="{{ link img here }}">

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.