Crash Course in Favicons
Favicons have come a long way since they were first introduced in Internet Explorer. The favicon was created by Microsoft for Internet Explorer but at that time it did not conform to the W3C HTML recommendation because the rel attribute has to contain a space-delimited list of link types, the .ico didnt have a registered MIME type and using a reserved location is what is know as link squatting or URI squatting to the W3C.
When someone looks through their bookmark links or at the address bar and sees your logo or image as the favicon on your site, it shows that you care to go the extra mile when it comes to design and branding.
Before, these 16 by 16 pixel images placed in the root of a server, were called favicon.ico and were only used for bookmarks. This brought about a security concern among website visitors since webmasters could see the amount of people that had bookmarked the site by taking a peek at the access logs and see how many downloaded the favicon.ico file. Now browsers just display the favicon in the address bar on every visit making it less of a security issue. The image formats have expanded as well to included animated gifs and PNG’s. Although putting the favicon at the root of a server is still sometimes practiced, it is generally perfered that you use a piece of html in the <head> section that points to the location of the favicon. It looks like this:
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" mce_href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon"><link rel="icon" href="http://yoursite.com/favicon.ico" mce_href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon"><link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />;
Or if your document is XHTML, you use this:
Now although it is not 100% guaranteed that the favicon will always display on every browser every time, I believe it to be a good practise to integrate on into your website. When someone looks through their bookmark links or at the address bar and sees your logo or image as the Favicon on your site, it shows that you care to go the extra mile when it comes to design and branding. In website design, image is everything so why not put your image everywhere!
Want an avatar? Get a gravatar! • You can link to this comment
The thing with Devlounge’s current favicon is not that you’ve used it to spruce up the image of this website, but you’ve instead shown that Splash Press Media has the authority and control over it. It’s not always comforting…
Want an avatar? Get a gravatar! • You can link to this comment
It also helps you to find the website when you have them opened up in the tabs..
>link rel=”icon”
type=”image/png”
href=”/somewhere/myicon.png” /<
so this is just for xhtml pages?? What if you use a .ico would you swap the png image type??
Want an avatar? Get a gravatar! • You can link to this comment
Thanks for that bit of code! Generally when I am writing about something I am going to be directing to xhtml or strict, “web 2.0″ code since a lot of these topics pertain to making your site more up to current standard.
Want an avatar? Get a gravatar! • You can link to this comment
As well I would PERSONALLY not use an .ico, just png across the board since both html and xhtml can handle it as long as you remember to change the mime type in the html code to be image/png.
Want an avatar? Get a gravatar! • You can link to this comment
@Chris, thats just a certain way of looking at it. I would see it as because of Slashpress, this website can become a much more viable and reputable source of blogging and information. Having a company like Slashpress behind this website gives writers like me a bit more clout which is wonderful if your new to the scene and trying to gain professional momentum.
Want an avatar? Get a gravatar! • You can link to this comment
Hi,
Why is it that this is so inconsistent. I can’t get it to work in IE?
http://www.epochwebdesign.com/
Want an avatar? Get a gravatar! • You can link to this comment
I think .ico has more cross-support, to be honest. Moving forward gif or png will become the norm though, but IE6 doesn’t support either.
I think it’s also worth mentioning that there’s a free Photoshop plugin allowing you to output ico files, which it doesn’t support natively. Easier than buying Microangelo or some other icon editor…
Want an avatar? Get a gravatar! • You can link to this comment
How can I make the favicon roll from up to down?