Create a favicon with Photoshop

Tommy

Moderator
Joined
Sep 28, 2012
Messages
370
Points
43
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.
favico-0-tut.jpg
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-show.jpg

- 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!
 
Last edited:

Frank

New member
Joined
Jul 7, 2012
Messages
40
Points
0
cool guide for creating favicon, I will try to make one for my website. thx
 

lennondevid

New member
Joined
Jul 18, 2012
Messages
4
Points
0
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

New member
Joined
Aug 1, 2012
Messages
20
Points
0
I agree Lennondevid, Photoshop is an amazing piece of software, and thanks for the tutorial OP! :)
 

madelinekim

New member
Joined
Aug 8, 2012
Messages
34
Points
0
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

New member
Joined
Jun 25, 2013
Messages
13
Points
0
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

New member
Joined
Dec 21, 2013
Messages
26
Points
3
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
 
Newer threads
Replies
15
Views
8,082
Replies
7
Views
11,800
Replies
18
Views
9,614
Replies
3
Views
4,228
Latest threads
Replies
2
Views
117
Replies
1
Views
188
Replies
6
Views
423
Replies
11
Views
545
Replies
2
Views
238
Recommended threads
Replies
2
Views
5,030
Replies
6
Views
1,854
Replies
4
Views
3,964
Replies
1
Views
2,910

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top