Web 2.0 Favicon - Photoshop Tutorial

Web 2.0 Favicon Tutorial

What you will need:

Photoshop CS, CS2 or CS3
Web Acess

Lets start off with creating a new document - 400 x 400 pixels.

Set your width as 400 pixels and your height as 400 Pixels.

Set resolution at 72 pixels/inch and color mode as RGB Color (8 Bit)

Now if you want the final favicon to be transparent in areas I suggest you set background contents to be transparent. You can add or remove your background at any time.

Now select the Paint Bucket Tool and set the color to #333333.

Now Create a new layer Ctrl+Shift+N

Fill this layer.

Now Use the Ellipse tool to create a large circle, use any styling you want at this point, I went with a red fade.

Now add the Text you want to see, In this case I used a large letter T.
Remember the favicon is very small so its hard to make out words.
(unless you do a word scroller but that is for another tutorial)

Now save your file as a .jpg (non transparent) or .gif (transparent)

Open your internet browser and head to www.favicon.cc  Favicon Creator.

Now select import image from the left menu.

Browse to the file you created on your PC, select Keep Dimension

Click Upload and you will see your favicon, you can adjust it using the inbuilt editor.

If you are happy simply download it, and upload it to your web host and replace the favicon.ico

You now have a fancy new favicon.

Now you are free to go crazy, try different backgrounds, or no backgrounds, change the letter create a copy of your logo. This converter will work it all out for you and you can then download the finished product.

If when you are finished the final output isnt perfect you can use the editor supplied at www.favicon.cc to make more changes.

If you dont have photoshop you can create the exact effects with a little practice on the actual editior.

You can check out my own one on this page.

Look at your internet browser and you will see our web 2.0 S.

Thanks

Storm IT Solutions

Web Design Glasgow