As technology advances, more and more features are enabled on the web. Web browsers have taken websites and allowed many customizations such as favicons. The problem is, is that not many people know how to add one to their site, let alone what they are. So, in this article, I am going teach you what a favicon is and how to put one on your website, as well as why you should put it on your site.
What is a Favicon?
A favicon is a little icon used in web browser links. For example, if you were to look up at the address bar (where you typed in www.websitebegin.com), you will see a link. To simplify it, I put an image of what the URL bar looks like below.
That little tiny icon next to the Website Begin URL is a favicon. It, again, is a little icon that you can upload and appear on every browser. You may use a 16X16 favicon, a 32X32 favicon, or a 64X64 favicon, but they all, generally, shrink down to a smaller size. I used a 32X32 favicon.
What’s the Purpose of a Favicon?
A favicon doesn’t do a lot for you, but it does minorly help you. For one, it might catch someone’s attention. If it’s a really neat looking favicon, a reader may just stop and look at it. This will help them see you can take the time to fix every minor detail.
Uploading a favicon also looks more professional. By default, a favicon is a blank piece of paper with a fold in it. What looks more professional, a blank piece of paper or a amazing icon that you designed? I pick the custom icon.
So, besides professionalism and the fact that someone might see it and be amazed, it also helps when multi-tab browsers fall into play. Let’s say you have eight tabs open. You won’t want to read each title to find the website that you want. Having a favicon will allow your readers to easily pick out your website!
How to Make and Upload a Favicon
Since every website is unique, it is almost impossible to give one steady way of making a favicon. Many people go ahead and do initials of their website (EG; WB (websitebegin) R (robswebtips) ). I have done something similar, but with a globe and a pencil (writing to educate the world).
The first step to design a favicon is to get an idea for the favicon itself. After you have picked out an idea (and sketched it out on paper if you want), you can open up your favorite photo editing program (I use Gimp), and make a 16X16, 32X32, or 64X64 pixel image of that favicon. Afterwords, it’s pretty easy to upload it.
Fire up your FTP account and upload the favicon to a spot you can remember. Now, the last thing to do is go into each webpage you want to have the favicon appear on, and put in this code;
<rel=”shortcut icon” href=”location of favicon” type=”image/x-icon”>
If you have a PHP file that is inside of each and every page on your website, placing that code on the very top will make it so you don’t have to put it on each page manually. If you run a self-hosted version of WordPress, however, there is a slightly easier fix. There is a plug-in called JR Favicon. It will allow you to just put in a link to your favicon, and it will automatically insert it for you on each page.