Adding an icon in website title

HTML & CSS
1

Good day,

Id like to add an icon next to website title:
Libromana

I have tried adding
<link rel=“icon” href=“icon location”>

But it worked just for Firefox. How can I do it also for Internet Explorer?

Thanks!!!

2

Actually I am not seeing a favicon in Firefox 4.

What I always do is add my favicon.ico in the web root without adding any code to the page itself. I have to restart Firefox in order to see it, but it works in all browsers for me.

3

IE needs the rel=“shortcut icon” I believe according to the table here.

I use this on my site and it seems to work everywhere fine although the type attribute shouldn’t be needed I believe.


<link rel="shortcut icon" href="[favicon.ico](http://www.sitepoint.com/forums/view-source:http://www.pmob.co.uk/favicon.ico)" type="image/x-icon" />
4

I have added favicon.ico to the website root, and I still cannot see it in IE.

5

Hi Paul,

Great to hear you again!!

I have added your line, but unfortunately it made no difference. I dont see th eicon in IE.

With this line
<link rel=“icon” href=“/images/favicon.ico” />

I am able to see it in Firefox.

Now the hose site
Libromana

has this code in <head> section:
<title>Libromanía</title>
<link rel=“icon” href=“/images/favicon.ico” />
<link rel=“STYLESHEET” type=“text/css” href=“styles.css”>

6

It takes a few days to show in ie. That’s why you never see in your searches a definite answer on this. Because no one can reliably test because they are all waiting on ie to show it. And once it finally does most have already bored of the subject and moved on. Never to verify what worked or didn’t.

7

According to MS documentation, IE requires a different “rel.” Use both, and you’ll be covered for all browsers:

<link rel='shortcut icon' href='http://example.com/favicon.ico' type='image/x-icon'>
<link rel='icon' href='http://example.com/favicon.ico' type='image/x-icon'>
8

Just FYI, my favicon shows up in IE8 with no code on the page, just the .ico file in the site root. I have no knowledge about the theory of this, I can only tell you what I’m seeing.

9

In theory, just putting your favicon file at the root of your domain should work. In practice, it usually turns out to be little more than a crapshoot. Much safer just to point the browsers to where the favicon is. This also allows you to have different favicons for different pages.

10

Thanks a lot,

I have added both, and also I will wait for … a week? … to see if IE works …

11

You shouldn’t need any “waiting.” This isn’t like DNS propagation. I’m already seeing your icon in Firefox and IE9.

Edit: and it’s showing up in IE7 and IE8, as well. In Chrome, it shows up on the browser tab, but not in the address bar. I’m not sure why - need to do some poking around…

Second edit: some quick Googling tells me that Chrome never displays a favicon in the address bar. Poor design choice, IMO.

12

Sure, that’s what I guess sounds reasonable. But I have seen weird things in IE before …
Here we have machines with IE 8 and 9 … and we dont see the icon in them.

I left code like this:
<link rel=“shorcut icon” href=“http://www.libromania.cl/images/favicon.ico” type=“image/x-icon” />
<link rel=“icon” href=“http://www.libromania.cl/images/favicon.ico” type=“image/x-icon” />

Thanks!!

13

All I can suggest is that you make sure you refresh the browser cache, and perhaps even close and reopen the browser after clearing the cache.

14

Sure, if you see it, issue must be local.

Thanks!!!

15

Yes it’s showing for me in IE8 now.

16

Great Paul, thanks!!!

Chrome is also working, but an old compiuter con IE7 is not showing it, even after clear temporary files.
But I can live with that!!

Thanks again allllll!!!

17

I don’t have a native IE7 to test (as I use ietester which doesn’t show favicons) but here’s a browsercam test showing the icon is working in ie7+.

If I remember correctly IE6 only shows the icons after the page had been bookmarked by the visitor.

18