How to Create a Favicon From a Picture

Sunday, January 24th, 2010 at 7:34 am

Favicon stands for favorite icon or website icon. It’s a teeny tiny 16 pixel by 16 pixel image that shows up in the browser bar and bookmark menu when someone navigates to your web site.

I think a well designed favicon gives a website a more professional look. On the other hand a poorly designed favicon makes your site look amateurish.

The Favicon Video Tutorial

The video tutorial covers two things…

Converting an image to a favicon at HTML-Kit.com website
Uploading the created favicon to blog or website

UPDATE: I don’t use the same method to install a Favicon on my blog as shown in the video.
I use the Favicon Manager plugin now.

Video: How to Create a Favicon from a Picture
(Length – 8:40)

Adding a favicon is one of those artistic touches that doesn’t appeal to everybody. Some people hate favicons for no other reason than they can’t figure out how to create one. I hope to demonstrate in this tutorial that creating a favicon isn’t that hard to do.

The easiest way to add a professional looking favicon to your blog or website is to convert an image of you (assuming you want a picture of you on your blog or website) into a favicon. How do you convert a picture into a favicon? At a free online picture to favicon creator website.

What you need

A decent picture of you.
A software program like Photoshop or Photoshop Elements to correctly prepare your picture for the favicon creator website.
An FTP program like FileZilla to upload your favicon image to your blog or website.
Guts to put an image of you on your blog or website. C’mon be daring. This will be fun!

Sidebar:
You can create a favicon using Photoshop alone without going to the website I’m recommending but that’s not what I’m teaching here. Using Photoshop to create a favicon is a little more advanced than the average person wants to learn.

The 3 Things This Tutorial Aims to Teach

The written part of this tutorial will explain how to correctly prepare an image that you will be using to convert to a favicon.
The first part of the video tutorial will show you what to do with the image at the picture to favicon creator website.
The last part of the video tutorial will show you how to upload and get your favicon working on your blog.

How to Prepare Your Picture to Convert to Favicon

Square Crop Your Picture
Make sure that you crop your image square (equal dimensions on all four sides) rather than rectangular. A rectangular picture will end up distorted. See examples.

Sharpen Your Picture
Sharpen your image quite a bit if your image editing program allows it. Sharpening improves the definition between pixels. This is important as the final size of the picture will only be 16 x 16 pixels. A soft image will not look good. You want to look good.

Accentuate the Colors of Your Picture
me side by side 50 How to Create a Favicon From a Picture Play around with the color in your picture some. Use the levels tool to blast a little more color into it.

More color and more contrast helps produce a better favicon. Of course you need to experiment a little. Test out a few examples to see what works best for you. See examples.

Close cropping
I prefer a closely cropped image that captures more of a person’s face rather than one that allows the whole head and shoulders to appear.

Cropping your picture closer makes it a little easier to recognize you. It’s kind of like the difference between looking at someone sitting across the table from you or standing at the far end of a football field.