Website Icon Not Showing Up in Google Chrome

Question

I've visited these questions and none of the answers worked for me:

Why doesn't my fav icon work in Chrome any more?
Chrome doesn't show the favicon

My Code

My website is http://mikeyaworski.com and this is the code I use to set my icon:

<head>
    <title>mikeyaworski</title>
    <link 
          rel="shortcut icon" 
          href="http://mikeyaworski.com/myicon.ico" 
          type="image/vnd.microsoft.icon" 
    >   
</head>

This is my entire code.

What I've Tried

Instead of rel="shortcut icon"I've tried rel="icon"
Instead of type="image/vnd.microsoft.icon" I've tried type="image/x-icon"
Instead of href="http://mikeyaworski.com/myicon.ico" I've tried href="myicon.ico"

The icon works in Mozilla and Internet Explorer. The icon does not work in Google Chrome. Any ideas?

You can just use `favicon.png` (or ico) in the root directory, you don't even need any markup. — Radley Sustaire, Jan 22 '14 at 23:20
@RadGH I have it in the root directory (http://mikeyaworski.com/myicon.ico) but any other pages on my site (http://mikeyaworski.com/about.html) don't use the icon, assumingly because they don't have the markup. — Michael Yaworski, Jan 22 '14 at 23:35
Use the name `favicon.ico`, the filename is important there ;) — Radley Sustaire, Jan 23 '14 at 00:04

score 5 · Accepted Answer · answered Jan 22 '14 at 23:18

Your html is invalid and your browser tries to fix it. In doing so your link tag ends up outside the head and is ignored, fix your html and it will work

<!DOCTYPE>
<html>
  <head>
    <title>mikeyaworski</title>
    <link rel="icon" href="myicon.ico" type="image/vnd.microsoft.icon">

  </head>
  <body>    <!-- body tag should be here -->
    <h1 style="text-align:center;font-family:trebuchet ms;" id="top"><br><br>Hompage</h1>
    <p>
    Coming soon. Until then, view my <a href="http://stackoverflow.com">StackOverflow</a> and other StackExchange profiles:
    </p>

    <a href="http://stackexchange.com/users/2644958">
      <img src="http://stackexchange.com/users/flair/2644958.png?theme=dark" width="208" height="58" alt="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites" title="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites">
    </a>


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

Specifically the `` tag in the website comes before the `` tag, which was fixed in Musa's code. That's the main issue. The whitespace / indentation / etc is not important to the browser (In most cases, anyway, never have white space above the doctype!). — Radley Sustaire, Jan 22 '14 at 23:23

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

Try using the following code:

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

Or Else have a go at the link below with similar discussion:

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

Update: Or else give a following link a try: Fix missing favicons on Google Chrome

Hope this helps. Thanks, Jatin

edited May 23 '17 at 11:59

Community

1
1

answered Jan 22 '14 at 23:20

Jatin

3,065
6
28
42

Website Icon Not Showing Up in Google Chrome

My Code

What I've Tried

2 Answers2