Favicon for your Site / Blog

by Admin on November 17, 2008

Welcome back!

Every once in a while when you bookmark a Web page in Internet Explorer / Firefox an interesting thing happens. A strange image appears in your bookmark menu and before the URL in your browser’s address line.

This is a “branded icon” — a special custom graphic that is associated with a particular URL. In this age of aggressive competition for attention, it’s important to use every trick you can to make your URL and bookmark memorable. A branded icon will make your URL stand out from ordinary bookmarks for the majority of Websurfers.

Your icon will appear both in the user’s Favorites list and the History/Address area of the browser. If someone adds a link to your page in his or her Windows Start menu, your icon will show up there, too, as well as on the Desktop, the Quick Launch toolbar, or any other folder or menu. (Wouldn’t that be
nice?)

In order to create icons, upload them to your Web site and make them viewable in your users’ Favorites lists, you must have all of the following: Windows 95 or later, Internet Explorer 5 or later, Icon editing software, FTP access.

Step 1: Creating Your Branded Icon

I’ve found that the easiest way to create a branded icon is to start with a graphics design app like PaintShopPro, Webster2 or RealDrawPro.

Bear in mind that the final browser icon will be 16 x 16 pixels, which is quite small. It will also be square, which limits your creativity somewhat. Your icon will have to look good at this small resolution, so you need to design it accordingly.
In your favorite graphics app, create a 100 x 100 px square. Depending on your design, the square could be one of your site’s colors.

When you have a design you like, reduce it to 16 x 16 px for the acid test. You may have to play around with it to get it to look good that small.

Now export it to a .jpg at the highest quality.

Step 2: Convert To Icon File

There are a number of icon apps in the market but I’ve found the best to be Icon Translator. I like it because you can convert JPEGs, GIFs, or BMPs into icons in seconds. It’s easy to install and use. The learning curve is less than a minute.

There are two icon-naming conventions. One is to name your icon “favicon.ico.” The other is to use unique names for your icons to distinguish them, which is what I do and recommend.

You should save your icon to 32 x 32 so in case people want to add your link in Windows, it will be larger. IE will automatically shrink it to 16 x 16.

Step 3: Add Code to Your Web Page(s)

In order for your icon to associate with your page, you mustadd the following in your tag:

Remember that your icon must have a .ico extension to be recognized.

Step 4: Upload Icon and Encoded Page to Your Server

Normally, the icon goes in your root folder.


Related Posts
Related Websites

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

</