I want to make a favicon for my web page. I found a sample but it's not working for me. Can someone please help me get it to work. On the index page of the web site I put this in the of the page.
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
!-->
Can I put this on specific pages that I want to display the favicon or does it have to be somewhere at the root of the site?
If you can think of any solution I would really appreciate it. Thanks for any help!
Try this, your comment end was in the wrong place
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
!-->
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
Assuming you are using IE conditional comments for a reason, it looks like your comment syntax is off. You can read more about them here.
Otherwise, the conditional comments aren't specifically needed for a favicon; your first tag looks good to me.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Yes, you can use unique favicons for individual pages, but browsers go cache crazy and will usually show the most recent icon for that domain unless otherwise instructed. For example: if you set an icon on your home page, but then didn't set one on a subpage, it would likely keep the home page's icon.
Related
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
the head of my site starts with this but the favicon still won't show up inside of the title bar on any of my pages.
if you want to check for yourself the site is http://viewwit.com/ (I know it's bad, I'm making it just for fun).
I can't figure out why it isn't working. Any help would be awesome.
Try these
<meta charset="utf-8">
<link rel="shortcut icon" href="http://viewwit.com/image/favicon.ico" />
Take a look at the meta charset
As an easy fix, you can place your favicon within the root directory (same place as index.html). This is the default location which a browser will look for when searching for a favicon.
<link rel='shortcut icon' href='img/favicon.ico'>
The above line is inside head part of page.
favicon.ico is inside img folder.
Doesn't work in Firefox and Chrome.
I restarted browsers, cleared the cache many times...
Any suggestion.
I also tried:
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
You forgot to self-close the link tag.
I think it is recommended to use double quotes as well:
<link rel="shortcut icon" href="img/favicon.ico"/>
If this doesn't work, have you tried to actually access the favicon image by typing the url like: http://example.org/img/favicon.ico to make sure it is reachable ?
Try using:
<link rel="icon" type="image/x-icon"
href="image/favicon.ico"/>
without the "shortcut"
if that doesn't help, you might find something in this
Wikipedia article on favicon
If any of the other answers don't work, just put ! in front of the tag.
i have a network based on php and html. Now i have the issue, that the favicon doesn't show up in google-chrome. If i use firefox all works well. Any advices?
My Code:
<link rel="shortcut icon" href="http://teabag.webclient2.de/minis/images/favicon.png" />
Website: http://teabag.webclient2.de/minis/
Thanks!
I just checked out your website and noticed you have <link> placed in the <body> tag.
It should be within the <head> of the document instead. In doing so, it will work.
Try this:
<link rel="icon" href="http://teabag.webclient2.de/minis/images/favicon.png" />
It worked for my icon :)
Try clearing your cache. Then add this:
<link rel="icon" type="image/png" href="http://teabag.webclient2.de/minis/images/favicon.png" />
Is it possible to have this code:
<link rel="icon" href="icon.gif" />
Using css document?
(I would rather not have to go through and add that to every pages)
and is it possible to set title of page using css(I am not gonna use it as all pages have different title but just for general info)
You cannot set the favicon using CSS.... You need to use a link tag with rel value of shortcut icon.
Inorder to set that, you need to put the below string in between the <head> tags..
<link rel="shortcut icon" href="favicon.ico" />
-----^-----
<!--Remember to have .ico as the extension else
some browsers fail to load other extensions -->
You need to also specify the type attribute here type="image/x-icon" if IE fails to load your favicon, if it loads fine, you can just ignore the type attribute.
You can't do it using CSS it can only be done by inserting
<link rel="icon" href="icon.gif" />
as you have described above..
CSS is used to format some text/images etc in the page and and there is nothing to format in icon let me guess if you are working on many pages you probably have either a blog or an script to generate pages just add this line of text in it..
And you can always change icon of each page at once by just changing the icon itself...:)
You can't set a favicon from CSS - if you want to do this explicitly you have to do it in the markup as you described.
Most browsers will, however, look for a favicon.ico file on the root of the web site - so if you access http://example.com most browsers will look for http://example.com/favicon.ico automatically.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
In href, you have to pass the image url.
Here is the combination of combination of .ico and .gif image
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
I've been wondering how to code something I don't know what it's called. Basically, (I don't have enough reputation to insert an image), it's the little icon next to your tab showing what website you're on. Like on facebook it's the "f" with blue background and google is the "g" with the colors... :\
Could anyone please help me with how to implement it on my website and what it's called? Thanks so much
It is called favicon.ico and you can generate it from this site.
http://www.favicon.cc/
This is for the icon in the browser (most of the sites omit the type):
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://example.com/favicon.ico" />
or
<link rel="icon" type="image/png"
href="http://example.com/image.png" />
or
<link rel="apple-touch-icon"
href="http://example.com//apple-touch-icon.png">
for the shortcut icon:
<link rel="shortcut icon"
href="http://example.com/favicon.ico" />
Place them in the <head></head> section.
Edit may 2019 some additional examples from MDN