Search code examples
angularfavicon

Custom favicon not displaying in Angular 16

I am new to front-end web development and I'm trying to make a website in Angular. So far I've gotten as far as creating a default Angular app using the CLI, with ng new my-app, and I was trying to modify the website icon from the default Angular favicon.ico.

Here are the changes I made:

  1. I generated a custom icon using an online generator from a PNG file, and saved it in my-app/src/favicon-16x16.png
  2. I modified the <head> tag of the index.html file as follows:
<link rel="shortcut icon" sizes="16x16" href="src/favicon-16x16.png" type="image/png" />

Unfortunately despite trying it in a bunch of different ways, Angular is still displaying the default icon when I serve the app locally using ng serve. I thought this might be an issue with the local instance, so I tried hosting it on GitHub Pages under {my-app}.github.io, and there it simply has no icon at all.

Help is much appreciated, I've been trying to resolve this for several hours now, and I'm pretty sure there's a simple error I'm missing somewhere.

Solution

  • At long last, I figured out the issue. For some reason, when I ran the local instance on Safari at http://localhost:4200/, the favicon did not display, but when I ran it on Chrome at the same URL, it displayed without issues.

    I'm unsure why this is the case or how to fix it on Safari, but I assume it wasn't something I could've solved with my code, but rather a browser issue. Thanks to everyone who posted solutions!