It’s known as a Favicon (short for “favorite icon”) and is an often overlooked visual aspect of a website.
Favicons have been used to visually represent a website in bookmark lists and address bars for years. But, if you keep an eye out for them, you’ll notice they are becoming increasingly more important, popping up in more and more places.
Why a Favicon is Important
There are plenty of places on the web where a logo just won’t fit.
People are visual beings. From a branding perspective, it is important that people immediately connect with your site and recognize it, even if it is just by a 16 by 16 pixel icon.
Take a look at the top of your internet browser right now. If you are anything like me, you probably have a dozen or so open tabs. As more and more tabs are opened, less and less of the website name is visible.
A good favicon is always there though, identifying your website as the tab your visitors are looking for.
Favicons have long ago moved beyond the address bar and pop up everywhere from Facebook links to RSS feeds. The more people see your favicon, the more they trust it. Just as they would trust your logo to represent your website, brand, and business.
It is also there to remind people of your site. In an endless list of bookmarks, you want your favicon to jump out at people, to remind them when and why they visited your site.
What Makes a Good Favicon
Ok. So you now know why a favicon is important, but how in the world are you supposed to represent your website or brand in a tiny, little 16×16 pixel box?
The first step is to go back to your logo. This is how people connect visually with your brand and you want your favicon to match.
In some cases, you can simply scale down and/or crop your logo to make a good favicon.
With complex logos though, this may not be the best tactic.
Even if you don’t use your logo or a dropped down version of it, you want your favicon to have a similar “feel” as your logo.
A great example of a favicon matching a much larger logo is Flickr.com.
The Flickr logo is way to large to scale down, and cropping it won’t work either.
Instead, the Flickr designers created a simple, easily identifiable favicon using the Flickr logo colors.
Play around with your logo and see what design you can come up with. Just remember: keep is simple and clear. At 16×16, a complicated or detailed design is just not the way to go.
How To Set Up a Favicon on Your WordPress Site
If you have image editing software, like Photoshop or Illustrator, you can design your own favicon.
Or you can use an online tool like this Favicon Generator.
Once you have designed your favicon, it is time to upload it and get it on your site.
The process is relatively straightforward.
Some premium themes come with a Favicon setting which will let you upload your Favicon right there.
If your theme does not have a Favicon setting, you can use a plugin like All in One Favicon. This plugin lets you upload your Favicon without having to adjust any code on your site. For more information on using All in One Favicon, check out our tutorial: How to Quickly and Easily Change Your Favicon in WordPress.
If you don’t want to add the All in One Favicon plugin, you can also do this manually.
How to Manually Set Up a Favicon
The process involved in manually setting up a Favicon isn’t too complex, but requires a few more steps.
In a nutshell, this involves:
- Converting your Favicon file to a .ico file. You can create a .ico file in many graphic design programs or by using an online file converter, such as ConvertICO or Dynamic Drive.
- You want to upload your Favicon to your website’s main directory and into your theme folder
- You want to add code to your theme specifying where to find the favicon
For a detailed explanation, check out the tutorial from the WordPress Codex, Creating a Favicon.
Remember, many people overlook adding Favicons to their sites.
But it’s a very important piece.
It will enhance your site’s brand and make it easier for them to find your site when they have a ton of windows open.
If you’d like to get more WordPress tutorials, tips, and tricks, be sure to enter your email address into the box below.