Make A Favicon Tutorial
Introduction
It has been quite a while since I've actually written a tutorial for colormagix. That aside this tutorial will teach you how to create your own website favicon. If you don't know what a favicon is you can checkout our article all about favicons. Also this tutorial is guided more toward Photoshop users a compared to other graphic programs. If you are using some other software you can ignore the Photoshop specific tips, and follow along with what you can do.
Needed Materials
Graphic Creating Software
Basic Computer Skills
Website (optional)
Step One
The first thing that we are going to do is open up our graphic editing/creating software. For most of us this will be Photoshop. After opening the program create a new document that's size is 64x64. I know you may be thinking 'Hey wait the standard favicon is 16x16 pixels...”. We are making it 64x64 to start out with because it is much easier to work with modify and edit an image when it is larger than 16x16 pixels. Make sure your image at this point has a transparent background.
Step two:
Now that we have our blank canvas set up and waiting we need to decide what kind of favicon we are going to make. In this tutorial I will be working on creating a favicon for the sparx Media website. When making a favicon for a certain website you need to keep in mind the color scheme that the website already has. It does not make much sense to make a favicon that is mostly pink, and the website has a yellow and orange color scheme.
Step Three:
Create a layer that will be used as the primarily background color, the background color that I will be using is a royal blue. It's the main color used for the website. The hexadecimal color is #1d5a88.Now in order to fill it in I recommend you use a either the pen tool or the pencil tool.
Step Four:
In this step I choose two colors from the website. They are chosen from the website header. The light white color and darker gray color. Next I proceed to use the rounded rectangle tool to select the majority of our canvas being sure to leave a 3px border around all sides of the selection. Then creating a new layer I use the gradient tool and drag a vertical line from top to bottom.
Step Five:
Now that I have the basic background set up the way that I want I begin my next move by opening up the image that is used as the websites mascot. Add the image to the favicon by copying it. After copying the image paste it into the favicon image. If you are working with an image that is larger than 64x64 pixels it becomes more apparent that you need to need to obviously resize the image so that it will fit on this small scale. Luckily you can do this easily by “transforming the image” You can do this by going to (“edit” and clicking free transform), adjust the image to your likings. Now that the image is the right size you can place it to where it needs to go.
Step Six:
The favicon is starting to shape up nicely at this point; if you wanted you could use it as it is, if you didn’t have any other design ideas in mind. Fortunately for me I’m not finished. I’m going to now incorporate some design changes.
Now I personally want that blue mascot to stand out a bit more, so I’m going to modify the contrast a bit for that layer.
After doing the contrast I decide to edit the white box!
Step Seven:
Now that the favicon is finished, it’s now time to make it the standard 16x16 size. I recommend now that you save the image before resizing it as “favicon “64x64.png” this way if you have any changes to make you can do them on the larger image... You can resize the image by clicking on the top tab and select resize: image to 16x16 pixels.
Step Eight:
Now if you’re using Photoshop like me you may have noticed, hey wait a second, why is it that I don’t have the opportunity to save the image as an .ico file? Well you can definitely save the file as an .ico file but not naturally unfortunately. You are going to need to download an external plug-in for Photoshop to allow yourself to save in .ico format. Once you are able to save it as an .ico file make sure you save it as "favicon.ico".
Step Nine:
You can now upload your file to server and make sure you include the display favicon html code in your website or html page. You have to place it somewhere between the <head></head> tags.
And the code for displaying a favicon is:
<link rel="shortcut icon" href="favicon.ico"/>
