15 49.0138 8.38624 1 0 4000 1 https://sankaranand.com 300 true 0
theme-sticky-logo-alt

Creating a simple web 2.0 favicon – Tutorial

24 Comments

Inspired with the favicon design of web 2.0 sites like Tech Crunch, Lifehacker, Technorati, etc? Well follow this simple tutorial for creating web 2.0 fav icon using Photoshop. All you need is just Adobe Photoshop software installed.

favicon1.giffavicon2.giffavicon3.gif

Ok let’s get started!

Open a new project in Photoshop either by navigating to File > New or just press Ctrl + N.

pic1.gif

Now make sure the width and height its 400px so that you can get a square shaped fav icon with the background color as white.

Now select the desired background color you want to use for your fav icon by clicking set foreground color as show in the figure. Choose a nice web 2.0 color from the Color library.

pic2.gif

pic4.gif

After selecting the BG color to be used, in the tool box of the Photoshop select Gradient tool or just press (G).

Now below the menu bar you will get a gradient color option, which looks similar to the screenshot posted below, click it and select foreground to transparent palette.pic5.gif

After selecting, drag your mouse from the outermost top of the project to its extreme end via +y to –y axis and leave down to get a color background. While dragging if you seem to have white color over the bottom then press ctrl + z to re-drag and this time drag it out of the bottom extreme to make the white color disappear,

After getting desired web2.0 background for the fav icon, select the horizontal text tool from the tool box and type the first name of your website or added two different layers of text if you need two initials in your fav icon.

After typing your desired initial, select a color for the text which matches the background perfectly or your website theme. (Basically both the background and foreground should match the website theme color). But if you add two initials in the fav icon make sure you give two different colors then.

Now the next part is the optional part of adding 3-d effect. If you satisfy with the current design you can skip this step otherwise add a bevel or emboss effect to the text by right clicking the text and selecting the blending option.

pic7.gif

That’s it now the next process is exporting the created project as jpeg image by navigating to File > Save as > and selecting jpeg as format and click save.

The exported jpeg can be easily converted to .ico favicon by visiting this website.

Please forgive me if you have expected more about the design coz I have already mentioned the title as how to design a “SIMPLE” web 2.0 icon which made my tutorial concise after all this is my first tutorial. I have uploaded the .PSD files and made available for download which you can modify according to your wish.

Last but not least, I am expecting your comments and suggestions

Download: Sample 1 | Sample 2 | Sample 3 (PSD Format).

[update]: Sample 2,3 are live at Technical Blog & BlogTalkz please don’t inherit the same design.

Previous Post
Free Internet all over India?
Next Post
Sivaji The boss – Trailer
Sankaranand

Scrum Master and Project Manager with 9+ years of experience handling web, mobile and cloud projects. He is a PSM1 and CSM certified.

24 Comments

  • May 30, 2007 at 12:09 pm

    I would never suggest Photoshop for creating icons. It’s good that you can design it very well using Photoshop. But there are cool softwares like Icon Cool Studio which lets you do a loads of stuff directly into an Icon (so, you don’t need to save as JPEG and then convert it to an icon). It allows you to modify any icons also.

    One greatest thing about Icon Editors is that they allows you to work on Transparent Icons which is NOT possible using Photoshop. I like transparent icons very much and I use Icon Cool Studio the max for creating them.

    Just a suggestion my friend…

    Reply
  • May 30, 2007 at 12:11 pm

    well transparent icons are cool but when added as Fav-icons they wont be that visible in browser nicely. For other icons transparent thing is cool.. Thanks for your suggestion

    Reply
  • May 31, 2007 at 10:41 am

    I agree with Srinivasan, but there is a freely available photoshop plugin which lets you save your creations as .ico

    Reply
  • May 31, 2007 at 1:30 pm

    This tutorial is cool. I’m gonna try it out. Thanks, Sankar.

    Reply
  • May 31, 2007 at 3:50 pm

    […] Sankar gives a quick tutorial on making a cool web 2.0 favicon. […]

    Reply
  • May 31, 2007 at 4:33 pm

    @Thilak & Srinivasan

    Cheer Up guys, The real catch of this post is not about creating a .ico type of file but about the design contained in it.. I have posted about creating a custom design which anyway requires an alternative software as you guys suggested to export it as icon or add special effects… i have not posted about how to export in .ico but tutorial on designing the fav icon thats it..

    Reply
  • May 31, 2007 at 5:57 pm

    Thanks for the tip…..

    I was looking for a way to create 3D effects to buttons, and got it now!

    Btw, you might want to check the spelling of links in footer.

    Reply
  • June 1, 2007 at 8:03 am

    […] shares how to create a web 2.0 favicon for your […]

    Reply
  • […] How to create a Web 2.0-isque favicon – Photoshop Tutorial by Sankar Anand […]

    Reply
  • […] Having a Faviicon Faviicon is the small icon which appears at your address bar before “http://”. This gives a unique identity to your website. If you have a little idea of photoshop you can design your own faviicon very easily with this tutorial by shankar. […]

    Reply
  • […] to create a favicon – Daily Blog Tips Creating a simple web 2.0 favicon Tutorial – […]

    Reply
  • July 30, 2007 at 2:49 pm

    Well done sir i admire ur website i have created one personal website i needed a favouite icon.

    Reply
  • […] Creating a simple web 2.0 favicon – Tutorial on Sankaranand […]

    Reply
  • […] Creating a simple web 2.0 favicon – Tutorial […]

    Reply
  • March 29, 2009 at 1:54 am

    Good Article, I guess Adobe Illustrator is a great tool, I will prefer to use it any day.

    Reply
  • May 19, 2009 at 10:47 am

    cool post

    your post is helpful and informative

    Reply
  • June 17, 2009 at 6:08 am
    TedGr

    You could solve the problem of conversion to .ico by installing GIMP. Its free, of course!

    Reply
  • October 7, 2009 at 4:23 pm

    This tutorial is exactly what I need.I impressed you stuck it out.

    Reply
  • October 20, 2009 at 11:40 am

    Thanks for the follow! I also have my own website. Come visit me at
    more template Click quick

    Reply
  • April 8, 2010 at 12:51 pm

    thanks for the guide! I got my own favicon for my blog nao 🙂

    Reply
  • July 16, 2011 at 11:47 am

    I appreciate your time on this. Thanx for sharing.

    Reply
  • July 28, 2011 at 5:49 pm

    Thanks a lot for sharing this tutorial

    Reply
  • February 28, 2013 at 12:29 am

    An outstanding share! I have just forwarded this onto a co-worker who has been conducting a little research on this. And he in fact bought me breakfast simply because I found it for him… lol. So let me reword this…. Thanks for the meal!! But yeah, thanx for spending some time to talk about this topic here on your web site.

    Reply
  • February 28, 2013 at 12:57 am

    Great article. I’m dealing with a few of these issues as well..

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: