11 thoughts on “New Good Morning Gloucester Favicon”

  3. Bill feels as though the favicons which he produced are far superior to my self admitted lowly computer graphics skills favicon. Tomorrow we shall unveil his design!

    Like

    Reply

    1. Joe, you have the steps down. You just need to clean it up a little more. What are you using for an image editor? I would try to get rid of the vertical lines on either side of the seagull to start.
      A company logo is a graphic representation of the company/organization. The icon should represent the logo, it doesn’t necessarily have to be the logo.
      The problem with favicon and icons in general is the very limited space you are working with – 16×16 pixels for a favicon. That’s pretty small for a visual representation of anything! I try to produce them at 32×32 and reduce them down, but something is always lost in the translation.
      Another common mistake is trying to cram too much information into the icon. If your icon is too busy, it looses it’s iconic nature. Look around when surfing the web; the favicons you see are representations of logos and brands – very rarely does the actual logo translate to a good icon or favicon. It’s almost always the part of the logo that captures the attention.
      Check these to see what I mean:
      http://www.msn.com/favicon.ico
      http://www.boston.com/favicon.ico
      http://www.nationalgeographic.com/favicon.ico
      http://www.nationalgeographic.com/favicon.ico
      http://www.reuters.com/resources/images/favicon.ico
      http://www.bestbuy.com/favicon.ico
      http://a248.e.akamai.net/164.109.80.72/content/dam/Dunkin_Donuts/favicon.ico
      http://twitter.com/phoenix/favicon.ico
      http://www.google.com/favicon.ico

      Then there are logos that serve as good icons like:
      http://www.mcdonalds.com/favicon.ico
      http://www.cnn.com/favicon.ico
      http://www.audiusa.com/ngw_base/img/favicon.ico
      http://www3.mercedes-benz.com/mbcom_v4/favicon.ico

      And borderline ones like Levis – they have to use the text, but it ruins it at 16×16:
      http://www.levis.com/favicon.ico

      Like

      Reply

      1. I used Paint. Something I would wonder about with an image 16x 16 is how they would translate to an iPad or larger cell phone icon. WordPress takes the larger image and makes three different sizes out of the same image for different uses. There must be some code they use to know which size to stick where.

        HTC EVO with GMG favicon button

        This is how it looks on my iPad-

        Now I wonder if a smaller .ico image at 16×16 would need to be enlarged and pixelate?

        Like

        Reply

        1. That’s where it gets a bit tricky. The .ico file format used for making icons can contain multiple versions of the same icon. So in one icon file you can have versions in 16×16, 32×32, 48X48, 64×64 and for iphone/ipad 72×72. Doing this makes the icon bundle more flexible, but also results in a larger file size. There are tools out there to make a bundled icon, but I use the photoshop plugin. If you only make one version with a large icon, most browsers and systems will automatically resize it to fit, but you’ll run into problems with older browsers/systems.

          Like

  4. I found when making these that a final edit swapping in and out individual pixels might get some clarity around something as small as the GMG. Those letters are probably only four pixels high so it could be tough.

    The one you have up there now looks pretty good.

    Like

    Reply

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