How to set-up a favicon?
FaviconFavicon Problem Overview
I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.
This is the code I am using:
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
But it is not working - can anyone please assist? I've saved the file favicon.ico on the same level as my html file (on a subdirectory).
Many thanks
Favicon Solutions
Solution 1 - Favicon
With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device.
You should have a look at http://realfavicongenerator.net/ to automate a large part of this work, and probably at https://github.com/audreyr/favicon-cheat-sheet to understand how it works (even if this latter resource hasn't been updated in a loooong time).
One complete solution requires to add to you header the following (with the corresponding pictures and files, of course) :
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
In June 2016, RealFaviconGenerator claimed that the following 5 lines of code were supporting as many devices as the previous 18 lines:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Solution 2 - Favicon
I use this on my site and it works great.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
Solution 3 - Favicon
There is a very simple method to set a favicon, which had been around for a long time AFAIK.
Place the favicon.ico file in the default location.
i.e
http://www.yoursite.com/favicon.ico
This works in almost every browser without a <link> tag.
However, this works only if it is an *.ico file. PNGs and other formats still have to be linked with a <link> tag
Solution 4 - Favicon
Below given some information about fav Icon
What Is FavIcon? FavIcon is nothing but small image which appears top left along with the application address bar title.Standard size specification for favicon.ico is 16 by 16 pixel. Please see below attached figure.
How It Works ? Usually we add our FavIcon.ico image in the route solution folder and automatically application picks it while running. But most of the time we might have to use below both link reference.
<link rel="icon" href="favicon.ico" type="image/ico"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Some browser expect one (rel="icon") Some other browser expect other rel="shortcut icon"
Type=”image/x-icon” OR Type=”image/ico”: once expect exact ico image and one expect any image even formatted from .jpg or .pn ..etc.
We have to use above two tags to the common pages like – Master page , Main frame which is getting used in all the pages
Solution 5 - Favicon
you could take a look at the w3 how to, i think you will find it helpful
your link tag attribute should be rel="icon"
Solution 6 - Favicon
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>
rel="shortcut icon" should be rel="icon"
Source: W3C
Solution 7 - Favicon
From experience of my favicon.ico not appearing, I am sharing my experience. You can't get it to show until you put your website on a host, therefore, try put it on a localhost using XAMPP - http://www.apachefriends.org/en/xampp.html. This is how the favicon appears and like others recommended, change:
rel="shortcut icon"
to
rel="icon"
Also this way .png favicons can be used for slickness.
Solution 8 - Favicon
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
Solution 9 - Favicon
In my site, I use this:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
To simplify your life, use this favicons generator http://realfavicongenerator.net
Solution 10 - Favicon
This method is recommended
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
Solution 11 - Favicon
Try put this in the head of the document:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
Solution 12 - Favicon
I use this https://realfavicongenerator.net/ to generate all the possible favicons scenarios and it is free.