Web 2.0 Favicon

Print
PDF
User Rating: / 4
PoorBest 

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.

Adobe Photoshop New file 400 x 400

Use the Paint Bucket Tool with color - #333333

Adobe Photoshop Fill color #333333

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

Adobe Photoshop Add a circle with any style

 

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)

Adobe Photoshop Add a letter

 

Now save your file as a .jpg

Open your internet browser and head to Favicon Creator.

Now select import image from the left menu.

Select Import Image

 

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.

Find your image file

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

Save your new favicon

 

You now have a fancy new favicon.

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