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" />
Related
For some reason, the favicon just isn't showing. The website is gracedli.com.
You can see the favicon at gracedli.com/favicon.ico and my code to add it is (currently only on index.html):
<link rel="icon" href="favicon.ico" />
I've cleared the cache and used multiple different browsers, and for the life of me, I can't figure it out. Would love some help on it (everything's written in pure HTML/CSS so you can take a peek at the full code at the link). Thank you so much!
You have put the contents of <head> in <header> instead. Move them into , and that would possibly solve your problem.
Common reasons your Favicon is not showing
Check file path : You need to ensure that your favicon’s file path is correct.
The link of favicon is not at the right location : It is important to place the link to add your favicon in the head section of your webpage.
Syntax errors : A minor syntax error in the link of favicons could result in your favicon not showing.
When favicon file in the root directory, but not linked : Always put the favicon in the root directory, and name it favicon.ico. Almost all modern browsers look up /favicon.ico by default but make sure that you have these links in your head section:
link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
link rel=" bookmark" href="favicon.ico" type="image/x-icon" />
Because in many cases Just because the favicon file is in your root directory, it does not mean that it will automatically recognize.
Your browser has cached your site as one without a favicon : May be your browser has ‘saved’ your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
May it helped to solve the issue…
Huge shout out to Timmy Chan (in the comments of the question) for noticing this, but I put my tags in <header> instead of <head>. Once I moved them, it worked!
Here is my problem, I have 2 link rel tags in my html index header. One tag is for my stylesheet the other is a shortcut icon link rel to use a icon in my browser tab (fyi using FF19).
<link rel="shortcut icon" href="tophat2.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
Each rel link works fine on its own. when I have them one after another though the one on the bottom (being parsed second) is the only one that is displayed however. They appear to be overriding eachother so I conclude I cannot have both a icon shortcut and a stylesheet each as a separate rel link but that is the only method I can find via Google so I am stuck.
See http://mathiasbynens.be/notes/rel-shortcut-icon. It says:
Most sites use the following HTML to specify a favicon:
<link rel="shortcut icon" href="/favicon.ico">
Looks okay, right? Guess what — it isn’t!
Today, I learned that shortcut is not a valid link relation. Indeed,
it doesn’t show up in section 4.12.5 of the HTML5 specification on
‘link types’. It is, in fact, proprietary to Internet Explorer.
Without IE, rel="icon" would suffice to specify a favicon.
Since you are using Firefox, that would explain why it isn't working. Try just this:
<link rel="icon" href="tophat2.ico"/>
But be aware that this may not work in IE 8 or below. Later on in that same post it says:
If the shortcut value is omitted from the rel attribute, Internet
Explorer ignores the declaration entirely, searches for a file called
favicon.ico in the site root, and uses that instead. In fact, almost
every browser does that when there’s no link rel="icon" specified.
Using rel="icon shortcut" won’t work in IE either, since it doesn’t
treat the rel attribute as a space-separated list.
Just make sure to always put the favicon in the root directory of your
site, and name it favicon.ico
OK I FIXED IT!!! I have no idea why the ** this worked but it did. I copied my rel link=icon
tag and pasted it as a duplicate above the 2 waring rel links. The duplicate being parsed first appears broken which doesn't matter but now the 2 below work so I have a working stylesheet and icon. Thanks for trying to help everybody. This one shall probably remain a mystery.
I'm creating an HTML web page.
I'm nowhere near finish and therefore should not focus too much on the following matter at the moment.
But I'm confused about why my code for the Shortcut icon is not working.
I'm testing everything by placing all files in the same folder (offline, no servers or anything similar)
The code is
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico">
I tried with different ico files and it will only work with an ico uploaded to a website.
For example the following code will work.
<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">
Try:
<link rel="SHORTCUT ICON" type="image/x-icon" href="~/favicon.ico">
or:
<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
I ran into this similar problem, and it turned out that the size of the actual file was what caused the issue. According to sources it has to be either 16x16 or 32x32. I would use an icon generator like: x-iconeditor.com.
If you want a favicon on local file, you will have to use Data URI
See this answer : local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
set favicon icon size 16x16 it will work in chrome...
I HAD the same problem. The site I "borrowed" from used a folder called "icons" for the location of the .ico file so I followed that exactly. The service my girlfriend used was Web.com. For whatever reason with Web.com if a shortcut icon in located anywhere other than the root directory, it will not show up in Internet Explorer. I simply moved the favicon file into the same place index.html was and changed that one line of code in the index to reflect that.
Solved (in my case anyway)! Good luck!
<link rel="icon" href="relative_PATH/favicon.ico">
Try to put the all relative path to the icons file
It doesn't work, absolutely because the link target is not correct.
If you put the icon in the same folder of your web page, then correct the link to the following:
<link rel="SHORTCUT ICON" type="image/x-icon" href="./favicon.ico">
which means favicon.ico is in the current folder.
However you can use the debugger i.e. chrome debugger and navigate to
the source code of your web page, i.e. right click on the link of your icon ->
open in new tab, and see how it works
Try to add the absolute route for the image icon and Use 48x48 px image size.
That worked for me
<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />
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.
<link rel="shortcut icon" href="/favicon.ico">
<link rel="Bookmark" href="/favicon.ico">
I saw it somewhere,but is <link rel="Bookmark".. necessary?
That bookmark link is incorrect. It should be:
<link rel="bookmark" href="http://my.site.com/some/path/permalink.html">
ie a perma-link and not the icon. See 6.12 Link types from the HTML 4.01 specification:
Bookmark Refers to a bookmark. A bookmark is a link to a key entry
point within an extended document. The
title attribute may be used, for
example, to label the bookmark. Note
that several bookmarks may be defined
in each document.
This is the cross-browser way of adding favicons:
<link rel="icon" href="/favicon.ico" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
the icon file itself would preferably be 16x16 pixels and in gif format (IE6 wont use transparent png) and under 500 bytes. Though most modern browsers now accept practically anything, though of course it will be your bandwidth and their waiting.
i googled for a page stating this.
link
as cletus mentions, the Bookmark link is not for favicon and the code you provided is actually wrong.
EDIT: the favicon link does not influence your bookmarking itself, yet it helps the browser store a little icon on the tabs or your browser's bookmarks' menu. StackOverflow uses this icon.
But Is It necessary? If your icon is located at /favicon.ico, no it is not absolutely critical at all. Most browsers check that path by default, but if you like me put your favicon in a directory like /images/favicon.ico you would need to tell the browser to get it from there or your server will build up alot of 404-Not Found errors in its log. Which will slow things down (a bit). Also you might want to have different icons for different directories etc.
This is a crossbrowser way to make sure the browser knows where your favicon is located for both viewing the page and bookmarking the page. Chances are, if you don't know what that code is, you don't have a favicon. The easiest way to make on is to make a 16x16px gif and change its extension to '.ico' - then you'll get your little icon in the corner of the browser bar (depending on your browser).