What is a Favicon?

A favicon also known as a favorite icon is a very small icon attached to a website. Often times a websites favicon is represented by their logo. Favicons are most widely accepted in the ico format. However, some web browsers will accept png, gif and jpg formats as well. At present Firefox and Opera accepts these additional formats.

Now that we’ve covered some basic information let’s get right into creating one for your website!

Tools You’ll Need

Image Editing Software

• Photoshop (Paid)
• Gimp (Free)
• Paint Shop Pro (Paid)

Icon Editor

• IcoFX (Free)
• InFran View (Free)

Your Logo!

Step 1:

Open up your logo in one of the image editing programs. Edit the logo to your liking. Be sure to be aware of the detail you choose to use because the maximum size for your favicon is 16 X 16 and no more than 1046 bytes. You can use up to 256 colors. However, this is not recommended due to the maximum size allowed for your favicon.

Step 2:

Resize your new logo to 16 x 16 pixels in a jpg or gif format. This may also be a good time to name it “favicon”.

Step 3:

Open your saved image in one of the icon editor programs.  Ensure that visually it meets your expectation. Now save the image with the “.ICO Windows Icon” format. Your favicon should now be saved as “favicon.ico”.

Step 4:

Upload your new favicon to your web server. Most people upload to the root of their site. You can also choose to save it in a folder on your web server. Make note of where you’ve saved your favicon.

Step 5:

Now you need to add a bit of code to each of your web pages to ensure your favicon shows up. If you use a main template for your website you only need to add it there. Here is the code you’ll need to add. Take note to include the full path in the “href” portion of the code if you’ve uploaded your favicon to a folder on your web server.

*If you’ve uploaded to the root of your web server:

<link rel="SHORTCUT ICON" href="favicon.ico"/>

*If you’ve uploaded to a folder on your web server:

<link rel="SHORTCUT ICON" href="/path to folder/favicon.ico"/>

WALLA – You know have a favicon for your website!

The planning phase of building your website is so vital in the success of the end product. Keep your targeted visitor in mind as you plan the design of your website. You want to make the visitor’s experience on your website as easy as possible. That being said, let’s talk about 5 things to consider in planning your website design. This list is not all inclusive, but it’s a start.

1) Help people find things easily

Your navigation system has to be on “point”. Do not force your visitors to go on an Easter egg hunt to find what they are looking for. Your main navigation should be clear to the visitor the minute they land on your site. Additionally, make sure that the content under each menu item is in line with the label of the menu item. For example, if you have a “Services” tab for an accounting firm, don’t have contact on that page talking about disciplining your children. While that sounds ridiculous, believe it or not people actually do it. Make it as easy and concise as possible for your visitors to get what they want on demand.

2) Where am I?

Don’t make things so complicated that people don’t know where they are on your website. Using some sort of breadcrumb system is very helpful especially if you have a larger site. At the very least, label each page clearly so that the visitor can quickly identify where they are within your site. Going back to the navigational system, make sure your visitor can easily get back to where they came from without searching all over the place. Label, Label, Label and then label again.

3) Scrolling Forever!!!

Make sure your design size is inline with what the average user has in terms of screen resolution. The worst thing in the world is scrolling forever to see the content of a website. Again, make things easier for your visitor. According the w3shools.com, as of January 2009, 57% of web users have a screen resolution greater than 1028×768. That‚Äôs a pretty high number. Only 4% still use a screen resolution of 800×600.¬† So with this information in mind, you should design the size of your website to suit the majority of users. This decreases your chances of people leaving your site because of the dreadful horizontal scrolling.

4) Entry Pages

Entry pages, better known as splash pages serve as somewhat of a welcome page for your visitors. You will usually have a brief message, nice image or even flash presentation to great your visitors. While it’s been known to be a deterrent for web visitors and they may very well leave your site, these types of pages could serve a good purpose. That’s the key, serve a good purpose. If you opt to use an entry page, make sure that it offers some sort of value to your custom. For example, if you are an artist and want to use an entry page to showcase your work, then that might serve a good purpose. Otherwise, if you have an information only website and the user has to take an additional step by clicking on something to get to the “meat” of your website, then an entry page doesn’t serve a purpose at all.

5) Advertisements

Once again, this is an element of a website that can serve a useful purpose to your visitors. However, content is key. You should use banner ads and advertisements sparingly throughout your site. After, people won’t click on your link just to buy stuff from other people. They visit your site to find answers to a problem they are facing. Also, make sure if you are going to use advertisements and banner ads on your site, that they are relevant to your content. Most people won’t click on an ad about dog food if they are reading your site to learn how to fish.