Create a favicon with Photoshop

[Tommy]

A few years ago, while surfing you will see a small icon beside the site name on the browser's URL bar, which is Favicon icon.

More and more and more important favicon, most large websites have favicon threads, and other popular browsers display the favicon support Url bar. webmastersun.com will guide you how to create a favicon for your website in photoshop.


- Favicon extension is. ICO, so to save this format, you have to download this plugin:
View attachment ICOFormat-1.6f9-win.zip
Unzip and copy the folder and install your photoshop (usually: C: \ Program Files \ Adobe \ Photoshop \ Plug-Ins \ File Formats)

- Create and design your logo, put on size 16 x 16 pixels, then save the file and name it favicon, ico format is (favicon.icon)

- Upload files to your web directory.

- Normally the browser will automatically recognize your favicon and display them. But some older browsers are not so smart, use the following code to call the favicon out:

<link type="image/x-icon" href='Duong icon"/> lead to file' rel="shortcut

fun with tips!

 

[Frank]

cool guide for creating favicon, I will try to make one for my website. thx

 

[lennondevid]

Well. I think Photoshop is an best image editor in today. It is used to make a picture more real and live. You can also edit photos,make layouts, and a bunch of other stuff very easily.

 

[Noticed]

I agree Lennondevid, Photoshop is an amazing piece of software, and thanks for the tutorial OP!

 

[madelinekim]

Great and useful tutorial. Photoshop provides a great option to create favicon which is useful to create customized banner. Using a photoshop its become so easy and simple to create a favicon.

 

[michelsteedman]

Photoshop is widely popular web design software to make dynamic and attractive web pages. It also provides the most convenient way to create a favicon.

 

[ClearEyes]

Working on a 16px x 16px image is very difficult, the best way to make a favicon is to make your image normally with Photoshop, save as either jpg (with background) or png (transparent background), make sure your file size is under 150kb and upload to here:

http://tools.dynamicdrive.com/favicon

This app will make you a nice 16 x 16 favicon in .ico format, you also have the option for bigger icons if you need them.

A word of advice though, don't make your favicons too detailed or busy - they need to be clear and recognizable.
Enjoy!
ClearEyes