Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Why is my Fav Icon not displaying correctly?

Solved

Why is my Fav Icon not displaying correctly?

JH_TECH
Shopify Partner
80 5 13

Hello Shopify Community,

 

Does anyone know why our Fav Icon is not showing? We added the html code that was suggested in another related question, we deleted the browser cache memory, we loaded our pages in multiple browsers but it still remains blank. Any advise will be appreciated.  

 

Thank you for your time,

Jacques Hermes Team

 

 

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
Accepted Solution (1)
codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

The biggest issue i see with the above is that you have a `div` in the `head`. Move that out into the body, it looks like everything after that is getting inserted into the body rather than the head.

 

I can't really think of a use case where you would have a `div` in between the `head` tags.

 

(if for some reason that needs to stay there then move it just before the closing `head` tag)

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

View solution in original post

Replies 16 (16)

codewithpaul
Shopify Partner
123 13 22

hey!

 

How did you add the favicon? Through theme settings or custom code?

 

Best place to edit would normally be here

codewithpaul_0-1656954774723.png

 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
JH_TECH
Shopify Partner
80 5 13

Hello Paul,

 

We added  the favicon by going to Online store > Themes > Customize and Theme settings > Favicon, where we uploaded the image. 

 

Thank you for your reply, 

Jacques Hermes team

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
codewithpaul
Shopify Partner
123 13 22

Is this the result you are looking for?

codewithpaul_0-1657021166606.png

I can see the issue in the HTML

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
JH_TECH
Shopify Partner
80 5 13

Yes, this looks like what we want to achieve.

Can you please tell us what we got wrong with the html?

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
codewithpaul
Shopify Partner
123 13 22

hi i linked a video above that explains the issue.

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

Erin
Shopify Staff (Retired)
1116 137 182

Hi there @JH_TECH. I'm happy to help you out with this! Which theme are you currently using?

 

Most themes have a favicon setting built right into the theme editor. You can get to your theme editor by going to Online store > Themes > Customize (next to the theme you're using). The setting may be different depending on the theme you're using, but generally once you're in your theme editor you can find it by going to Theme settings > Favicon. If you enter a favicon image here, it should start to work correctly.

 

04-22-11862-96247

 

 

You can also add a favicon manually if your theme doesn't have a favicon setting. To do this you will want to follow the steps listed below. If you're not comfortable coding yourself and you are using a theme created by Shopify I would recommend reaching out to our support team on this page to look into helping you with this. If you're using a third party theme or we aren't able to help with your Shopify theme, then I would recommend hiring a Shopify expert to assist you. Shopify experts are trusted, third-party agencies and freelancers who offer services for Shopify merchants. You can read more about Shopify experts on this page and you can hire one on this page.

 

Steps to manually add a favicon:

  1. From your Shopify Admin, click Online Store > Themes
  2. Find the theme you want to edit and click Actions > Edit Code
  3. Click on the Assets folder to expand it
  4. Click Add a new asset:04-31-58097-29235 
  5. Click Choose file and locate your favicon (note that for the purpose of this example the filename is named either favicon.png or favicon.ico)
  6. Click Upload asset
  7. Click on the theme.liquid file to open it in the online code editor
  8. Paste the following code between <head> and </head>04-34-87124-97743
    If the favicon file has a .png extension, use this:
    <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />

    If the favicon file has an .ico extension, use this:
    <link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}" type="image/x-icon" />
     
  9. Save your changes

Please let me know if you have any questions!

Erin | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

JH_TECH
Shopify Partner
80 5 13

Hello Erin,

 

Initially, we added  the favicon by going to Online store > Themes > Customize and Theme settings > Favicon, where we uploaded the image. We retried to do this today but still the favicon is not showing.

 

We also tried the manual solution that you mentioned but it didn't work either..

 

Edit: we are currently using the 4.0.0 version of the Dawn Theme.

 

Thank you for your reply, 

Jacques Hermes team

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
codewithpaul
Shopify Partner
123 13 22

Here is a quick video explaining the issue

https://youtu.be/9i-bGpr28Pw

 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
JH_TECH
Shopify Partner
80 5 13

So the html code appears to be on the body section at the inspect tab. In the theme.liquid code though it is inside the head section (screenshot provided). What could be the reason for this to be happening? 

Screenshot_1.jpg

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

The biggest issue i see with the above is that you have a `div` in the `head`. Move that out into the body, it looks like everything after that is getting inserted into the body rather than the head.

 

I can't really think of a use case where you would have a `div` in between the `head` tags.

 

(if for some reason that needs to stay there then move it just before the closing `head` tag)

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
JH_TECH
Shopify Partner
80 5 13

Yeah, we just turned this into a comment and it worked. This was probably a leftover from an application that we were using in the past.. Thank you so much for helping us figure this out! Have a nice day!

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
codewithpaul
Shopify Partner
123 13 22

Great!

If you or any other businesses ever need a Shopify developer feel free to email me at contact@codewithpaul.com 😁

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
jonnohowe
Tourist
4 0 1

Hi there, we have tried these methods and still not working can you please assist? thank you, jonno 🙂

screen shot favicon code.jpg

jonnohowe
Tourist
4 0 1

we have switched to a new theme yesterday and this is why favicon not appearing, have added it back in theme and also put this code in, to no avail .. cheers

yoonusajward
Shopify Partner
1 0 0

This was very useful. It works now for me. Thank you!

tilepath
Visitor
1 0 0

Hello Shopify Community,

 

I have the favicon issue like above, can anyone help me to solve the issue. 

 

Thank you for your time,

Tilepath