Author: Joey Ciaramitaro

The previous set of favicons from part II

While Bill did a great job with the set of favicons produced above there was still some minor tweaking to create what would be in my mind the perfect set.

Firstly the yellow ones will not be used because as I said in part II blue is part of the GMG brand.

Secondly, I noticed that there is a blue  border around the favicons.  While that wouldn’t bother me, I noticed on my iPad that when Apple modifies icons for use as buttons on their screens that the rounded corners accentuate and make them look hacked as the borders appear and then disappear at the corners.

See a screen capture from my iPad to see what I mean-

It may be nit-pickey but if we’re going to live with it for a while don’t we want to do it right?

My email to Bill-

OK here’s the question Bill.  It seems but it just might be the way they get put on screen  that there is a black border around the edges.  When they get put onto an iPad or iPhone is it possible to rather nave no border and just the blue so when the devices round the corners you wouldn’t see those lines?
because in that case I would appreciate the larger ones blue with text bundles with the smaller ones without and actually I’m not sure if it was possible and I don’t want to be a total PITA but in the smaller ones take out the crooked black bar at the bottom all together and just have the blue background with the black silhouette of the seagull so that the seagull can be larger without the black crooked bar on the bottom.
So the smaller ones blue background with just the gull
the larger ones with the gull/crooked black bar on bottom with GMG text
again I want you to be perfectly honest and feel free to let me know if I’m asking too much.  I don’t want to be a PITA but i think I now understand the benefits of being able to bundle all these different style images for the different places they would reside.
oh and even if you dont feel like doing it, thanks, these have been interesting blog posts that I’ve been able to share with the readership (the process)

Here is the set Bill came up with based on my Pain in the Ass tweaking request-

Bill writes-

Joe, you’re not a PITA, you’re a ROYAL PITA!  Seriously, though, if I wasn’t enjoying this I wouldn’t be doing it.

I think I understand what you are asking, so I made a new mock up.  The border edges have been removed.  Larger than 32×32 have the GMG text and the smaller versions are stripped out.  In the mock up you’ll notice the smaller icons have two versions.  One without the black band on the bottom and the other with it.  I did this because the ones without the band lowered the gull to the bottom edge of the image and it looked kind of funny to me [I’ve been tweaking these at a magnification of 500% so my perception of them is certainly skewed]. To raise the gull back up I had to add something for it to stand on.  I tried adding a column to represent a dock pillar, but it looked stupid at 16×16, so I opted for the flattened black band.  I just wanted you to have the opportunity to see the difference for the small ones and decide for yourself which one you prefer.

Also don’t forget this isn’t written in stone – and you can change for it in the future.  I was actually gonna suggest that you can add a set for each season with different color backgrounds behind the silhouette to represent the season: Spring=green, Summer=yellow, Fall=orange/red/brown, Winter=blue.

The aren’t technically icons yet, they’re just the mockups.  Once you’ve decided we’ll make them icons, bundle them into one icon, and test them out.  Testing is a whole other clusterf#!k.

Let me know what you think.

Thanks,
~Bill O’Connor
North Shore Kid

Bill writes-

Joe,

Here’s a complete icon set in two flavors – yellow gradient background we’ll call ‘Sunrise’, and blue gradient background we’ll call ‘Daybreak’. Both icon sets are with lettering or without, and are rendered in the following sizes 16×16, 32×32, 48×48, 64×64, and 72×72.  72×72 is ipad sized.

You can bundle a set into one icon file (favicon.ico) that will allow systems and browsers to determine the best fit – instead of the one-size-fits-all approach.  I would suggest an icon bundle of one color where you use smaller icons with no text (16×16 & 32×32) and the rest of the larger icons in the bundle would have the GMG lettering.  Sort of a best of both world scenario.

Thanks,
~Bill O’Connor
North Shore Kid

Bill has been going above and beyond in helping to create the perfect favicon set for us.

OK now I’m going to start talking a little technical-

In case you don’t know why there are the different sizes provided in the set of favicons Bill sent, it is because the different sizes are recognized by browsers for placement on your device.

For example- the smallest ones are used in your browsers’ addresss bar up above or if you bookmark GMG in your Bookmarks Toolbar, the smallest favicon goes there.  If you add GMG’s bookmark to your iPhone, iPod Touch or Android Phone’s home screen, then the medium sized favicon is recognized automatically and placed as a button on your mobile device.   If you save a bookmark to GMG on your iPad’s home screen it will save the larger image as the button you would press to go directly to our blog.  So for the smaller ones where you are never going to be able to read the text because they are so tiny you can put the seagull without the text but on the favicon which would display larger and the text would be legible, you can add the GMG lettering below the seagull.  The way this is accomplished is by creating a file which contains each version of the different size you would like into one .ico file.  From wikipedia-

The ICO file format is an image file format for icons in Microsoft Windows. .ICO files contain one or more small images at multiple sizes and color depths.

I’m pretty sure we can toss out the yellow ones.  Even though they look nice, I’m all about branding and having it recognizable and changing our theme to yellow seems treasonous.  Right now I like the idea of the larger favicons with the GMG text below the seagull and and the smaller ones without but there are a few things that I think we need to be tweaked for perfection.

In the quest for the perfect set of favicons for GMG look for part III tomorrow where I ask for some tweaking to the set of favicons Bill produced which are shown above.

The adventure continues…