Aug 27
The Brizzly Favicon Is On the Map!
Icons of the Web is a cool little app that visualizes the web’s top sites via their favicons. The larger the favicon, the more popular the site.
I was delighted to find my Brizzly icon hiding only a little ways into the pixel forest. It’s above and to the right of the MSN butterfly, nestled between SFR and the SparkFun icon. Neat!
Jul 19
Whoosh! Forrst Adopts My Favicon Redesign
Déjà vu! Brizzly and Forrst now have something in common: both have adopted my favicon redesigns.
The Forrst icon was particularly rewarding since I designed it using the app itself as a tool for soliciting and responding to feedback. You can read about the design process in last week’s post on the subject.
Jul 12
Forrst Favicon Redesigned
Forrst is an awesome new platform for designers and developers to share bits of what they’re working on (my buddy Pasquale created the logo and introductory graphic).
The site and accompanying illustrations are gorgeous, but I wasn’t a fan of the favicon. These alternatives were designed with feedback from the Forrst community here, here and here.
Update (July 19, 2010): Forrst now uses my redesigned icon!
The current former favicon, the logo resized on a white square:
My redesign, taking cues from the web site header:
A wooden alternative (my personal favorite):
I whipped up a userscript for those who’d like to use my alternatives, optimized for Chrome and Firefox with the Greasemonkey extension.
Firefox users can choose between the green and wooden versions by going to Tools, Greasemonkey, UserScript Commands. Forrst has adopted my green favicon as its own, so the script has been updated to apply the wooden version only.
May 19
How I improved 4.379% of Brizzly’s home link
Brizzly is my favorite web-based Twitter application. Regular readers of this blog may remember my redesign of the service’s favicon for Peter Wooley’s Brizzly Favicon Alerts script for Greasemonkey.
Shortly after the script’s debut, I was contacted by the folks at Thing Labs (they make Brizzly) to talk about integrating my icon into the app.
A few months later, a new Brizzly interface debuted. Hidden in plain sight among the numerous UI and feature improvements, my 16 square pixels of glory perched unassumingly at the top of the page.
This is why I love the Internet. If you release a compelling product, you’ll inspire users to contribute ideas, feedback, or even design assets. Keep your ear to the ground, and you’ll swiftly reap the rewards.
Nov 07
Introducing Brizzly Favicon Alerts
I love the Internet as a collaboration tool. Earlier today I nabbed an invitation to Brizzly, a promising young Twitter and Facebook client with a clean, intuitive interface and a modest set of neat features. I dug the simplicity of the interface, with one exception; the favicon’s abrasive, jagged edges.
I invited my frequent co-conspirator Peter Wooley to the service. After a few messages between us, we went to work designing and implementing an alternate icon treatment with a special notification state to let you know when new messages are available, collaborating via Dropbox.
In short order, we completed the latest addition to the favicon alerts family of user scripts, Brizzly Favicon Alerts!
Used in combination with the Faviconize Tab extension, you can easily keeps tabs on new messages in Brizzly with less screen real estate than usual.
This feature is hard to enjoy if you aren’t a Brizzly user just yet. While invites aren’t as scarce as Google Wave, I’d be happy to provide one to the first five readers who comment on this post and sound off on how much you like (or dislike) the visual refresh.
Feb 17
Your Gmail tab just got more informative
Continuing this month’s theme of making the most out of 16 square pixels, I got to collaborate with my good friend and colleague Peter Wooley on the next version of the excellent Gmail Favicon Alerts script for Greasemonkey.
Many Gmail users will keep the application open in a tab while browsing to expedite the process of obsessively checking one’s inbox. But wouldn’t it be great if you could be privy to the arrival of new mail or chat notifications at any point in your browsing experience, regardless of your current tab?
That’s where this script comes in. I’ll let Peter explain:
- A Blue icon lets you know you have unread mail. New to version 3, the number of unread messages is indicated in the icon beyond 10!
- A Red icon means you’ve read all your mail (or, at least, clicked on them all).
- A Speech Bubble icon means someone has sent you a chat message.
The newest version of Gmail FavIcon Alerts brings both a visual and functional refresh. Many thanks to awarded-winning designer Tyler Sticka, who has redesigned the iconography from scratch. The updated icons are now visually balanced, evenly shaded and gorgeous. In addition, Tyler designed numeric indicators for displaying the number of unread items in your inbox. As we both avidly watch our inboxes, knowing how many messages are unread allows us to make a better decision on when to switch tabs. The indicator counts up to 10 unread messages and hides when more unread items exist. Much like the Chat alerts, you can choose to turn this feature off through the Greasemonkey User Script Command menu.
Used in combination with the PermaTabs and Faviconize Tab extensions, you can easily keeps tabs on your Inbox status with less screen real estate than usual.
It’s always a blast redesigning something you use every day, an experience which always yields fruitful lessons. My first instinct was to switch things up and use the more vivid red icon as “unread” and a desaturated gray when there were no new messages. I abandoned this solution for two reasons:
- Having used Gmail Favicon Alerts for years, changing the colors completely threw off my learned behavior, impairing usability.
- The gray icon was markedly uglier than other variations. After all, you do have to look at this thing all day.
In the end, changing the color scheme presents little immediate user benefit, whereas introducing an unread count bares plenty. As such, Peter and I are both extremely proud of this version.
Download and install Gmail Favicon Alerts from its Greasemonkey homepage. If you dig it, why not leave a comment or write a review?
Update (2/19): Gmail Favicon Alerts has been featured on Lifehacker! Maybe they’ll integrate it into the Better Gmail extension? (Crosses fingers)
Update (3/17): Updated the imagery and description to match the latest version. Thanks to user feedback, we’ve replaced the orange chat icon with a more appropriate chat-bubble icon a la Google Talk.
Update (4/8): Updated the description to match the latest version, which no longer caps at 10 unread items. Whee!
Feb 12
Remember the Milk Favicon Redesigned
According to userscripts.org, over a hundred Greasemonkey users have been unhappy enough with Google’s favicon to replace it with my redesign. This motivated me to turn my eye to another troubling icon, that of Remember the Milk.
Remember the Milk is my task manager of choice. While there are many worthy competitors, RTM has the right combination of rapid task generation and streamlined organization to establish a permanent spot in my browser and iPhone.
While it would be easy to mock their bovine mascot, I’ve actually grown quite fond of it. While certainly not the most polished solution in the world, it exudes a certain friendliness and lack-of-intimidation. The organic line ultimately compliments the simple, Google-esque interface.
Unfortunately, the favicon has not grown on me as nicely. It appears they took a square image of the mascot without transparency, shrunk it down to 16 pixels and called it good. While not as offensive as the Google favicon redesign, the lack of polish belies what a breeze the app is to use.
I redesigned the 16-pixel version from scratch to insure it scaled to that size gracefully, with a transparent background to respect the color of the user’s theme. More clarity in the pixels means a more accurate emotional representation of the original image.
Install RTM Favicon Redesigned 1.3
Prism or Fluid users may be interested in downloading the icon (with the larger RTM logo included up to 128 square pixels) in Windows, Mac and PNG formats.
Updated (2/17/2009): Script and icon files updated with improved anti-aliasing.
Updated (5/9/2009): I noticed that Prism adds aliasing to the app icon when you choose an ICO file. I’ve included a PNG version as an alternative, which seems to solve the problem.
Updated (5/30/2010): Added support for Google Chrome. Thanks to superrush4x for figuring that out!
Updated (7/9/2010): Fixed a bug in Google Chrome using a code snippet from Peter’s favicon alert scripts.
Jan 12
Google’s Favicon Redesigned
On Friday, Google debuted it’s second favicon redesign in the last year and I, along with many other users, am somewhat befuddled by it.
Criticizing Google’s logo is usually a cheap shot. The reason Google gets away with less-than-amazing visual design is because their user experiences are so outstanding. We don’t care that Google Docs and Gmail have less visual flourishes than Word 2007 and Windows Live Hotmail because the interface is more precisely and consistently tuned to our needs. The more obstacles you put in the user’s path, the more important it is to distract them with shiny objects; Google is great at alleviating obstacles.
A “favicon” is a 16 square-pixel image that represents a web page, typically displayed in the browser’s address bar and tabs. Google stuck with the same yawn-inducing yet unoffensive favicon up till May 2008, when it was replaced with an even more milquetoast but still unoffensive lower-case “g” on a light-gray gradient. The switch to a lower-case “g” made sense, as the shape was more distinctive and added an allusion to the concept of “infinity,” and thusly it’s close relative “googol” (the really high number from which Google’s name is derived phonetically). The lower-case “g” was used again for Google’s mobile iPhone app, perhaps most successfully due to the contrast of a white “g” on vibrant blue.
I’m talking about the new icon because it’s the first I’ve experienced that is visually distracting. The lack of counter space between the complimentary red and green hues results in a visual tension that, while initially more eye-catching than previous designs, ultimately results in an abrasive visual strain compounded for every browser tab.
I completely understand Google’s desire to incorporate their logo’s colors into the icon in order to strengthen an already recognizable and trusted identity. But in this case, I believe the icon’s uncomfortable contrast goes against their otherwise smooth-as-silk experiences.
I’ve created a replacement icon which retains the new composition, combined with the colors and dimension of their iPhone icon. While I haven’t incorporated all four of their colors into one image, the icon is more spiritually consistent with the rest of Google’s experience.
You can use it yourself by installing this simple Greasemonkey script.
What are your thoughts regarding Google’s favicon? Am I off the mark? Do you care?
Update: It looks like Brand New agrees, calling the new icon “terrible”.