|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
Killer Web Design Tips, Secrets and Techniques.
Thread: Creating Favicons
|
| No member browsing this thread |
|
Thread Status: Active Thread Type: Sticky Thread Total posts in this thread: 29
|
|
| Author |
|
tpattison
Advanced Member UK Joined: Dec 29, 2004 Post Count: 1662 Status: Offline |
Creating Favicons First, use a graphics program to create a 16x16 pixel image. Save it as a PNG image and name it favicon.png. Download png2ico (PC only) and extract to a convenient place. Create a new text file in the same folder as png2ico and insert the following: png2ico favicon.ico favicon.png Rename the text file to CreateIcon.bat. Place favicon.png into the png2ico folder and double click on CreateIcon.bat. A file named favicon.ico will be created in the same folder. Move this file into the same folder as your website's index.html file. Place this in the head of every document in the site: <link rel="shortcut icon" href="favicon.ico"/> And there you have it! A lovely little icon for your bookmarks. ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen ---------------------------------------- [Edit 1 times, last edit by tpattison at Sep 29, 2005 1:46:18 PM] |
||
|
|
billyboy
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
Thanks Tim! I just learned how to use them, but was stuck with what I could find online. Now I can make my own.  ---------------------------------------- Quiquid latine dictum sit altum viditur |
||
|
|
Broc
Advanced Member U.S.A. Joined: Mar 28, 2005 Post Count: 962 Status: Offline |
Thanks alot tim. I made my own on Friday. Good tip. ---------------------------------------- Broc High Tide Web Services High Tide Templates |
||
|
|
LSW
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6287 Status: Offline |
I always did mine with Michaelangelo, but this is great for using photos etc., just did a new one for SACB as the old one was their old logo. Works well. However 16 x 16 is to small, I always use 32 x 32 ---------------------------------------- Gu.aal kwsh� yak'�i it�akw ijeet wugood�k LSW-WebDesign.com |
||
|
|
tpattison
Advanced Member UK Joined: Dec 29, 2004 Post Count: 1662 Status: Offline |
Glad you found that useful. @LSW - 16x16 is the favicon size, I didn't think that any other size would scale-down well in the browser. If anyone has found a prog like png2ico for the Mac then please post a link here. ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
||
|
|
LSW
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6287 Status: Offline |
Sorry, 32x32 is a normal Icon size too. My point was more that 32 x32 is easier to work with then 16x16. Once loaded by the browser it is resized as 16x16. But to make it 16x16 really lits you ability to really due clean work when making a icon. Just didn't come across clearly. I leave mine 32x32 and let the browser resize it. ---------------------------------------- Gu.aal kwsh� yak'�i it�akw ijeet wugood�k LSW-WebDesign.com |
||
|
|
Les
Advanced Member Joined: May 9, 2004 Post Count: 640 Status: Offline |
Hi LSW/all I used this site Its run by chami/the htmlkit people ---------------------------------------- Tomorrow never comes, make the most of today ---------------------------------------- [Edit 2 times, last edit by Les at Oct 2, 2005 5:01:26 PM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
When I made my own Icons to replace those Ugly Win98 icons, my software could save my work in a variety of colors in 128, 64, 48, 32, 24, & 16px versions of the icon. Reason is because the application that is using the icon will then choose the appropriate size so it doesn't have to size it up or down harming the quality of the icon. Much like not adding width and height to images in a web document. So, I used to design in 128x128 true color and then scale down to 64 - fix any problems in shading etc., - then resize to 32; then 24; then 16; and it worked out ok. If I made an icon in 64, for example, and let the intended application resize it (instead of using my Icon program), I was never happy with the resulting quality. - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
davidmead
Advanced Member USA Joined: Jul 21, 2003 Post Count: 749 Status: Offline |
Nice post Tm. I always use iFranView to create all my favicons. Just save it as a 16x16 bitmap and open in iFranView then sav as a favicon. You can also choose a transparent color then. Dave ---------------------------------------- Building quality, affordable web sites worldwide - DMWebsites.com |
||
|
|
tpattison
Advanced Member UK Joined: Dec 29, 2004 Post Count: 1662 Status: Offline |
@LSW - For the sake of the tutorial, I used 16x16 because that the size browsers use. But surely Photoshop will resize an image better than any browser, so we'll stick to 16x16? @Shelf - png2ico will let you save multiple sized images in 1 .ico file. Again, I wanted to keep the tutorial simple. Thanks to everyone for their input! ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
||
|
|
|
|
Current timezone is GMT Mar 21, 2010 5:38:34 AM |
