How to add a favicon to your site * Small Business Bliss

Tweet
SumoMe

Insert a favicon into your website

I dig favicons (those little logo type icons that show up on webpages and in your web browser – see pic).

They look clean and profesh, and are a little bonus branding blip that slips into the unconscious mind of your site visitors.

OK, maybe I’m taking that a little far, but seriously, they are a visual way to identify your website and can help your small business stand out.

And you know what else? They show that you cross your “t”s and dots your “i”s, not just on your website, but in general. Hey, that’s just the type of person you are (and if you read between the favicon, it shouts out “hire me” cause I pay attention to the details).

Sometimes the little things you do can say alot. A nice touch that while not crucial, says something about you as a person and/or business.

Now, if you are not all that web savvy, it might seem that getting a favicon would be hard. You know, something that only techies can handle. But it’s actually quite easy…

3 easy steps to getting your very own favicon

First off, you need to actually create the favicon.

*If you are on WordPress and simply want to use your Gravatar, you don’t need to create a favicon. Scroll down to the adding it to your website section.

#1 – First off, consider your logo. Will your logo or a part of it fit nicely as a mini icon? (remember just how small this space is – your full company name is not gonna work here). If yes, move on to step 2.

If not, you will have to create something. If your logo is just your company name, why not grab the first initials and pop them onto a coloured background that matches your branding colour scheme? You can easily do this in any Microsoft office application that you are comfortable with and then copy/paste it into an image generator, such as Infranview. Because the favicon is so small, it doesn’t have to be crazy good quality.

Or, if your small business is a service with an intuitive image (like a cake for a baker, for example), find or buy a little graphic or icon.

You can also use a picture of yourself, if your business revolves around you, like mine.

#2 – Now, mozy on over to http://www.html-kit.com/favicon/ Just upload your logo or file here, and this program will automatically generate a favicon for you. If you are uploading your full logo, but just want to use a bit of it, no worries, cause this tool will let you crop.

#3 – When you’ve got it as you want, just click to download the .ico file only (you can download the full .zip file if you want, but for the favicon it’s really just the .ico file you need). This can be found under the heading “What else you can do”. It will take you to a webpage with your favicon, where you can right click and “Save image as”.

Sweet – now you have your favicon. The only thing remaining is to upload to your website.

How to add a favicon to your site

Here are instructions for how to get a favicon from some popular website systems that many small businesses use:

Getting it done in Squarespace is SUPER easy. Here are the instructions. You will need to have a .ico file, so just scroll down to see the instructions for creating that file type below.
In WordPress.org, you first need to download a plugin (I used the “Favicons” plugin by Loane), and activate it. You will then see “Favicons” under your settings. Click there to edit. If you just want to use your already existing Gravatar image, you actually don’t need to bother with the whole .ico file creation below. You just choose your Gravatar and away you go. To use the favicon you created instead, just upload it to your media library, and then copy the link location. Click into your Favicons area and provide the link where requested. Save changes and you are all done.
In WordPress.com, head over to your Settings – General section. On the right hand side, you will see Blog Picture/Icon. There you upload the image you would like to use as your favicon, crop it as you like, hit “crop image” et voila. This automatically becomes your favicon, as well as your avatar whenever you post comments on other blogs.
Here is a post with step by step instructions for how to get a favicon on your Blogger site.
If you used Weebly to create your website, and you have the pro version, you can add a favicon to Weebly with these steps.

If you don’t manage your own site, you’ll have to give your web guy (or gal) your favicon and ask them to do it for you. It shouldn’t take them more than a few minutes. And if they ask you what a favicon is, or make it seem like a big deal, this just might be an indication that it’s time to move on and find another web team.

If you have any favicon tips or can share instructions for getting a favicon onto other website systems, please share in the comments!