Drilling Down On The Perfect Set of Favicons With Bill O’Connor Part II


Bill writes-


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.

~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…

14 thoughts on “Drilling Down On The Perfect Set of Favicons With Bill O’Connor Part II

    1. That Ray of Sun wouldn’t translate when shrunk down. This is not to replace the LOGO. You do understand that, right? This is for the little spots in your browser where you bookmark the page less than half the size of your pinkie fingernail. Text or small lines like that would not show up.


  1. I also like the blue with the GMG text, but think the font should be a pt. or 2 smaller, so it is still clearly visible, but doesn’t overpower the image. My 2 cents.


  2. I made a favicon for my Valentine-Design.com web site which is a little seashell and it looks great but I’ve yet to figure out how to make my Parlez-Moi Press mermaid into a favicon. I’d say simple is best — personally I like the blue background and I’d make the gull a bit larger in relation to the background.


      1. Sure on the bigger ones it is great but for the little thingie that appears in the address bar you don’t need it.

        Okay, I’m watching your interview with seARTS right now. Got to go…


  3. i’m still liking the yellow without the GMG..because..as i look at my “bookmark menu” list it seems many of the favicons are blue…
    facebook -blue
    the yellow just pops for me…..


Leaving a comment rewards the author of this post- add to the discussion here-

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s