Why is my Fav Icon not displaying correctly?

JH_TECH · ‎07-04-2022

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

codewithpaul · ‎07-05-2022

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

codewithpaul · ‎07-04-2022

hey!

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

Best place to edit would normally be here

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 · ‎07-05-2022

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 · ‎07-05-2022

Is this the result you are looking for?

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 · ‎07-05-2022

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 · ‎07-05-2022

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 · ‎07-04-2022

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.

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:

From your Shopify Admin, click Online Store > Themes
Find the theme you want to edit and click Actions > Edit Code
Click on the Assets folder to expand it
Click Add a new asset:
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)
Click Upload asset
Click on the theme.liquid file to open it in the online code editor

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" />

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 · ‎07-05-2022

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 · ‎07-05-2022

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 · ‎07-05-2022

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?

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 · ‎07-05-2022

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 · ‎07-05-2022

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 · ‎07-05-2022

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 · ‎06-03-2024

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

jonnohowe · ‎06-03-2024

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 · ‎02-29-2024

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

tilepath · ‎12-05-2023

Hello Shopify Community,

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

Thank you for your time,

Tilepath

Why is my Fav Icon not displaying correctly?

Why is my Fav Icon not displaying correctly?

Community Blog Articles