Place the favicon.png also in the root (not required, just practical to have them all together) of your website. The PNG should be 32 × 32 pixels, use either 8 (256 colors) or 24 bit (16.7 million colors) color depth (both seem to work), transparency is supported. Define a PNG icon for other browsers if you would like to use transparency Place the favicon.ico file in the root of your website. ICO file with icons in it in the size 16 × 16 pixels (16 colors). Define a normal favicon for use in an older browsersĬreate a. Personally I would recommend the following for a “normal” webpage: 1. I recommend that you make the PNG in 32 × 32 pixel format – Windows 7 for example uses this nicely in the taskbar:

In the other examples you will see what the bee favicon looks like with the use of a PNG – they blend in with the design of the browser. If you look carefully at the previous examples, then you will see in the first example ( Internet Explorer) that on the tab there is a white box holding the favicon. The use of this format (if transparency is used) allows us to get rid of the odd background color which typically does not match with the browser tabs.

Support for 24-bit and 32-bit color palettes (more colors).

As did some operating systems like MacOS X and certain Linux variations. PNG TransparencyĪs time moved on, and PNG as a graphical file format started gaining on GIF (I believe as an Open Source alternative), W3C adopted PNG as their preferred file format for icons. So far I know Firefox supports it, and some say that Opera does as well. Although I do not entirely agree with this, keep in mind that most browsers will not show the animation anyway. The can also reside on other websites – in that case you’d have to provide the entire URL: href=””Īnimated icons is frowned upon by some. The location of the animated GIF can be on your own website as long as you provide the full path. Initially the type=”image/gif” was omitted, which is probably not correct.

How to make a favicon for your website