Have you ever consciously noticed that some websites show their logo in the address bar next to their domain name while others don't? Websites with their logo in the address bar always appear a little more polished and professional and it's something that you should do on your website.That little logo is called a Favorites Icon, or a favicon for short. Those of you using Internet Explorer should recognize the word "favorites" in reference to bookmarking a website that you like. Actually, back in 1999 it was, in fact, Microsoft that came up with this favorites icon as a way to save a logo in your favorites list.
All the browsers now use favicon.ico and it's actually pretty easy to set up a simple one.
The most widely accepted favicon file format is .ico, which is short for icon. The most widely accepted file name is simply favicon.ico, which you would save in the root directory of your website.
That .ico file format is quite unusual, and you won't find it as a normal file format for saving images from PhotoShop, PaintShop Pro, or even Windows Paint. A few companies have created little software programs to convert JPG or GIF images into ICO file format, but before you go searching for one of those I'll let you in on a little secret.
The ICO image format is actually a BMP image format with a changed file extension. Remember that Microsoft came up with this in 1999 and bitmap (BMP) images were popular back then.
Okay, maybe it's not actually as easy as changing the filename extension. There are several variations of the ICO format that use different number of bits, if you really want to find out about that stuff you can jump on over to the ICO page on Wikipedia, but that's really boring to read.
If you read around the internet, you will find that the favicon.ico file can be several different files sizes from 16x16 pixels to 128x128 pixels. The size will always be square, and for simplicity sake, I'm just going to tell you to stick with the 32x32.
To create your favicon, you simply open you graphics program of choice, I use PhotoShop but others in my office use PaintShop Pro and even Windows Paint. You can use anything you like to edit your logo.
The first step is to modify your logo so it's a perfect square. In PhotoShop I would modify the "Canvas Size" and change the pixels so they are the same height and width. You would have to do the same somehow in your graphics program.
After you have the logo image modified into a perfect square size, you then need to resize it to be 32 pixels wide by 32 pixels tall. That's the 32x32 I mentioned above. It's going to look very small compared to your original.
Step 3 is to save your image as a BMP file format. Your graphics program should have the "Save As" option under the File menu at the top. Make sure to select the .bmp file format and call the filename "favicon."
The last step is to go into your hard drive and change the .bmp file extension to the .ico extension. Navigate to the folder where you saved the favicon.bmp file. Most of you that use Windows will notice that you don't see the .bmp extension of the favicon file you just saved in the previous step. That's because Windows hides file extensions from you by default. You will have to change the settings on your computer before you can change the .bmp to .ico. You can follow directions on the Microsoft Support site here or here to show those extensions.
As soon as you see the favicon.bmp in your folder you simply click slowly on it twice to rename it to favicon.ico.
Once you have the favicon.ico file created, you need to have it uploaded to your website into the root directory of the site. You can use FTP or cPanel or some other method. You might have to ask your programmer to do this for you too.
Creating the file and uploading were the easy parts. Generally speaking, this is all you have to do in this modern world of the internet. Web browsers will automatically look for the favicon.ico file every time someone visits the page.
Unfortunately, I know that many website owners do not have FTP or cPanel access to their websites. They are forced to edit files through their CMS without direct access to the server's file structure. Web browsers will only be able to read the favicon file by default if it's in the root of the site; otherwise you need to tell them where it exists.
Let's say you are forced to upload the favicon into an images directory, like /images/ or wp-content/images/. In this case, you need to add an extra line of code to the <head> area of your website to make the favicon work.
Here's the code you need to add:
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon">
The "/path/to/" shown above would be the actual path to your image directory. Here's how it might look:
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/wp-content/images/favicon.ico" type="image/x-icon">
If needed you could also include your full URL like this:
<link rel="shortcut icon" href="http://www.perosijewelers.com/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.perosijewelers.com/wp-content/images/favicon.ico" type="image/x-icon">
Modifying the <head> area of your website code might also be a little technical. In WordPress, you will need a plugin or to edit the source files. You might have to ask your programmer. Other CMS types might be equally as challenging.
There's a lot more information about favicons out on the internet. If you want to learn more, I suggest you start by reading this blog about favicons by Jonathan T. Neal.
