Articles « Blog « Monday Feb 9th: Favicons

Favicons!

I like it when I go to a webpage and it has a little image by its name in the address window. I want that for Monalle. Hmmmm… I have no idea how to do that, but I think I remember it’s 16×16 pixels… I’m going to try and do it and keep track of it the process in this blog entry, so you can have a peak at what goes on around here…

A look at some nice favicons

1 min : I have no idea how to do it, so I’m gonna need to figure it out… Where to begin? How about a name for it? What would you call it? It’s a little icon in the address bar, so how about “Address Bar Icon”, seems like a good starting point… I’m gonna check the book’s index on that one (faster then searching the forums if I get lucky)…

3 min: Cool, I found it, I looked up “Address bar icon” found it, and it turns out the proper name is “favicon”. That was easy so far…

5 minutes – Did a google search on “ favicon galleries”, found fifty of them, consolidated it into the image above. All of those are best of breed, and I am not actually in the same league as those designers, but I want mine to sit with them and not stand out, good enough to not look amateurish… just good enough to fit in with the pack.

The Monalle EaGull

8 minutes: Now to make one… I think I want to try the Monalle Eagull image I used on the about page, I like that image and I spent forever making it… The idea was to have a sort of Jonathon Livingston Seagull of the Phoenix world, a symbol that we all ordinary yet we are all extraordinary. So I came up with the Eagull – a hybrid of an Eagle and Seagull. Originally he was on fire, like a Phoenix, but I changed it so now he just glows…

14 minutes: Wow, working in 16×16 pixels is hard…

18 minutes: Done (well close enough to start the coding) – it’ll do for now. I Found the code extract in the book, it’s just one line of code… Easy… no problem… but what the heck is .ico?

20 minutes: Turns out .ico is microsofts “icon format” and my image editor wont work with it, so I’m going to use an online file format convertor.

22 Minutes: Excellent! A few problems with an outdated MIME type corrected and I got it working in both firefox and internet expolerer… From concept, to study, to Graphic Art, to code, to code conversion, to upload, to fully functional cross browser compliant in 30 mintues… Not bad… one problem, the transparency issues… Since I converted the image the transparency isn’t holding together, and the edges of the image look funny…

A look at some nice favicons

2 hours and 18 minutes later ….. sigh… Okay, finally got the transparency to work right so the image now looks , pretty good in the nav window… Turns out, well, to be honest it turns out that I don’t really know what I’m doing most of the time… But I never let that stop me before!!!!

Here’s the same set of graphics with our new Monalle Favicon amdist them… What do you think, does it stand out too much from the pack or is it good enough to “not look amateurish”?

Daniel