Create A Favicon / Icon in Photoshop!

In this tutorial, you’ll be learning how to create a favicon for your website or just a plain ole’ simple icon. Favicons are those little icons in your tabs or at the left side of your address bar. Google has one, check out there front page!

You’ll be making something similer to this:

favicon ps img

Basics;

Note: For some reason, wordpress is removing all my breaks in the page so its all one big mush of text. I’ve tried fixing it. Sorry!

  1. Download this Plugin for creating .ico files. Its free, read the instructions on the site on how to install it. Or you could as just easily download a free Ico maker program.
  2. First off, create a new transparent 16×16 document.
Grab the text tool and select what font you want, make it size 10. I used Verdana with no anti-aliasing (thats the options like Smooth, strong etc..). I used a light blue color…
Type in what you want, I used PS. After that I applied a blue stroke to actually make it visible.
Click for full screen
Now that bit is over. Create a new transparent layer, make sure this is below the text layer. Select the rectangle tool and set the Radius to around 2px. Draw a rectangle around the box so only the corners arn’t covered. Again, I used a blue, but it is lighter this time.
Go to the layers blending options, apply a gradient. Leave the colors the same but drag the opacity down to around 30% – 40%.
Two ways;
Now you have your image, we need to save it as a .ICO file. If you installed the plugin that I told you about at the start of the tutorial, then all you have to do is go to Save As > [Select .ico] and save!
If you downloaded a program to create the icon file then save it as .jpg and convert it in the program.
Make sure to name it favicon.ico
Making it a favicon;
Ok, go to your favourite HTML editor or whatever like dreamweaver. Drag you .ico file into your website direcoty.
Enter this code just above your Head tag:
<link REL="SHORTCUT ICON" href="http://yoursite.com/favicon.ico">

Now, upload the image to the main directory of your website. My favicon would be located at:

http://www.ps-tutorials.org/favicon.ico

You’re done! Questions? Just ask in the comments section!

Leave a comment