CODEWITHSUNDEEP
htmlcssgoogle-chrome
lowcoupling
lowcoupling

Reputation: 2169

Chrome doesn't show the favicon

I can't manage to show the favicon of this site http://www.lowcoupling.com on chrome. I have checked it with Safari and the favicon is correctly shown How should i fix it?

UPDATE

here follows the first part of my css

<!DOCTYPE HTML>

<html b:render='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head profile="http://www.w3.org/2005/10/profile">


    <b:include data='blog' name='all-head-content'/>
    <title>Low Coupling</title>
    <meta content='!' name='fragment'/>
    <meta content='dynamic' name='blogger-template'/>
    <meta content='IE=9,chrome=1' http-equiv='X-UA-Compatible'/>
    <meta content='initial-scale=1.0, maximum-scale=4.0, user-scalable=yes, width=device-width' name='viewport'/>

   <meta name='text:Disqus Shortname' content='' />

<!-- Le styles -->
   <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet">
    <style type='text/css'>
    .hero-unit {
        background-color: white;
        min-height: 0px;
  padding: 0px;
  min-width: 0px;
  margin-bottom: 30px;

    }

      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }


      .sidebar-nav {
        padding: 9px 0;
      }

      .tweet{
          margin-top: 10px;

      }
      p.centredimg {
       text-align: center;
      }

      }
    </style>
   <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.css" rel="stylesheet">
 <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
 <script type="text/javascript">SyntaxHighlighter.all();</script>



<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-41136618-1', 'lowcoupling.com');
  ga('send', 'pageview');

</script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src='../assets/js/html5shiv.js'></script>
    <![endif]-->
<link rel="shortcut icon"  href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico'/>
  </head>
  <body>

<div class='navbar navbar-inverse navbar-fixed-top'>

Upvotes: 0

Views: 7434

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24703

enter image description hereYou have your meta tags and stylesheet includes within the body of your document and not the head

[image] This is your code. The head section is closed, for clarity. The body section is open thus showing you that the tags i was referring to reside here.

Upvotes: 1

stephenmurdoch
stephenmurdoch

Reputation: 34613

What happens if you add type="image/png" like so:

<link rel="shortcut icon" type="image/png" href="http://sites.google.com/site/lowcoupling/lowcouplingFavicon-01.png">

See this reference. Maybe even remove the 'shortcut' bit, and just have rel="icon" and if nothing else works, switch from a png to an ico file.

Upvotes: 2

Related Questions