Why isn't my favicon showing in all browsers

Question

Hi there guys for some reason my favicon only works in Firefox, but not Chrome or IE. This is what I have in my HTML..

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

I am clueless as to why it's not working? Cheers

Don't use relative paths for your favicon. `href="/img/favicon.ico"` — John Conde, Jul 21 '14 at 13:56
As @davidxd333 said, try first with `shortcut icon`, even though both should work. The other reason favicons do not work is caching, which is often very strongly enforced by the browser. Try [one of these](http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh#answers). — zopieux, Jul 21 '14 at 14:00
Pretty sure this is the cache causing it. Try CTRL+R and restarting browser or using the method in the post @Zopieux mentioned. — davidxd33, Jul 21 '14 at 14:02
This article might answer your query http://stackoverflow.com/questions/12754613/favicon-wont-show-up-in-chrome-but-show-up-in-other-browsers-like-ie-firefox — Ashish Balchandani, Jul 21 '14 at 14:31

Ashesh · Answer 1 · 2014-07-21T14:36:07.340

0

Try this code (must work with Chrome and Firefox)

<head>
  <link rel="shortcut icon" type="image/x-icon" href="Title_icon_file.ico" />
  <title>Title goes here</title>
</head>

OR

<head>
  <link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">`</pre>
  <title>Title goes here</title>
</head>

I recommend keeping the dimensions small around 16x16 or 64x64 at most.

You could use any photo editing application or an online app like http://www.favicon.cc/ to do that.

Wikipedia has an nice, extensive article on the topic : Favicon

and also this page CROSS BROWSER FAVICONS

edited Jul 21 '14 at 14:36

answered Jul 21 '14 at 14:04

Ashesh

3,499
1
27
44

It still isn't seeming to work, and Firefox isn't seeming to display it now either. – Sarah Jul 21 '14 at 14:05
try putting it in the root folder and make sure you are referring to correct file. – Ashesh Jul 21 '14 at 14:10

score 0 · Answer 2 · edited May 23 '17 at 12:22

Reference

Depending on the type of file you’re using one of the following is the standard way to add a favicon in well-built web browsers.

<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">

Internet Explorer 7 & Below

MSIE does NOT support PNG, GIF and JPEG type icons, only ICO files. To generate an .ice file check out the dynamic drive favicon generator. After you have the ICO file you can use the following code to add a favicon in IE5, IE6 or IE7.

<link rel="shortcut icon" href="http://www.example.com/image.ico" />
<link rel="address bar icon" href="http://www.example.com/image.ico">

Cross Browser Approach

The best cross browser approach I’ve found assumes that you have a PNG, GIF or JPEG for major browsers, and a fallback ICO file to use for IE7 and below.

<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<!--[if IE]><link rel="shortcut icon" href="http://www.example.com/alternateimage.ico"/><![endif]-->

Check this as well What is currently the best way to get a favicon to display in all browsers that support Favicons?

score 0 · Answer 3 · answered Sep 30 '15 at 00:54

Generally, I like to keep the compatibility option--and so use .ico files. As far as sizing options, an .ico file actually can contain more than one version of the image.

When I have art to export, I usually do it at 256 x 256, and use an icon generator such as iConvert Icons (Mac-based), which automatically generates an assortment of images at different file sizes and bit depths.

Why isn't my favicon showing in all browsers

3 Answers3