How to create favicon for your website

Favicon is a small icon on a browser tab, that can be personalized with your logo. As a part of your branding it is important to have your own, custom favicon. And it is fairly simple to create and place there your own favicon.

In this picture favicon is highlighted with green circles.

1. First you have to open your logo in Adobe Photoshop and make a square image out of it as shown in picture below. Save the file as “favicon.jpg” on your desktop.

2. Download and install “Image Icon Converter“, I downloaded it from CNET.COM.
After installing, launch the application and drag your image into application window, and it will generate “favicon.ico” file as shown in the picture below.

Mac Users and those who don’t want to install any software can use http://iconverticons.com/ to convert JPG into ICO files. It’s just easier to use a software, if you want transparent background for your favicon file.

3. Upload your “favicon.ico” into the root of your website using FTP software. I personally use Total Commander, but you can use FileZilla or any other FTP client.

4. Make sure that you can click on http://www.100dollarblog.com/favicon.ico (replace 100dollarblog to your domain name) and you can see your favicon.

And voila! You’re done! Now refresh your website in your browser and enjoy your new favicon!
Note: If it’s still not working – try to clear your browser’s cache files and refresh your website one more time.