How to Create a Media Query in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
CSS Code Hinting in Dreamweaver

How to Create Icons with FavIcon Generator in CSS3

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.

image0.jpg

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.

image1.jpg

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.

blog comments powered by Disqus
How to Apply CSS3 Effects and Transforms in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
CSS3 Properties
How to Position Graphics on CSS3 Sites
The CSS3 @font and 3D Transforms
Advertisement

Inside Dummies.com