1

Here is a site we are currently developing. After placing favicon and linking it appropriately, it is not showing up in chrome. However its coming up in Firefox.

Can someone point out the silly mistake I had made :)

http://us.accept.kia.eu/us/models/kia-sorento-2014/

Jagadeesh J
  • 1,211
  • 3
  • 11
  • 16

3 Answers3

2

Favicons must be defined in the <head> part of a site. Firefox will render it fine when it's in the body, but Chrome doesn't. I don't know how Internet Explorer/Opera/Safari behave, but go with the safe choice, and put it in the header.

If you can't, when you don't have permissions to for example, you could use jQuery to append it to the head section.

Mave
  • 2,413
  • 3
  • 28
  • 54
0

Having inspected the site I can see that your header section does not contain your icon link reference. It appears to be in the body tag.

<link rel="Shortcut Icon" href="/eu/responsive/img/favicon.ico" type="image/x-icon" />

Put this line in your head tag and it should work fine.

jampez77
  • 5,012
  • 7
  • 32
  • 52
0

In your code <html> tag appears twice, once at the top 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> (you can remove this line)

and second inside conditional fragment:

<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js " lang="en" country="us">  <!--<![endif]-->

It appears Chrome can't handle this issue correctly and renders it twice. I believe when you fix this problem removing marked line, favicon will appear.

zangrafx
  • 129
  • 3
  • I already know html is coming twice (which I dont know why) but it never striked my mind. Thanks :) – Jagadeesh J Dec 19 '14 at 06:26
  • No problem :) You can always compare to HTML5 Boilerplate example [link](http://www.initializr.com/builder?print&h5bp-content&modernizr&h5bp-iecond&h5bp-css&h5bp-csshelpers&h5bp-mediaqueryprint&h5bp-mediaqueries&izr-emptyscript) – zangrafx Dec 19 '14 at 13:45