What is a Favicon & How Can I Have One?

What is a favicon? A favorites icon!

favicons1.jpg

A favicon is a website icon, usually a smaller version of a company logo.  This icon is displayed in the address bar of a browser window and are also used to identify a bookmarked website.
They were first introduced by Microsoft in Internet Explorer 4, but now are cross browser compatible.

browseraddy.jpg

Why have a favicon?
Most peoples bookmarks or favorites list is a very cluttered place. Having your website link stand out with a nice graphical reminder is a good way to get their attention again.

How to make a favicon:
To make your own custom favicon, Photoshop is the program of choice. The icon design is best kept simple as the size is a very tiny 16×16 pixels. Usually, your company logo or something simple will do.
Next, you’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics.
(Remember to install this plugin before you get started.)
Many web designers change their preferred image’s file extension to .ICO without converting the file to a Microsoft Icon File.  Simply changing the extension causes a format error as the file doesn’t match the extension and the image will not appear in the browser window.

Only the .ICO format is completely cross-browser compatible with all modern browsers.
Once you’ve exported your icon as an .ICO file, there are two ways to have it appear.

Method one:
Simply upload your new icon to the main (root) directory of your site, ie. www.example.com/favicon.ico.

Method two:
Add this to the < head > of your html.
link rel=”icon”href=”http://www.example.com/favicon.ico” mce_href=”http://www.example.com/favicon.ico”

Discussion Area - Leave a Comment

You must be logged in to post a comment.













affiliate_link