Favicon with GitHub Pages - html

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.

Related

Cannot add favicon in Blogger

I am using a third-party template in Blogger and favicon option not showing in Layout. I have used this code but not working
]]></b:skin>
<link href='https://live.staticflickr.com/65535/49497319651_bd2f1deb42_m.jpg' rel='icon' type='image/png'/>
you can make or design a 16*16 pixel image in a .png format then use one of the following snippets for adding the favicon itself:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

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 not showing in Chrome and IE8

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...

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>