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.

The Best Deals For Digital Design Assets - Learn More>>

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.



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, a trusted source of hosting reviews and guide to the hosting industry.

(Visited 2,282 time, 1 visit today)

15 Comments Create Your Icon in 5 Simple Steps with Photoshop

  1. Asif Aug 1, 2011 at 08:53

    Nice Tutorial.

  2. Michal Aug 1, 2011 at 11:12

    Thanks, nice tutorial!

  3. Pingback: Create Your Icon in 5 Simple Steps with Photoshop | Design News

    1. marijuana card Jan 26, 2012 at 16:27

      So important and necessary design tutorials contains the site, which I excepted. It is really helpful for practical fild to everyone. Thanks for sharing this. Well done carry on.

  4. Anaxa Jan 24, 2012 at 19:02

    So important and nice tutorial is this.Really nice!!!

  5. sriganesh.M Mar 29, 2012 at 20:05

    do we have anything related to photoshop cs5 or cs3 plugin for converting png into icons ? plz

  6. Pingback: 优设(UISDC)-优秀网页设计联盟-SDC-听讲座,聊设计,在这里

  7. Pingback: 完美的25个ADOBE PHOTOSHOP教程 | Adobe CS6 CS7中文站

  8. firehost Testimonials Sep 10, 2013 at 17:54

    hello there and thank you for your information –
    I have certainly picked up anything new from right here.
    I did however expertise some technical points using this website,
    as I experienced to reload the web site many times previous to I could get it to load correctly.
    I had been wondering if your web hosting is OK?
    Not that I am complaining, but slow loading instances times
    will sometimes affect your placement in google and could damage your high quality score
    if ads and marketing with Adwords. Well I’m adding this RSS
    to my e-mail and could look out for much more of your respective exciting content.

    Make sure you update this again very soon.

    my weblog: firehost Testimonials

  9. Olivia Lily Dec 25, 2018 at 22:26

    I gathered some good and actionable idea about creating icon by Photoshop. I applied to my project. It’s working. I just would like to say thanks for your great dedicated efforts doing such work. I appreciate your excellent post. Thanks once again for the post and sharing the blog.

  10. Ellian Nov 30, 2019 at 02:51

    I love these resources and i always a big fan of this website. thanks a lot

  11. Ferzana naim Apr 17, 2020 at 13:09

    Wow! I am enjoyed your article.Your tips really helpful. Thanks a lot for sharing


Leave A Comment

Your email address will not be published.