Favicon not showing in Chrome and IE8 - html

Google Chrome and IE8/9 don't display my favicon. Here is my HTML code from the head tag:
<link rel="icon" href="images/favi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favi.ico" type="image/x-icon" />
Can you please solve this issue?

Try this: <link rel="icon" type="image/ico" href="path_to_icon/favicon.ico"/>

put it in the root directory and it should work...
<link rel="shortcut icon" href="favicon.ico"> for more info, see here http://en.wikipedia.org/wiki/Favicon
and you should better use the default name favicon.ico,
probably you have to clean your cache in your browser first...

Related

Google chrome doesnt load favicon

I opened Chrome's developers tools and it doesn't load my favicon at all when I looked for it at networks tab.
Here is my code:
<DOCTYPE HTML>
<head>
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
<meta charset="utf-8">
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
Try this one:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
Seems there's no issue with your code attributes.This is the standerd form
<link rel="icon" href="imagelocation" type="image/x-icon" sizes="16x16">
Try a Image from internet without downloading and make verify that it's not a issue of Chrome first.Then take a look to your code and location of the image are matching correctly with your location of file you have call your Favicon.
Accroding to your tag your favicon should be in a sub directory called 'img'.This may be a browser cacheing issue also. Try viewing page source (Right Click > View Page Source ) and go to the location of the image and try reload it.
Try adding type type="image/x-icon"
<link rel="icon" href='./favicon.ico' type="image/x-icon"/>
and try move the favicon.ico in an subdir /img
then
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
or with shortcut icon
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
or save the ico like a png
<link rel="shortcut icon" type="image/png" href="./img/favicon.png" />

Favicon with GitHub Pages

I'm hosting a few sites with GitHub Pages (User and Project Pages), but they are not displaying their favicons (in the browser).
<link rel="shortcut icon" type="image/png" href="/favicon.png">
Is the problem that GitHub displays the site with <frameset>? I know it's possible to display favicons (at least with Jekyll), but can I display a favicon on it's own?
Yes, you can.
Put this into the head part of your webpage:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
It is important to not put the slash before the favicon.ico part. Put the favicon.ico file in your repository's home directory.
It also works with favicon.png
<head>
...
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
The only problem is the slash / in "/favicon.png"
However this does not work for sub-pages!
The link should look like this - so you have the favicon on every page:
<link rel="shortcut icon" type="image/png"
href="{{ "/assets/images/favicon.png" | absolute_url }}">
The resolved URL looks like:
https://pme123.github.io/scala-adapters/assets/images/favicon.png
This expects the favicon.png in assets/images folder of your Jekyll project.
I used
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
as well as
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
or
<link rel="shortcut icon" type="image/x-icon" href="{{site.url}}/favicon.ico">
None of that worked. Finally I got it working by
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
in fact, seems that any of the above solution with an extra "?" at the end will do the trick.
<link rel="shortcut icon" type="image/x-icon" href="./Images/favicon.ico?">
look carefully i added a "?" at the end of the href.
if you did something like this , then go to your github.io page and hard reload.
You can use
ctrl/cmd + shift + r
to hard reload the page . That will clear your cache .
After that I am hopeful that you will see the fav-icon.
Also, make sure your ico or img is 16 x16 px. That was my issue also.

How to add favicon on newly created web page through notepad?

I have made a webpage through notepad. And want to have a "faveicon" but can't add it.
Here's my html's head part:
<link rel="shortcut icon" href="/favicon.ico"/>
after title part i typed this in head.
This worked for me..
<link rel="shortcut icon" href="/images/specialicon.ico" type="image/x-icon" />
Just check this url.. it will helpful to you..
Just add the following in your HEAD section, remember to change type and href:
<link rel="icon" type="image/png" href="http://example.com/myicon.png">
You can make a 16x16 png and then use
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="shortcut icon" type="image/png" href="http://www.example.com/favicon.png" />
If you place a favicon in the root folder of your website called "favicon.ico" then it will work!
By putting the image in the same folder where my web page was located and writing this code it worked :)
<link rel="shortcut icon" href="h.ico">

Favicon.ico is not working...is there something wrong with my code?

Hey ya'll I have this line of code here for my favicon.ico file
<link rel="Shortcut Icon" href="http://www.myurl.com/wp-content/themes/twentyeleven/favicon.ico" />
The file is in the right place and I cleared my cache and restarted my browser and its not working, it is also placed inside my header tags.
Try this one
<link rel="shortcut icon" type="image/x-icon" href="/yourAssetFilePath/favicon.ico" />
try the following:
<link rel="icon" href="icon.ico" type="image/x-icon" />
yeah, i just have
<link rel="SHORTCUT ICON" href="/favicon.ico" />
works for me,
it does do some funny caching thing though, and i think it's in IE that you need to bookmark the page before it appears?

Display web site logo on address bar

How can I display my web site logo on the address bar?
you just need the favicon.ico in your webroot. the browsers will pick it up automatically.
Using the suggested
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
allows to use differently named icons or different icons for certain pages.
You can put these inside <head> tag:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
Make sure that you specify the correct path, usually the root folder.
More Info about Favicons
The feature is called Favicon.
use a fave icon
<head>
<link rel="shortcut icon" href="http://www.your-page-name.com/favicon.ico">
</head>