How to Create Icons with FavIcon Generator in CSS3 - dummies

How to Create Icons with FavIcon Generator in CSS3

By John Paul Mueller

A favorites icon is one that appears in the browser’s address field when people access your site. CSS3 allows you to create icons, including the favorites icon. The icon can also appear on tabs and also in the user’s favorites list. Using a favorites icon can help people remember your site and make it easier to find in a list of sites.

Of course, site branding is an essential part of giving a site a special feel. The FavIcon Generator takes any .BMP, .GIF, .JPG, or .PNG file you own and turns it into an icon you can associate with your site. When working with .BMP or .PNG files, you can also create transparent areas so that the icon can have something other than a square shape.

To access the FavIcon Generator, you click FavIcon Generator on the web Tools menu of the main page. This is how the page appears when you access it.


Provide the name of a compatible graphics file on your hard drive to use for the favorites icon. You can use any file up to 150 KB in size. As an option, you can also choose to include both a desktop icon and a large icon with the resulting favorites icon. After you make your selections, you see the output. Here is typical output for the example.


Click Download FavIcon to obtain a copy of the result in icon (.ICO) format. When you select other icon sizes, all three icons appear in the single file. The browser or operating system will select the correct size for a particular need.

The More Information on FavIcon section of the page tells you how to use your icon to brand your page. All you need to do is add a tag to your page so that the browser knows which icon to display. The change isn’t immediate and it does take time for many browsers to recognize the icon.