5

I'm creating an HTML web page. I'm nowhere near finish and therefore should not focus too much on the following matter at the moment. But I'm confused about why my code for the Shortcut icon is not working. I'm testing everything by placing all files in the same folder (offline, no servers or anything similar)

The code is

<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico">

I tried with different ico files and it will only work with an ico uploaded to a website. For example the following code will work.

<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">
Vairon
  • 91
  • 1
  • 2
  • 11

8 Answers8

4

Try:

<link rel="SHORTCUT ICON" type="image/x-icon" href="~/favicon.ico">

or:

<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
MAXE
  • 4,978
  • 2
  • 45
  • 61
coceban.vlad
  • 509
  • 1
  • 7
  • 23
  • 1
    I wasn't getting results. I was only able to fix it through uploading it to a web server. – Vairon Oct 10 '12 at 02:35
  • If no result and this time.... maby there are some problems with the icon.... overwise try to insert: that is icon extracted from a website. Normaly if you insert this you should get an icon. Try and then reply – coceban.vlad Oct 22 '12 at 18:13
  • +1. Milky's answer works too, but it is lengthy one. This is short. – Ganesh Jadhav Mar 07 '14 at 10:02
2

I ran into this similar problem, and it turned out that the size of the actual file was what caused the issue. According to sources it has to be either 16x16 or 32x32. I would use an icon generator like: x-iconeditor.com.

user1670316
  • 63
  • 8
1

If you want a favicon on local file, you will have to use Data URI

See this answer : local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
0

set favicon icon size 16x16 it will work in chrome...

Gaurav Kachhadiya
  • 19
  • 2
0

I HAD the same problem. The site I "borrowed" from used a folder called "icons" for the location of the .ico file so I followed that exactly. The service my girlfriend used was Web.com. For whatever reason with Web.com if a shortcut icon in located anywhere other than the root directory, it will not show up in Internet Explorer. I simply moved the favicon file into the same place index.html was and changed that one line of code in the index to reflect that.

Solved (in my case anyway)! Good luck!

Cheshire Cat
  • 1
0
<link rel="icon" href="relative_PATH/favicon.ico">

Try to put the all relative path to the icons file

user6317575
  • 1
0

It doesn't work, absolutely because the link target is not correct. If you put the icon in the same folder of your web page, then correct the link to the following: 

<link rel="SHORTCUT ICON" type="image/x-icon" href="./favicon.ico">

which means favicon.ico is in the current folder.

However you can use the debugger i.e. chrome debugger and navigate to the source code of your web page, i.e. right click on the link of your icon -> open in new tab, and see how it works

Mohammed Al-Tamimi
  • 1
  • 1
0

Try to add the absolute route for the image icon and Use 48x48 px image size.

That worked for me

<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />
Hector Lara
  • 182
  • 1
  • 10