The biggest and best companies in the world today have a strong online presence and their logos can be seen all over the web. They are meticulous about online branding, making sure they leave no stone unturned. Even small companies need a website in today’s modern world, and online branding is as important as traditional branding if you want to be recognizable to as many potential customers as possible.
One way to maximize website branding is through the use of a favicon or “favorite icon”. This is the tiny graphic that you see preceding the website URL on the address bar of most browsers, or on a page tab, or in the bookmarks or favorites list where the website address is saved. This graphic is usually either a small version of the company’s logo or something very similar. If companies don’t use a favicon for their website, then users will only see their browser’s default icon, which means that the website won’t stand out to them. In a hypothetical case, the image below shows the company’s website without a favicon.
Creating and using a favicon is simple. Listed below are the steps needed to do so.
Design and create the image
This step can be easy as either downloading any copyright free image or making one of your own using any graphics editor. A favicon is usually only 16 by 16 pixels, so complex pictures like photographs will not show too well in this size. It is best to use cartoons or line drawings with little or no special effects. Once you’ve selected an image, make sure it is square by cropping it, and then resize it to 16 by 16 pixels. An example of a good favicon is given in below. However, the actual size will be much smaller than what is shown.
Save the image as an icon
Once you are happy with the image, choose a name for the file and save it in the “.gif” or “.jpg” format. Most web servers will accept the image only as an icon file with a “.ico” extension, so convert your image using the “save as” option. Rename the extension of the file to “.ico” and save. In this case, for illustration purposes, let the file be “favicon.ico”.
Upload the icon
Now that you have the icon ready, it has to be uploaded to the right place on your server. This should be your document root directory. Use an FTP client to do this.
Add HTML code to your web pages
The only thing left to do now is add the necessary code to all your web pages. This code links the location of the icon to each page, so the favicon will not show up on the pages where the code is missing. Open each web page in the HTML format and add the following code.
This code must be added between the “/head” tags of each page and can be before or after the title tags. Save the page.
The final step is to test that the favicon shows up. First clear your browser’s cache and close all browser windows. Now open a window and type the website’s URL in the address bar. In most browsers you should see the favicon preceding the URL once the web page has loaded. If not, check the tab bar. The other place it will show up in is the bookmarks or favorites list. The website’s entry will have the favicon next to it.
If it still doesn’t show up, make sure that the browser version you are using supports favicons.
That is all that is needed to create a favicon for your website. Just a few minutes is all it takes, but it will go a long way towards your company’s branding.