In this Photoshop quick-tip you’ll learn to make a good-looking & a professional Favicon in less than two minutes. I’ll be showing you the way I made the current Gravatar & Favicon for TutorialsWalk. So let’s get started without wasting anytime!

NOTE: For this tutorial, I would be using Adobe Photoshop CS4

STEP 1

Make a new Photoshop Document with the following specifications:

STEP 2

Fill the background layer with the color “#3f3d3d”.

STEP 3

Now we’ll add some effects to the design. Select the layer with the background color and go to Filter > Sketch > Water Paper.

And then click OK with the following specifications:

The part you are seeing above is to the right of the window that appears after you click “Water Paper”. By now your design should look something like this:

STEP 4

Make a new layer now and select it by pressing “Ctrl + A” (on Windows) & “Apple + A” (on Mac). Then go to Select > Modify > Border.

And then make a Border width selection of approximately 100 pixels.

Fill the selection with color “#3f3d3d” once again. You’ll have something like this by now.

STEP 5

Now its the time to add some text to the style. Select the text color to be “#66a911”

And now type one or two main letters that resemble your website’s name or your business name. For me they are “T” (Tutorials) and “W” (Walk) (you might have noticed I always capitalize them – Example: My Blog Title).

Characteristics of the letter “t”

Characteristics for the letter “W”

You might have noticed that I capitalized the letter “W” and used small-letter for “t”. You may do the other way to make your style a bit different.

Now you can either save the file as “.ico” using the plugin here. Or by saving your design as a “.png” and then converting it using an online tool.

This concludes our little tutorial and you can now download the source code or making a design for your website/blog/business. Do tell me if this tutorial helped you!