Add a Favicon.ico to Your Site
By Zabrina Way
Being a successful webmaster is all about paying attention to the little details. One of those often-overlooked little details -- 16 by 16 pixels, to be exact -- is a favicon.ico.
What is a favicon.ico?
A favicon.ico, also known as a favicon, is a small image file that represents a website, much like a logo. The most important thing to remember is that it will be displayed alongside your website's name in a user's favorites menu (this includes "bookmarks" in other browsers). It is also usually displayed in the tab title (if the browser supports tabs) while surfing your site. In some browsers, it is displayed in the URL or location bar, too.
http://stackoverflow.com/questions/2268204/web-favicon-dimensions
Something similar is said on W3.org: w3.org/2005/10/howto-favicon They also specify the formats: The format of the image must be one of PNG (a W3C standard), GIF, or ICO. – Zasurus Jun 26 at 11:24
Wikipedia has this to say:
Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).
I think the best way is to use a 32x32 gif and test it with different browsers.
http://www.w3.org/2005/10/howto-favicon
Method 1 (Preferred): Use of a rel attribute value defined in a profile
The first approach for specifying a favicon is to use the
rel attribute value "icon" and to define what the value means via a profile; profiles are discussed in more detail below. In this HTML 4.01 example, the favicon identified via the URI http://example.com/myicon.png as being a favicon:<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>http://stackoverflow.com/questions/9312638/optimal-format-and-size-and-browser-support-of-a-favicon
Not all browsers support all sizes of favicons. The best 'one' to use, is the one that will be displayed! That said In my experience, a 32x32 PNG file looks the best.
You can use
<link rel='icon' href='images/favicon.png' type='image/png' /> in your<head> tag to specify the icon picture and keep a smaller 16x16 ICO file in the root directory as well. This will let the browsers that can't handle displaying a PNG file for a favicon, fallback to the ICO in the root directory.
No comments:
Post a Comment