-1

I'm going through the tutorial on the angular-meteor.com. What I am asking about is just for a fullstack angular-meteor web page and not for your standard static html page. How do I get a favicon to show instead of the default page favicon? Where do I put it in the file structure? Right now it is in the same folder as the index.html(client/).

Jeremy Scott Peters
  • 377
  • 1
  • 3
  • 15
  • Possible duplicate of [How do I force a favicon refresh](http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh) – Rob May 09 '17 at 19:19
  • Please notice the [angular-meteor] tag and that I state it is already in the same place as the index.html file and not having an effect. I also coded it into the index file and still no effect. Only answer if you have experience with Meteor javascript preferably with Angular javascript. – Jeremy Scott Peters May 10 '17 at 19:45

1 Answers1

0

By default you should put it to your website's root folder with name /favicon.ico.

So in this case your file structure should look like this:

 \ - index.html
   - favicon.ico

or this:

 \ - favicon.ico
   \ html
     - mypage.html
     - favicon.ico  - it is not readed by default

But you can override the default icon by adding the following tag to your header element: 

<link rel="shortcut icon" type="image/png" href="/path/image.png" />

Most of the modern browsers support ico, png, gif formats. Some of them also supports SVG format.

In Safari browser you should also define a pinned tab icon by adding the floowing lines to your html header:

<link rel="mask-icon" href="website_icon.svg" color="red">

You can read more about favicon in specs: https://html.spec.whatwg.org/multipage/semantics.html#rel-icon

Dániel Kis
  • 2,341
  • 5
  • 28
  • 51