<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).
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!
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 favicon does not work on some pages in IE.
But the favicon works on these pages as well in other browsers (tested in Firefox and Chrome).
Pages not showing the favicon in IE: link - favicon error in IE
Pages showing the favicon in IE: link - favicon works
You have tagged the question with the "doctype" tag. This is a clue of what might be happening...
I am confident that the issue is related to the malformed HTML (or XHTML) tags in the document which IE fails to render the favicon. I myself already had lots of "unrelated" issues due to malformed contents. I suppose, in this case, the document which fails to render the favicon is triggering a kind-of "quirks mode" in IE.
Unfortunately, there are so many issues with both documents which turns difficult to find out what exactly is the one triggering the specific IE "quirks mode" which causes the favicon problem.
The document where favicon works raises 61 errors and 3 warnings in the W3C markup validation service.
The document where favicon does not work in IE raises 98 errors and 25 warnings in the W3C markup validation service.
So, probably it is one of these additional 37 errors and 22 warnings at the failing favicon document which makes IE too much confused and incapable of parsing the thing as a whole.
I have not dived in the errors and warnings, because they are too many. But I'm sure that if the validation passed, favicon would be appearing at both pages.
IE doesn't show the favicons images of those of don't have type="image/x-icon".
I think the best thing to do is convert them to another format.
If you are displaying the icons manually then you could download each, convert it with an image program, and upload it to your site.
As said on this article:
Internet Explorer sees only the server MIME of the ICO file, otherwise
it ignores the file.
Try using this:
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">
From what i can see you are using
<link href="http://images1.content-ug.com/uniguru-cont/img/ug_favicon.ico" rel="shortcut icon" type="image/x-icon"/>
I want to ask you to follow a couple of steps in order to troubleshot you through your problem.
Copy your current favicon from this address
Rename it
Put it on the same directory as your problematic pages
Link the renamed favicon from the pages that have this problem by using the format as below (put the rel attribute first):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Lastly if all the above doesn't resolve your problem, then just remove the type from the link (even though i really don't think this will do any change)
<link rel="shortcut icon" href="favicon.ico" >
Hope this solves your problem
Here are a couple of things that I discovered while attempting to find answers for your problem.
Make sure the favicon.ico is a valid icon file. There are bad ico files out there that either are not true icons or they are just corrupted from a bad converter program. So Remake favicon.ico first and for most.
Make sure the file name is favicon.ico and located in the root directory for easy default purposes.
Internet Explorer will not show/display an icon if it is on your local harddrive. It needs to be on the internet. That is just IE not specific to other browsers.
Internet Explorer also don't like to display if you do not use www before your domain name.
You may also want to clear cache as well to make sure you aren't looking at your old temp files.
I hope this helps you out a bit.
The problem is the broken object/embed tags. Remove the markup below and the favicon should start working on that page (at least it did in my tests on IE9).
<object ...>
<embed class="u_v" type="application/x-shockwave-flash" ...>
</object>
You should have no need for that markup anyway, since the script immediately below it will generate the appropriate embed code for you.
Use this is all browser sported:
<link rel="shortcut icon" href="img/favicon.ico">
try this inner head tag.
Make the icon's file name as 'favicon.ico'
Keep the icon in root directory
No need to include like <link rel="" .... />. By default it will render the icon which named 'favicon.ico'.
IE caches the favicon. Try going to Internet Options and delete the browsing history there.
Try adding both these lines,may be this will work
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
I am using the following:
<link rel="shortcut icon" href="/images/favicon.ico" />
It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?
I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.
Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.
It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico" it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico" or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico" it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.
This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?
Example:
<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />
This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:
Add GET parameters
You can add an arbitrary GET parameter and value to the end of your favicon URI
(Tip: This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)
<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />
Rename the file
Rename your favicon file and reference the renamed file in your href attribute.
<link rel="shortcut icon" href="/images/favicon_version_2.ico" />
Hard Refresh
A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+R or Ctrl+F5 for Windows/*NIX and Command+R or Command+Shift+R on Mac will do the trick.
Explanation: The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalue to the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.
Extra nerdy technical notes: Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818 in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.
The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.
For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc
See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
you can try to put the icon to the root.
For me putting two link refs in the header worked.
FF did not display the icon until the second line was added
<!-- browser icon -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" >
<link type="image/x-icon" href="/favicon.png" rel="shortcut icon" >
Removing or leaving in the first / made no difference to how FF handled the icon.
The console reported
[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load:
Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no]
But it loaded the .png file anyway, without complaining in the browser window.
Perhaps the first slash in href="/images/favicon.ico" is causing a problem?
Have you tried
<link rel="shortcut icon" href="images/favicon.ico" />
?
What is the directory structure for www subdomain? Can you access other image files using the absolute path?
Fireworks often picks up the favicon.ico file automatically without any code, so long as it is the same folder as the document. Try moving your file up a level to avoid referencing issues.
This problem is annoying...
I usually just add a 16x16 PNG favicon to solve this.
Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest.
Hope this helps.
Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.
The protocol relative URL could be a good option (archived, you never know).
It is about network-path reference (explanation there), try:
<link rel="shortcut icon" href="//images/favicon.ico" />
for firefox you have to use a special tag:
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
Now when you drag it to bookmark bar the icon shows.
How do I write code where a company icon appears on the left side next to the URL address in the browser's address bar?
You are looking for a Favicon.
it loads www.whateveryouron.com/favicon.ico
if your domain is robermyers.com, just put a favicon.ico 16px icon thats accessible, and you're in like flint.
just try this googles or stackoverflows
You need to create a favicon. The favicon uses a standard (in Windows, at least) .ico file. If you have a logo, you can convert it at sites like http://www.favicongenerator.com/
In the <head> of your html page, use the <link> tag to define the location of the favicon like this:
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
You may need to refresh the page for the icon to display.
load a file on the webserver called favicon.ico
In modern browsers other fileformats than .ico works aswell. You can even put animated gif's in there!
DynamicDrive has an easy favicon maker too.
Different pages/directories can also call a different .ico with code similar to y0mbo's example (this is what Mint uses):
<link href="sc/ph645.43/images/icons/mint.ico" rel="icon" type="text/x-icon" />
This is a good article on favicons in detail.
I suspect animated favicons have the potential to go the way of the blink tag. Mint is using theirs to match their overall design, if you visit in FF3, you'll see that it matches the green color that FF uses to designate a recognized SSL cert.