New Good Morning Gloucester Favicon
Y’all should start seeing a new Favicon in your web browser when you click on your GMG bookmark or have it on your screen. Upon prompting from NorthShoreKid’s Bill O’Connor I tweaked one of the logos that Beth Swan made for the blog.
I started with this-
Step 2) Filled In The Background Blue
Step 3) Filled More Background and cropped out the white in bottom right corner
Step 4) Blacked out the small type of GOOD MORNING GLOUCESTER and replaced it with hopefully somewhat legible GMG once it is shrunk down.
Let me know what you think.
In case you didn’t know, a favicon is the little tiny logo that appears in most web browsers’ address bar or when you save it to your bookmarks or in your bookmarks/favorites folders it will be the little logo that accompanies the web address.
I made the one above but Bill made a couple of different ones that I’ll post within the next few days and we will let the readers decide which one they prefer in a poll. Which ever Favicon you guys want is the one we will go with.
Joe, I think it looks
hackedgreat!LikeLike
LOL! We will let the people decide tomorrow! :)
LikeLike
It looks good, but still hard to read the GMG. Not sure there is much you can do about it since it is so small.
LikeLike
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!
LikeLike
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
LikeLike
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?
LikeLike
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.
LikeLike
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.
LikeLike
nice!
LikeLike
Joey, I kinda like the next to last one better.
LikeLike
What’s wrong with your original icon? Seagull is Glosta!
LikeLike