If you don’t call the favicon, favicon.ico, you can use that tag to specify the actual path (incase you have it in an images/ directory). The browser/webpage looks for favicon.ico in the root directory by default.
Answer replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread: ICOs and PNGs both allow full alpha channel based transparency ICO allows for backwards compatibility to older browsers (e.g. IE6) PNG probably has broader tooling support for transparency, but you can find tools to create alpha-channel ICOs … Read more
That method will not work. The <title> only supports plain text. You will need to create an .ico image with the filename of favicon.ico and save it into the root folder of your site (where your default page is). Alternatively, you can save the icon where ever you wish and call it whatever you want, but simply insert the following code … Read more
The answers provided (at the time of this post) are link only answers so I thought I would summarize the links into an answer and what I will be using. When working to create Cross Browser Favicons (including touch icons) there are several things to consider. The first (of course) is Internet Explorer. IE does … Read more
Try http://en.faviconico.org/ online favicon converter. I used this site to convert PNG file into favicon, and the favicon file is still with transparent background.
Simply put a file named favicon.ico in the webroot. If you want to know more, please start reading: Favicon on Wikipedia Favicon Generator How to add a Favicon by W3C (from 2005 though)
You can make a .png image and then use one of the following snippets between the <head> tags of your static HTML documents:
Update for 2020: Sticking to the original question of 16×16 versus 32×32 icons: the current recommendation should be to provide a 32×32 icon, skipping 16×16 entirely. All current browsers and devices support 32×32 icons. The icon will routinely be upscaled to as much as 192×192 depending on the environment (assuming there are no larger sizes … Read more
There are actually two ways to add a favicon to a website. <link rel=”icon”> Simply add the following code to the <head> element: PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons. Note that you don’t have to precede icon in rel attribute with shortcut … Read more