How To Create A Favicon
Uncategorized
I’m going to make a confession: I can’t stand favicons. To clarify, I love the idea and the little icons on my Mozilla tabs are nifty, but I hate having to make them. This is partially due to working within the constraints of 16 by 16 pixels, but more so that until now I haven’t found a good way to generate said icons on Windows. I was jealous as a whip (can a whip be jealous?) when Noel posted instructions detailing how to do it on a Mac. For aforementioned reasons they weren’t applicable to me, so I set out to find a clean way to do this on Windows without spending any moolah.
At this point someone is probably wondering what in the world a favicon is. As far as I know, it’s not a standard of any kind (and if it was it’d be a badly implemented one) but it’s a widely supported feature in modern browsers that allows a site to specify a small graphic or icon to go next to its address in the address bar and theoretically as the icon for the page when it is bookmarked as well. (Some examples of favicons.) I believe Internet Explorer was the first to implement this. Due to popular demand there is a new photomatt.net favicon (you may need to reload that link directly to see it). To see it in Internet Explorer, bookmark this site (which you should do anyway). In Mozilla and its progeny you should see it just fine automatically, and possibly in Safari though I don’t have that handy to test. To see it in IE for Mac you need to sacrifice an Intel CPU and do a favicon dance. Actually I’m not sure why IE5/Mac has trouble with some favicons, at some point in the past I tracked it down to MIME issues, but it’s not really worth the effort anymore.
Another good reason to have a favicon.ico in the root of your site is some browsers request that file whether it is linked in your HTML or not, so if there’s nothing there it fills up your error logs. Since I watch error logs pretty closely this has always been an annoyance for me.
So what’s the trick to creating lightweight multi-size favicons? I used to use the online java tool the folks at favicon.com offered, but now they seem more concerned with making money than providing free tools. More recently I’ve used Icon Forge which I can easily say is one of the most awful programs I have ever used in my life. Truly horrid. I wouldn’t recommend anyone do that, so here’s the process I came up with. (Any excuse to use a nested list.)
- Download png2ico, which is a small, free utility for Windows, Linux, et cetera that works quite well. Extract it to
c:/. - Create an image you’d like to use at a decent size (at least 32×32 pixels) in your favorite image editor. I like Photoshop so here’s what I did there:
- Ctrl + N to start a new document. Choose 32×32 pixels for the size. Cram whatever you want to use in there, I choose a comic Josh did of me a while ago.
- Do a Save for Web (Ctrl + Alt + Shift + S) and save it as a PNG with the filename
icon-32.pngto 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. - Now go back and resize the image you’re working on to 16×16 pixels (Tools → Image Size [is there a shortcut for that?])
- Save this image as a PNG with the filename
icon-16.pngin the same directory as the above.
- Now it gets a little tricky, open up the command line. Try Start → Programs → Accessories → Command Prompt.
- Navigate to the folder where the png2ico.exe file is, if you followed the directions above you can use the command
cd \png2ico. - 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 64×64 and 128×128 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 applicatoin icon you’d probably want to use a PNG-24 with full alpha transparency, which this tool supports as well. - Now there should be an
favicon.icofile 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" /> - Have a drink.
Now I know that sounds like a tricky process, but it’s actually not as hard as it may read and of course if you have any problems leave a comment and I’ll try to help you. There is supposedly a graphical front-end for using png2ico but it was so badly designed it’s actually easier to use the command line, as unlikely as that seems.
Update: Ian has found my favicon twin. Where have you been all my life?
Update 2: Oskar van Rijswijk recommends IrfanView in the comments. You might want to give that a try too.
[...] [...]
Pingback: Ping-o-Matic! » Favicon!
Pingback: ICTlogy
I have one on Neurotic Fishbowl and I Wish, You Wish, but they only show up sporadically.
Kymberlie, yours has always been one of my favorites to see in my tab bar.
I used IrfanView [ http://www.irfanview.com ] to make a favicon. It is freeware. You can change almost any graphical format to 16×16 … and then just save it as an icon (*.ico file). Easy!
your new favicon doesn’t load for me! it’s still old PM.
You might need to load it directly and do a force reload to trick your browser into grabbing the new one.
sadly, clicking the link you have provided actually downloads the old one. but i can see what it looks like by going to that site that talks about your favicon twin, so i know what it looks like. if only it would load, though!
you will need to empty the browser cache.
Glad to see you got around to the change. I echo Oskar’s comment about using Irfanview.
I used it and it worked great, thanks for the article.
I have been trying to figure out to do this for over a month. I didn’t even know what these things were called (learned a new word today: “favicon”) so I couldn’t even Google it. Thanks to Zeldman for linking to your site. And thank YOU for posting instructions!!
Caught this from Zeldman’s post on favicons… Ethan’s favicon seems like a copy of my pixelart work I did for deviantART back in 2001 =(
http://www.deviantart.com/view/119806/
While not necessarily free, I’ve found microangelo to be a useful program.
This certainly used to work, and it probably still does.
Create a 16×16 .bmp file of the image you want. Rename it favicon.ico. Upload it.
Easy as a whip.
I’ve been using a really good freeware app (with a GUI): “QTam Bitmap to Icon version 2.5.10″
http://www.qtam-computer.com/bmp2ico25.shtml
I’ve been using theh bmp to ico route as well… seemed to work for me, although I always have hassles getting favicons to appear in IE…
Irfan view is good and also the HTML Kit website (chami.com) has a page with a Favicon gerator on it – you can post a gif or jpeg image and back comes your favicon.
I found a great icon editor for Windows the other day. It does pretty much everything you’d expect of a simple icon editor, plus a few more things besides. Best of all, it’s free! http://www.snidesoft.com/
When I feel like making one, I go with @Icon suschi http://towofu.s5.xrea.com/soft/e-index.html#features
It took me like 3 years to discover it, but right-clicking on the image’s titlebar gives you a very handy mini-menu of image/canvas commands. And now I use it every day.
The correct type is not
image/icobutimage/x-iconx- types are unregistered with IANA. See ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/image/
Also see Apache’s mime.types: http://lxr.webperf.org/source.cgi/docs/conf/mime.types#482
(Tools → Image Size [is there a shortcut for that?])
I don’t know which version of Photoshop you’re using, but mine (7.0) doesn’t have a “Tools” menu.
Anyway, I’ve been using Alt-I, I for quite a long time to get to the image resize dialog quickly. You might wanna try it.
“…open up the command line. Try Start → Programs → Accessories → Command Prompt.”
no such thing… i mean, I go to Start, then Programs, then Accessories, but there is no Command Prompt. Am I missing something?
>>I used to use the online java tool the folks at favicon.com offered,
Hi, just to say that the folks at http://www.favicon.co.uk still have the online Java tool for making favicons…
I was trying to figure out how to make a favicon, and downloaded the png2ico, but I don’t have the g++ compiler. I didn’t feel like downloading g++, so I looked around and discovered that I could use “convert -c icon6.png -o favicon.ico” to make an transparent ico file.
Koby, they also have binaries on the download page.
Thanks for the instructions, I now have a meager favicon.ico for my pages!
Of course, now that I’ve done it by hand, I found a free tool online. Looks like the folks at HTMLKit are picking up the slack from favicon.com. Their tool will take any graphic file of any resolution and create a favicon.ico for you.
Give it a try: http://www.chami.com/html-kit/services/favicon/
On what page do you link to the favicon or is it on all pages?
It seems odd. I have been to a few sites that have a favicon show up.
However, I have been to numerous site that espouse knowledge of
favicons but none showing there own in the url window….?
Ah yours appeared. Why is it some favicons show up in favorites after being
booked marked but not in their url window, while on other sites they show up in
both places.
Yes – how do you link the icon image in your web pages – is it just on the homepage where you do that? I am trying to figure out how to use Microangelo, myself. Has anybody out there had any luck with that?
Another post by me – but I just tried out the HTML kit – http://www.chami.com link, mentioned in the comment by Michael Pierce, above, and that worked – very quick and easy, it created the icon from a .gif image that I uploaded, then returned it to me in a zip file, presto! They even tell you where to put the link in your HTML page – it only has to go on your index page, in between the tags.
I would love to know how to create the icon myself, using the Microangelo software which I actually downloaded, but still can’t figure out how to use from: http://www.impactsoft.com/muangelo/muangelo.html
If anyone out there knows how to do it with that, maybe they could post the info?
Something else to consider. If you create a 32×32 icon, it’ll keep it’s quality if a user drags the favorite to his/her desktop. The browser will resize it automatically to 16×16 for the browser window and favorites. But if you start with a 16×16 image, and the user puts it on their desktop (something I do quite often) it “blurs” to the point of ugly.
If you want to see an example I’ve set the favicon on this page to 16×16
http://cloneclubs.com/giveaway.shtml
and this page
http://cloneclubs.com/screensaver.shtml
to the 32×32.
Both look about the same in the browser address bar, but once you drag it to the desktop, the 32×32 is clearly better.
Something to consider.
Well – I was under the impression, or had read that the favicon would only work if it were 16 X 16, but I understand what you mean by the quality – when I created mine with the generator, I uploaded a 48 X 48, and it returned one that looks fine in the browser bar, but haven’t tried to drag it to desktop yet. I didn’t know that you could upload a 32 pixel size, though… will give that a try.
Here’s another question: does it have to be named: favicon.ico, or can you give it another name, with the .ico extension?
I have a long-running website which is currently under construction. We do a lot of programming which are downloadable on our site, and therefore we have to deal with icons. I have tried using Icon Forge and have the same opinion you do about it. I highly recommend ‘Axialis IconWorkshop 5′ – it is fantastic!
Gove it a try and tell me what you think.
You Rock My World. Stumbled across your site…thank the GODS for that. Thanx for the “understandable” step by step solutions to creating a Favicon!
Nice resource. Yes those little icon applications are so irritating; it’s best to use the app you’re familiar with. BTW, love the design, I think that cool green background might ‘inspire’ an upgrade to one of my sites…
I cant seem to get the damn thing to work
Thanks anyway!
Worked great for me, thank you. Someone asked, I can’t find Start → Programs → Accessories → Command Prompt. Answer, just go to Start > Run, and type the word command and press OK. That’s it. I am having a problem forceing the new favicon icon as my old keeps showing. I linked directly to it from a page. still viewing old. Deleted cache and temp
where abouts do i put the “”" “”" coding?
Hi, Using Photoshop you can save correct ICO files with my free plugin: download from here.
http://www.chami.com/html-kit/services/favicon/
Hi!
Is it possible to make a kind of icon that you can see in the address bar without putting them in the favorits?
Thanks Toby for the Photoshop plug-in link.
I’m curious though, once the favicon has been set say for your homepage, it doesn’t stay in the URL address bar once u head off to another page on your site, say about us page.
Any way of making the favicon stay on the URL address bar thorough your site??
Thanks for the help.
Cheers.
For Mac users: Safari 1.2.1 stores favicons in a separate cache. You cannot simply choose ‘empty cache’ from the menu. If you’ve made a new icon for your site and want to see it, you must empty the icon cache separately. Download the Safari Icon Manager (freeware) to empty the icon cache.
Sweeeeet – it worked!
I used png2ico on Linux FC2 and it worked right the first time! Bling bling
That was so simple! Thanks!
Opera 7 displays the favicons without any problems. Internet Explorer refuses to display it, no matter what I do. Deepnet Explorer only displays certain favicons. Lucky for me, I don’t use IE anymore
I just saved the picture as favicon.ico and it worked fine. Did I miss out on something by not using the program you suggested?
Pingback: WebDesignBlog
Please note that the correct mimetype is image/vnd.microsoft.icon.
Thanks for this information!
I just figured out what the heck a favicon was and did a google-search on the term. I can’t tell you how pleased I was to see a link to your blog with an article on “How to Create A Favicon.” I should have known all along that you’d provide me with the instructions I’d need on this. Rock on Matt!
So, you guys are going to all this trouble to create these little beauties, but whenever I add a website to my Favorites (IE 6.0), they disappear after a couple of days to be replaced by the Internet Explorer ‘e’ icon. Is there something I can do to make them stick?
Nope that’s a bug with internet explorer.
The favicons disappear from IE Favorites — to fix this use the FavOrg program to make them persistent. For simple favicons the GoldIcon program works well and is simple to use.
Yeah, I have Opera 7 and MSIE6 and IE refuses to display any favicons at all. As ‘lantere’ had the same problem above it must be something to do with the way these programs work together. Unfortunately, this little feature doesn’t make testing any easier.
Hello, I just wanted to tell you thank you. I didn’t get the progam to work, but i used a free trial version converter and follow your advice. Thanks agian,
Lisa
Is it correct that favicon only work (under IE) if the page does not allows framing (in the address bar)
Thanks for advice
Hendrik Jan
Fantastic. Thank you.
Using MS-DOS Prompt on Windows ME, I had to provide the full address to the files for it to work. And work it did.
Does the icon have to be a .ico file? I used a gif, and it works great, but it won’t stay. Everytime I navigate to a different area on my page, the icon disappears.
http://bluetongueskinks.net
Thanks guys! Its just wonderful application. And to top it all very easy to operate.
Pingback: 亀ã®ç”²ç¾… » Favicons
Pingback: noscope | Favatars
Pingback: { chase southard }
Pingback: blog.rosemarysanchez.com » Favicons, Accessibility, and Bugs… Oh My!
I have tried to upload the favicon to my root directory on http://www.fuzzylogik.co.uk but the file still does not appear in the browser. I also tried to include it and link from my img file but still no joy. Im not sure if the code i have is correct either:
Is this the correct code? :O)
Thanks for the info on how to make a favicon – I now have one on my site!
BTW, I used the gimp to make the image, and it actually has a “.ico” option in the “save as” menu.
Cheers,
Navin
Pingback: Blogocentricity » Favicon!
Pingback: CrypticScriber
i just used: http://www.html-kit.com/e/favicon.cgi
its free, online, easy and instant!
Thanks, Matt! Displaying of favicons in the tabs in Firefox seems to be kind of touch-and-go, but hey, I’ll take what I can get. Thanks for the help.
Pingback: Randy’s Life » Favicons and random images!
Another favicon twin of yours?
Pingback: Digital Divigation » Innovative Dreams and Directories
Thanks for the instructions, Matt. It worked like a champ!
Pingback: Philadelphia Standards Organization » Blog Archive » Jason Santa Maria on Redesigning A List Apart
Pingback: Ryan ’s Blog » links for 2006-02-25
Firefox does favicons just as bad as IE. Like, right now, I’m not seeing shit for this site. Sometimes I see it, sometimes I don’t.
I swear, I think Opera is the ONLY browser on this planet that handles favicons correctly.
I am using IE 6.0, and after 3 to 4 days all my favicons in “favorites” disappear. What I have been doing is deleting them and re-bookmarking them. Any ideas on how to stop them from disappering in the first place?
Answered my own question….program called “FavOrg”!
Umm… Photoshop?
Make the icon, drop it in the folder you want it in.
End of tutorial.
Pingback: Created the Favicon « Jayant Kumar Gandhi
There’s also a free download for Windows called icon.edit
for anyone thats as lazy as i am (and equally bad at typing), you could also create a batch file to do all the nitty-gritty, once youve created the x-16.png and the x-32.png.
to do so, at some point:
- open your Command prompt, stay in your root directory
- type ‘copy con favicon.bat’, hit ENTER
- type ‘cd \png2ico’, hit ENTER
- type ‘png2ico.exe favicon.ico –colors 16 icon-32.png icon-16.png’, hit ENTER *
- hit F6, hit ENTER
then each time to need to make a favicon *:
- open your Command prompt, stay in your root directory
- type ‘favicon’, hit ENTER
- all of the above steps will run and your new favicon.ico file will be in your png2ico directory.
* NOTE: the above process requires you to always save your icon-16.png and icon-32.png in the png2ico directory, and name them ‘icon-16.png’ and ‘icon-32.png’, AND this process will always overwrite the ‘favicon.ico’ that is in the png2ico directory. so, save your PNGs, make your favicon, then move those files out of the png2ico directory before you make another favicon.
Love this blog! I recently found this online generator to make my favicons—
Quick Favicon There are a lot of them out thee. I also recommend downloading The Gimp Gimp It’s open source and can do just about anything Photo Shop can do. I also recommend Irfan View Irfan And if you can manage to find the free version of “Faststone” (not free anymore) which I have. These will do any novice well!
Pingback: A website checklist. 20 things to check before going live.