144075358
How to create a favicon
Matt's how-to on creating a favicon:
1. Download png2ico, which is a small, free utility for Windows, Linux, et cetera that works quite well. Extract it to c:/.
2. Create an image you’d like to use at a decent size (at least 32x32 pixels) in your favorite image editor. I like Photoshop so here’s what I did there:
a). Ctrl + N to start a new document. Choose 32x32 pixels for the size. Cram whatever you want to use in there.
b) Do a Save for Web (Ctrl + Alt + Shift + S) and save it as a PNG with the filename icon-32.png to the same folder as the program you just downloaded (to keep things simple). If you want to keep the size down I would recommend taking it down to 16 colors. Don’t forget transparency if you need it.
c) Now go back and resize the image you’re working on to 16x16 pixels (Tools ? Image Size)
d) Save this image as a PNG with the filename icon-16.png in the same directory as the above.
3.Now it gets a little tricky, open up the command line. Try Start ? Programs ? Accessories ? Command Prompt.
4. Navigate to the folder where the png2ico.exe file is, if you followed the directions above you can use the command cd \png2ico.
5. Now you just have to enter a command to roll those two PNG files you made into one nice ICO file. Here you go: png2ico.exe favicon.ico --colors 16 icon-32.png icon-16.png . You may be able to use command line completion (pressing a letter or two and then tab) to fill some of that in for you. You could potentially embed 64x64 and 128x128 pixel sizes into the icon file by just specifying additional PNGs of that size, but for a web favicon that really isn’t needed. Just remember this if you ever want to make a nice application icon. For an application icon you’d probably want to use a PNG-24 with full alpha transparency, which this tool supports as well.
6. Now there should be an favicon.ico file in that same folder which you should upload to the root of your site and then link to it with something like < link rel="shortcut icon" type="image/ico" href="/favicon.ico" >
7. Have a drink.
1. Download png2ico, which is a small, free utility for Windows, Linux, et cetera that works quite well. Extract it to c:/.
2. Create an image you’d like to use at a decent size (at least 32x32 pixels) in your favorite image editor. I like Photoshop so here’s what I did there:
a). Ctrl + N to start a new document. Choose 32x32 pixels for the size. Cram whatever you want to use in there.
b) Do a Save for Web (Ctrl + Alt + Shift + S) and save it as a PNG with the filename icon-32.png to the same folder as the program you just downloaded (to keep things simple). If you want to keep the size down I would recommend taking it down to 16 colors. Don’t forget transparency if you need it.
c) Now go back and resize the image you’re working on to 16x16 pixels (Tools ? Image Size)
d) Save this image as a PNG with the filename icon-16.png in the same directory as the above.
3.Now it gets a little tricky, open up the command line. Try Start ? Programs ? Accessories ? Command Prompt.
4. Navigate to the folder where the png2ico.exe file is, if you followed the directions above you can use the command cd \png2ico.
5. Now you just have to enter a command to roll those two PNG files you made into one nice ICO file. Here you go: png2ico.exe favicon.ico --colors 16 icon-32.png icon-16.png . You may be able to use command line completion (pressing a letter or two and then tab) to fill some of that in for you. You could potentially embed 64x64 and 128x128 pixel sizes into the icon file by just specifying additional PNGs of that size, but for a web favicon that really isn’t needed. Just remember this if you ever want to make a nice application icon. For an application icon you’d probably want to use a PNG-24 with full alpha transparency, which this tool supports as well.
6. Now there should be an favicon.ico file in that same folder which you should upload to the root of your site and then link to it with something like < link rel="shortcut icon" type="image/ico" href="/favicon.ico" >
7. Have a drink.
Labels: Web Devolopment
0 Comments:
Post a Comment
<< Home