If you browse the web regularly, you’ve probably noticed that many websites have a small icon in the address bar or on a tab in the browser. That tiny image is a favicon.
Favicons are especially useful for site branding. When a visitor to your site sees your favicon in their browser bar, they become familiar with it and will automatically recognize it (and you) every time they visit your site. Using that image in other places increases that familiarity, extending your reach.
For example, every time you see the Nike Swoosh, you know exactly which company that represents, right? It makes perfect sense that Nike’s favicon is the Swoosh image. Check it out at Nike.com. It’s a simple and extremely effective tool. Using a favicon for your own site helps visitors quickly and visually identify your site among large numbers of bookmarks, etc.
So how do you create your own favicon for your site?
(1) First, you need an image. You’ll need to find or create an image that you want to use as your icon. Choose an image that will best represent your website. The dimensions of a favicon are tiny – just 16×16 pixels, so keep that in mind when choosing or creating your image. The image will also need to be square, and must be viewable at a very small size. The simpler the better. I chose a cropped portion of my company logo to create my favicon. It’s simple, easily recognizable, and unique.
(2) Next, save the image file. Once you’ve created your image, save it in one of the following supported formats: gif, jpg, png, bmp. I use jpg and png for just about everything.
(3) Convert it. Now we need to convert your image to a favicon. Just save it again as “favicon.ico” (without the quotes). That’s it.
Note: If you’re not comfortable with image creation and resizing, there’s a terrific generator located at DynamicDrive.com and it’s free to use. You simply upload an image to their site and the generator creates the favicon for you. You’re able to preview it on their site, and it does save a little time and effort.
(4) Upload the image to your server. In order for your newly created favicon to show up on your site you need to upload it to your server. This is the hardest step.Upload your favicon.ico file to the ROOT directory of your site on your server. You’ll most likely need to use FTP access for this. You can check to see if you uploaded it correctly by typing http://yoursite.com/favicon.ico (replace “yoursite.com” with your own URL)
(5) Insert the code. The last step is to insert one line of code into the <HEAD> section of your web sites pages. This code has to be on every page that you want the favicon to appear for. If you’re using WordPress or another template, you’ll only need to insert the code in one place. If you have a static website and you don’t use a template or includes, then you’ll need to add the code to every page.
Here’s the code: <link rel=”shortcut icon” href=”/favicon.ico”>
Once you’ve inserted that code into the <HEAD> section of your page(s), check your site. If it doesn’t show right away, be patient. Refresh your page or try a different browser.
Keep in mind also that every browser displays a favicon differently. For example, Firefox shows favicons in the address bar and in tabs, but Safari shows them only in the address bar. In Internet Explorer, it may not show up at all.
Don’t get frustrated. If you’ve followed the steps exactly, you’re all set.
That’s it! If you have any questions or comments, or would like to share YOUR favicon, please post a comment. Enjoy! 
{ 4 comments… read them below or add one }
Wow Lisa- what great step by step instructions you have given here- I’m going to tweet this for others to see.
Blessings,
Eren
Thanks Eren! Glad you found this helpful. It’s a little daunting at first but actually very simple.
The favicon will actually appear in most browsers even if you don’t add any code to your site at all. Just save it as favicon.ico (or favicon.png is also acceptable these days)
Hi Loretta – That is true, but I still insert the code. Until all browsers behave the same (wouldn’t that be nice?), I prefer to go “old school” on things like this.