Are there any restrictions on naming the favorites icon (favicon) file as anything other than favicon.ico?
I know for sure that it can be named anything, as long as the favicon tag refers to the correct file name.
For example:
<link href="/somefile.ico" type="image/x-icon" rel="icon" />
<link href="/somefile.ico" type="image/x-icon" rel="shortcut icon" />
The code above works just fine in displaying the icon.
What I want to know is does this violate any W3C/HTML specifications or this is permitted usage?
According to W3C, the preferred method is to actually specify the favicon in the html document rather than relying on favicon.ico in the server root.
Related
When a website provides more than one favicon link tag, what kind of rules does a browser take to determine which icon to be actually used?
For example, the html src of IMDB includes following snippet:
<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">
Which icon is selected and what does other ones used for?
I noticed that the one with rel="shortcut icon" is always set as highest priority. If so, what will a browser do with a webpage with multiple shortcut icon tag?
What will a browser do with a webpage with multiple shortcut icon tag?
I've experimentally tested that when multiple shortcut icon links are provided, as long as each link has some different attribute such as the type or size, the browser will pick the best icon depending on factors such as the screen DPI or the accepted MIME types.
As a matter of fact, I have the following snippet in the header tag of a website I made:
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">
<link rel="shortcut icon" href="/assets/16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/assets/32x32.png" type="image/png" sizes="32x32">
I've noticed that every modern browser will pick the PNG version of the icon. In fact, I haven't seen any usages of the MS-ICO version of the icon, although I haven't tested if older browsers (such as older versions of IE) will pick the ICO version over the PNG version.
When a HiDPI screen is used, I've noticed the 32x32 version will be picked in order to be presented as a 16x16#2x favicon in the tab. Otherwise, the 16x16 version will be picked. Moving the browser window from a HDPI to a non-HDPI browser window will make the browser re-evaluate the current favicon and if needed, it will change it.
The proper link relation (link rel="") for creating a bookmark icon doesn't include the word "shortcut" .
According to this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
There are some sites which don’t even declare an icon. All browsers will simply check for a (favicon.ico) file at the root level of your website.
Shortcut is simply a workaround to designate an icon that is not named favicon.ico.
i.e You will have to use “shortcut” if you need multiple icons for various pages or subdomains. (also you need to specify a path to a specific ICO file.)
<link rel="shortcut icon" href="path/to/icon.ico" />
Most shortcut icon are presented in HTML like this:
<link rel="Shortcut icon" href="url" />
but many sites don't have shortcut icon in their html code but still chrome is showing me icons on tabs. How they made it? I want to download icons from different websites but I don't know where my crawler should look for them. Examples of websites where I can find it:
http://www.amazon.com/dp/0976470705?tag=lessolearn01-20&camp=0&creative=0&linkCode=as4&creativeASIN=0976470705&adid=0E34NG800FT9HMWYP4D6
http://www.startuplessonslearned.com/2008/10/lean-startups-vs-lean-companies.html
It is known as favicon (most of times!).
For the second link you pointed to, it is :
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon' type='image/x-icon'/>
Also, it could be added in several ways. For more info read this article.
On the second page give as example, the tag is
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon'
type='image/x-icon'/>
The attribute specification rel="icon" is practically synonymous with rel="shortcut icon".
On the first page, there is no tag that affects favicon issue, but at the server root there is a file with the name favicon.ico, i.e. http://www.amazon.com/favicon.ico, and that’s what browsers use, by convention. Putting an icon under such a name at the server root thus makes the link elements redundant, provided that you want to use the same icon for all pages. Of course, not everyone can put files at the server root.
you can also use .png file:
<link rel="shortcut icon" type="x-icon" href=".directory/image.png" />
The following is used to set the favicon in my html code:
<link rel="icon" type="img/ico" href="img/favicon.ico">
However, the icon does not show. Why?
Note:
I have confirmed that the file is on-disk at the correct path.
Is it really a .ico, or is it just named ".ico"?
What browser are you testing in?
The absolutely easiest way to have a favicon is to place an icon called "favicon.ico" in the root folder. That just works everywhere, no code needed at all.
If you must have it in a subdirectory, use:
<link rel="shortcut icon" href="/img/favicon.ico" />
Note the / before img to ensure it is anchored to the root folder.
Try this:
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
Favicons only work when served from a web-server which sets mime-types correctly for served content. Loading from a local file might not work in chromium. Loading from an incorrectly configured web-server will not work.
Web-servers such as lighthttpd must be configured manually to set the mime type correctly.
Because of the likelihood that mimetype assignment will not work in all environments, I would suggest you use an inline base64 encoded ico file instead. This will load faster as well, as it reduces the number of http requests sent to the server.
On POSIX based systems you can base64 encode a file with the base64 command.
To create a base64 encoded ico line use the command:
$ base64 favicon.ico --wrap 0
And insert the output into the line:
<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />
Replacing the word HERE like so:
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />
Try adding the profile attribute to your head tag and use "image/x-icon" for the type attribute:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
If the above code doesn't work, try using the full icon path for the href attribute:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">
I would like to know if it is necessary for me to specify it like this:
<link rel="icon" href="[URL]" type="image/x-icon" />
<link rel="shortcut icon" href="[URL]" type="image/x-icon" />
or can I just include it in the root and the browser will look for it?
Also what's the difference between rel="icon" and rel="shortcut" ?
All of the major five browsers look in the site's root for a file named exactly favicon.ico, regardless of type, automatically.
You can override this with a link element with rel="icon", or rel="shortcut icon". The latter is supported by every browser, while the former is more correct, but not recognised by Internet Explorer.
Most browsers these days will look for a favicon.ico file on the root of the site.
Which should I use:
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico" />
Or:
<link rel="icon" type="image/ico" href="favicon.ico" />
I've seen both in use and both work in a lot of current browsers - but which is more consistently supported by the most browsers?
OK, figured this out for myself...
rel
<link rel="icon" will work in IE8, 9, FX and Chrome but not in IE6 or 7. The rel="shortcut icon" is supported by IE6 & 7.
The W3C standards state a space delimited list and that the key is just icon. This means shortcut icon works in all browsers - handled incorrectly by IE and as a compound key in everything else.
type
All browsers appear to accept and handle the Windows icon format for the file.
IE expects this to be served as MIME type image/vnd.microsoft.icon but only seems to consistently work if the content type is image/x-icon.
Everything else expects image/ico but pretty much ignores it.
So the best format is:
<link rel="shortcut icon" href="favicon.ico" />
However if IE has problems handling the file or your server is not passing the image/x-icon content type in the headers it can help to specify the IE expected type:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
I was tired of resizing favicons manually, and then having to create multiple <meta> and <link> tags for each size, and also using the correct template tags for the web framework I was currently using.
So I wrote a free little tool for generating all the correct sizes, and also for generating the markup required. Check it out at https://favicongenerator.co