Mike Web Guy Do things on the Web

10Jul/092

What is a favicon ?

You see that little M logo on a black background in the address bar ? That is this site's favicon. A favicon is a small file preferably 16x16 pixels or 32x32 pixels that gets to be displayed in your browsers address bar when you visit a website. If you haven't noticed them yet. You should start looking for them. They are a very simple way to make your website a little more memorable. Some browsers even display the favicon for links that you have bookmarked. In short if it's something that sticks out it will help your visitors remember your site easier.

So lets get started. There are two methods I prefer over all others to create this little image/logo. One is to start with an image that you already have and the other is to create a text based favicon using a free tool. Lets start with the image as that is probably the most harder way. Lazy people skip ahead now. First you need to have a square image that you have either created or have rights to use on your website. Next you will need an image editor to scale the image down to the size we need and to save it as a favicon. The best free image editor that I know of is IrfanView it's great download and install it really quick if you don't have it. If you are using a different image editor good luck. I'm going to asume that you know how to use it. If you are using IrfanView drag the image into it and then go to Image > Resize/Resample... Leave all of the default selections as they are and only change the width and height to 32x32 after that Ok your way out of that menu and then go to: File > Save because this image is super tiny to begin with we don't have to be greedy with quality. Drag the quality slider all the way up to 100. Under the Save as type: dropdown select: ICO - Windows Icon name the file favicon (All lower case.) and Save it.

Great you just created your very own favicon. For the lazy ones out there there is free software online that will allow you to create a text based favicon. It is called AntyFavicon. I have a link to them in the sidebar at the very bottom. Check out some of the other great resources that I have for: Web Design/Dev Tools. Back to the favicon. Go to that website enter in some text pick your colors and click on the save as favicon file button. Doesn't really get any easier then that.

Now that you have your favicon either created from an image or text you will need to put it on your website. The cool part is taht there is no extra coding you need to do and nothing else to modify on the actual website. All it takes is for you to upload that favicon file into the same folder that your index.html file is located in also know as your public_html or www folder. Once you do that it should start showing up in your browsers address bar. If you don't see it right away you might want to try clearing your browsers cache (ctrl+r to force refresh) or using a differnet browser that has no cache :D Easier then you though right ?