6

I am using this format for linking to my favicon.

My favicon.ico file is in the same directory as my HTML files, but for some reason it does not appear when I upload it to my web server. I cleared my cache, closed my browser, and re-opened it, but the favicon will still not appear.

If someone could explain why this is I would really appreciate it. 

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

Edit: Also I do not know if this would affect it, but there is a default favicon that appears on my web server. I do not know if it is possible to overwrite this.

Edit 2: Not sure if this makes a difference, but this is the basic structure of my head.

<head>
        <meta charset="utf-8">
        <meta name="author" content="">
        <meta name="description" content="Home">

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

        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  
    </head>
Diosney
  • 10,520
  • 15
  • 66
  • 111
user1730357
  • 355
  • 4
  • 7
  • 15

4 Answers4

7

According to this answer it looks like it should be rel="icon" instead of rel="shortcut icon".

Also, if your favicon.ico is at the root of your server http://example.com/favicon.ico and your page is in a subdirectory http://example.com/blog/, the browser will try searching for favicon.ico inside the current directory http://example.com/blog/favicon.ico, which would result in a 404 error; to avoid that, you should set href="/favicon.ico" so it always points to the root directory, no matter in what subdirectory you are.

Community
  • 1
  • 1
  • I tried your way and my favicon showed up when I linked to my url like url/favicon.ico, but it still refuses to appear where it is supposed to. Correct me if I'm wrong, but favicons are supposed to appear to the left of the title as well as to the left of the url, correct? In any case it does not appear near either. – user1730357 Aug 21 '13 at 02:18
  • The appearance of favicons at the left of the URL depends on the browser, for example, Firefox removed that feature due to malicious websites using that to show a fake "lock" icon to make the user think that he's connected using a secure connection while he's not... that's not the point of the question though. What happens if you visit your page using the "Private browsing" feature ? Private browsing should discard any cache and force it to refresh, so if it works there then it's all good. –  Aug 21 '13 at 02:31
  • If by "Private browing" you mean incognito, I just tried that and I could still not get the favicon to appear. I'm at a bit of a loss here now. – user1730357 Aug 21 '13 at 02:36
  • @user1730357 yeah that's what I mean, also this [page](http://en.wikipedia.org/wiki/Favicon#Use_of_favicon) shows how favicons are handled in different browsers, so after all, maybe it's just that your browser doesn't support showing the favicon next to the URL and that your code is actually correct. –  Aug 21 '13 at 02:41
  • I managed to make my favicon working by doing this: Thank you very much for your help though. I'll set you as the accepted answer. – user1730357 Aug 21 '13 at 03:16
3

They usually cached. force to refresh as well. get it from your directory

Mete
  • 27
  • 1
  • 1
  • 4
2

Sometimes /favicon.ico helps. Try this though:

<link rel= "shortcut icon" media="all" type="image/x-icon" href="http://URL.tld/favicon.ico" />

<link rel= "icon" media="all" type="image/vnd.microsoft.icon" href="http://URL.tld/favicon.ico" />

This adds IE support.

Mr. Shtuffs
  • 127
  • 2
  • 11
0

Based on type's attribute value.

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

1-Create an image folder on yout root directory (the same as index.html) and just put your favicon.ico inside this folder.

2-href="image/favicon.ico"

Adry Mateo Ramon
  • 1
  • 1