How to reference favicon properly in HTML


Today I learned that the proper way to reference favicon(and other local resources in HTML):

<link rel="icon" href="/favicon.ico" >

I used to use <link rel="icon" href="favicon.ico" > to reference favicon for my websites, and that caused favicon only showed up on my homepage instead of all pages.

The difference:

  • <img src=“myfile.png” />: The browser treats resouces path as relative path, and loaded from current folder.
  • <img src="/myfile.png" />: This is an absolute path and starts from root directory.