Ever wonder how to create a favicon (that little icon next to the URL in the browser’s address bar)? In this tutorial I will demonstrate how you can create your own website icon that you can add to your sales page, webpage or blog.

Step 1: Create your icon graphic
Use your own favourite graphic editor to create your icon (16 pixels by 16 pixels). Working with this size can be difficult so try using a larger canvas (32 x 32 or 64 x 64) and resize later. Take inspiration from your logo, website colours, initials, or some other visual association to your business to design your icon.
Step 2: Save your favicon
The next step is to save your icon as “favicon.ico”, but you’ll notice that the .ico extension isn’t an option in most graphic editors. There are two ways to accomplish this. A quick Google search will turn up several free favicon generators that you can use to convert your JPEG, GIF, PNG and BMP files to an ICO file format.
Alternatively, you can save your icon directly in Photoshop with a free downloadable plug-in. Installing this plug-in is relatively simple: close Photoshop, download, upzip, move the plug-in into your Adobe Photoshop/Plug-Ins/File Formats folder, restart Photoshop, and voila!
Step 3: Activate you favicon
The final step is to upload your favicon.ico file to website’s root folder (this should be the same location as your index file) and add a link element between the header tags of your website:
<link rel=”icon” href=”http://yourwebsite.com/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”http://yourwebsite.com/favicon.ico” type=”image/x-icon”>
Note: If you are working with a blog you will want to drop that same code into the header.php (WP-Admin — >design — >theme editor –> header.php).
And that’s it! While a favicon isn’t going to improve your page ranking or send more traffic to your site, it is one more piece of online branding for your business.