Create Your Icon in 5 Simple Steps with Photoshop

So, you’ve created a website! …Now what?

Using some simple steps and some software, it is time to make your website outstanding. Whether you are in charge of web hosting or just the website owner, you may want to consider all elements that go into designing a great web page. Hopefully by now, you have found a great dedicated server hosting for your website and are ready to design your page. There a literally millions of websites across the web. What makes your website different? As the creator, you will want to use these features to make your website unique and different. A tool used to identify websites from another is an icon or a browser icon. For example, Facebook’s icon appears on their tab as a blue box with a white ‘F’ in it. Another memorable icon is Google’s icon, everyone recognizes it.

As pictured above, this is an example of Google’s web icons. This picture shows the progression of Google’s icon over the years.

You can create your own icon in 5 simple steps.

To proceed, you will need:
–Adobe Photoshop
-(ICO) File format plug-in for Photoshop
-If your web designing software does not have an option to upload an icon, download a software that can (Favicon, Axialis, or Icon Workshop)

Create your icon!

1 – Create Your Canvas

This window should look something like the one below.

Most important: The final size of your icon will be 16 X 16. For you to create the icon, though, it is recommended you use 50 X 50 or 64 X 64 and then later re-size down to 16 X 16. If you start out with something too big, such as, 150 X 150, your icon will not be clear enough when sized back down. When creating your blank canvas, set the height and width to something big enough for you to work with, such as, 64 X 64.

2 – Do your thing! Design the icon

Have fun!

Most important: Remember it will be sized down to a very TINY image. It is not recommended to include words, texture or patterns, or fine details. Keep it simple. Get your inspiration from famous icons such as Google or Facebook. Google and Facebook both have extremely simple icons and widely recognized.

Image source: Gajenn2011 via Flickr

3 – Size the icon… 16 X 16

Again, the window should look something like this.

This is where you will be able to see your final work once it is sized down to 16 X 16. Does your icon look clear? Is it recognizable? Does it appear how you want it? If you answered ‘no’ to any of these questions, go back to step # 2 and re-create or tweak your icon until you are satisfied.

4 – Save it as an .ico & Upload it!

Once you are completely satisfied with the final appearance, prepare to save your icon. Saving it as an .ico is extremely important in this step. If you have not already, download the (ICO) file format plug-in for Photoshop. Once you have saved it as an .ico, you are ready to upload it to your website. On your web hosting website creator, there will be a location to put your icon file. Upload your new icon to the site builder to show before the URL address. If your dedicated server hosting website builder is not capable of this, upload a program that is, such as, Favicon, Axialis, or Icon Workshop.

Voila!

5 – Check your work!

How does it look?

This is another opportunity to make sure you are satisfied with the appearance of your icon. Does your icon clearly illustrate your website logo? Is your icon congruent with the URL? Again, this will not only appear by the URL address but also on the tab window. This icon will represent your company and your website. If you are not completely satisfied with how your icon appears, go back and edit some changes. Once you are happy with the final result, publish it! On your web hosting site builder, there will be a ‘publish’ option.

Now that you have published your new work, ask one of your peers for suggestions. Ask someone you trust for their honest opinion. After you have spent quite some time creating this icon, you are used to looking at it. Have another set of eyes take a look before you rely on it to represent your website.

This Quick Tip tutorial was written by Ellee Parker:

Ellee Parker hails from the west coast, loves anime and the eastern culture in general. She often writes for webhostgear.com, a trusted source of hosting reviews and guide to the hosting industry.