A favicon is a little icon that sits next to a site’s name in a browser tab. You might have noticed it before. Here’s mine and two others:
As you can see I use the clementine icon of my logo, Facebook uses the “f†icon and Twitter uses the bird icon for their favicons. A favicon also shows up in your browser’s bookmarks bar and toolbar.
So why do you need a favicon for your website? It helps to identify your website between all the other tabs a person might have open.
Here’s how to design your own.
Design your favicon
You need some kind of image editor to create a favicon for your site. I’m using Photoshop, but if you don’t have that you can use Gimp or Picmonkey. Both are free.
Create a new document. The final icon size must be 16 x 16 pixels, but we’ll start with a larger size first so that we can see better. I’m creating a 48 x 48 pixel document.
Place your logo onto the canvas. If you have some kind of icon in your logo, use that. If you have a text-only logo, you can use the first letter. It’s best to use a vector or transparent version of your logo for this.
Now go to File – Save for Web and Devices. Change the size to 16 x 16 pixels and save the file as a PNG-24 with transparency turned on.
Go to the location where you saved your favicon. Rename it to favicon.ico. It is now an ICO file – the format it should be in so a browser can recognise it as a favicon.
Upload your favicon
There are many ways you can upload your favicon to your website. Some WordPress themes let you upload this in the theme options. If you’re using the Genesis framework, here’s how you do it:
Log in to your host’s control panel and click on File Manager.
Locate your website’s directory and go to the wp-content/themes/yourchildtheme/images folder. Click on the “upload†icon and then upload your favicon. You can also do this via FTP.
You’re done! It might take a while for your new favicon to show up. Have any questions? Please leave your thoughts in the comments.
Such a quick and easy tutorial! Favicons help me remember which site I’m on when I have way too many tabs ope in Chrome so I hope this helps some bloggers get favicons uploaded.
Exactly! They are SO important to have. Thanks for commenting, Angel!
Oh, nice tutorial. I should get onto sorting mine out. It always makes things look a lot more professional!
Definitely! Thanks for commenting, Catherine 🙂
Or alternatively you can use those online Favicon makers for quicker solutions.