Pump up your website with a simple favicon

It’s the small things in life that often make the biggest difference. And this is never truer than with a website. Have you ever noticed those cool little icons on the tabs in the browser? Or in your favourites list? They match the site’s logo too! Well this, my friend, is a favicon. And your site needs one.

Why? you may ask. Well think of it as dotting the i’s and crossing the t’s. It is the final touch to branding your site. Not only that, it highlights your page in a sea of tabs the user might have open. It makes sure they can go back to it as easily as possible. Something I think you will want.

Making a Favicon

The first step on your path to favicon goodness, is creating the icon itself. If you don’t have a logo image or recognisable icon for your site, you need to do that first. One idea is to peruse Google Images, using words like “icon” in your search. When you find something, join us again at this exact point.

If you have your image we need to turn it into a favicon. Favicons are square and small (16 x 16), so you might want to trim your image to ensure it is favicon-worthy. Don’t worry about the size, but make sure it’s square.

Tools for Favicon Creation

One way to scale your image to favicon size is with an image tool. Luckily I have created a list already. Alternatively you can use one of the Favicon specific tools below.

Favicon Editor – this page rocks. Allows you to crop to a square shape then create the Favicon.

Favicon Generator – less sophisticated : the image needs to be square, create the favicon : right click and “save as”

Favicon Drawing Site – here you can create your own Favicon by hand. It’s only 16×16 so it’s achievable!

Accepted Favicon Formats

This is not a big issue, but something to consider. According to the W3C  (who write the standards for web pages ie. HTML etc)

most browsers support formats other than .ico for favicons, but you should stick with .ico as IE doesn’t support other favicon formats

So try to use the “ico” format (which the generators listed above will do). But other formats like PNG and JPG are usually ok. It just means Internet Explorer might not be happy. But what’s new there!

Once you have your icon, save it where you will find it again! Sounds stupid, but we need it again in a minute to add to your site.

Adding the Favicon to your Site

Here I am going to cover two ways of adding the Favicon.

The first is for WordPress users.

The second is more general and gives you enough information to add it to a website.

WordPress Websites

There are alternative ways to what is written below, but I tried to make this as simple as possible. So don’t worry,  just follow along.

1. Open the Media section of WordPress from the left hand menu
2. If you have not already, upload the favicon you made earlier
3. Click on the Favicon image – opening a details page
4. On the right is a box called “Save” look for the “File URL” – copy this, it’s the “path”

Now you have the path of the image, which we need to put in the page header.

• If your theme has a way of adding html/code to the header that is where we need to go (it could be under Appearance, or the Theme menu itself, take a look around it’s quite common)
• If not, and you are comfortable on the file system of your server, you usually need to go to:  wp-content/themes/default/ (Note: you are looking for the header.php file to edit)

Add the following code, with your favicon path, to the header (or header.php file) anywhere you like.

<link rel="shortcut icon" href"your file path/ URL goes here" />

Other Websites

Adding the Favicon to your site is a simple two step process.

1. Upload the Favicon.icon to your server (to your image directory or similar general location)
2. Add the following code to all your pages <header> section

** href is the location of the image, it can be relative or absolute path

<link rel="shortcut icon" href"your file path/ URL goes here" />

Summary

So hopefully by now you have made a small square icon (your new friend the favicon), and add it to your site. Simple huh!!

Now you have a consistent brand across your website, not only on your home page, but on the browser tabs and favourites.  Enjoy

Photo credit: paloetic via photopin cc