Favicon not showing on Netlify

Hey, I hope you are doing well.

Can you help me understand why the Favicon is not showing on Netlify, but locally it is showing.

I tried to change the browser but still, it doesn’t work.

My site was created using React and webpack, This is the code

And this is the URL of my site: https://iragena-eric-portfolio.netlify.app/

1 Like

Hey @erickyvand, first of all welcome!

It’s also possible that the favicon isn’t showing because of the caching of your current browser.

I’m currently replying on my mobile but I’ll try to have a look at the code later. :slight_smile:

@andylemaire thank you for the warm welcome. But I cleared the cache of the browser it still doesn’t show. I don’t really know the problem because locally the favicon is showing up.

@erickyvand I’ve checked your code and it’s pointing to https://iragena-eric-portfolio.netlify.app/assets/favicon.ico
But I’m unable to see the favicon there… I think you have to check your path.

@andylemaire this is the code <link rel="icon" href="../assets/favicon.ico" type="image/*" /> my favicon is in assets folder. Locally I can see favicon in the browser tab, but online I can’t see it

Hi, @erickyvand, you can download your deployed site to see what was uploaded. There are instructions here.

When I check the deployed files, there is no favicon.ico anywhere, not in the assets directory or elsewhere. There is no favicon because there is no file included for it.

If there are other questions, please let us know.

@luke, thank you for the hint, I have downloaded the files and I didn’t find favicon.ico there but on Github repo that file is there, I don’t know why it is not being deployed.

And when I included the file that was deployed still It didn’t work.

Till now I don’t know the problem, I am new here and this is the first time I deploy on Netlify

After a lot of search on google I have managed to find a solution, I simply added the favicon path in webpack config file. Thank you all for the help

1 Like

I have the same issue. Could you post a more detailed information, how you solved this problem? Thanks in advance

1 Like

@Boinkie Have you tried to download your deploy to check if it contains the favicon files?

Can you provide a link to your site and your repository?

I managed to solve it for 1 minute. In my html, I put the icon link as the link from github with the favicon image. Now it works fine :smiley:

2 Likes

Hey @erickyvand , I am facing the same issue but couldn’t understand your solution. It would be great if you could give more detailed information about the solution.

Hey @Pranav016

The solution offered was to add the favicon to the webpack configuration file. Are you using webpack or another framework. Can you share the link for your site and the repository you are deploying.

I am working on a website using react js, bootstrapped the project using create-react-app (it uses webpack in the backend). I don’t have the access to the webpack config file in this. Only way I can access is to eject. (by running npm eject)

The code is currently in a private github repo, I can share it tomorrow when I make it public.

You are running npm eject on Netlify? Or is this a local issue?

No, I am not running npm eject, I am just saying thats the only way I get access to the webpack config in create-react-app, I am not running the command hence I have no webpack config to edit. So how do I get the favicon to display now.

For favicon, I tried adding the relative path /images/favicon.ico as a link in the index.html and then build the code and deployed it on netlify but the favicon does not show, even though it works fine on my local machine (development environment).

Can you share the repository you are working with @Pranav016 ?

Hi Luke!

Thanks for the tip for downloading the deploy to check if the favion files are there.

I am currently working on a Hugo website that is hosted on Netlify. The site was created using an interface R package called blogdown. The repo is found here GitHub - nicercode/EnvironmentalComputing: These are the R markdown files used to generate and the URL is https://environmentalcomputing.net/

We have an open issue on trying to add a favicon to our site: favicon · Issue #35 · nicercode/EnvironmentalComputing · GitHub

We can confirm the favicon exists on the deploy but still not currently showing.

Your advice would be greatly appreciated!

Best,

Fonti

Hi @fonti_kar

I can see the favicon <link> and I can browse to it (https://environmentalcomputing.net/images/favicon.png)

<link rel="icon" href="/images/favicon.png" type="image/png">

I it appears in the tab as expected using Firefox, Chrome, and Safari.

1 Like

Wonderful! Must have ticked over and the server updated? I had colleagues that couldn’t see it! Thank you so much for verifying!!

1 Like