Nov 27
Ice Cream Social Icon Pack 1.2 (Designmoo, Google Voice, Posterous & more)
Originally created for use on this site and since incorporated into several of my projects, the Ice Cream Social Icon Pack is a set of 30 social media icons you can use in your designs.
New to this release are icons for any blog (generic), Designmoo, Google Voice, Picasa and Posterous. The Twitter icon has also been redesigned. The complete list:
BlinkList
Blog (generic)
Blogger
Buzz
Delicious
Designmoo
Digg
Facebook
Feed
Flickr
Google
Google Voice
Lala
Last.fm
LinkedIn
LiveJournal
Mail
MySpace
Newsvine
Picasa
Posterous
Reddit
StumbleUpon
Technorati
Twitter
Vimeo
Virb
Wave
WordPress
YouTube
Too good to be true! What’s the catch?
These icons are licensed under a Creative Commons Attribution-Share Alike 3.0 License. They’re free for you to use as long as you place an attribution link to tylersticka.com somewhere in proximity to them (such as a site footer or about/credits page).
How can I ever repay you?
If you wanted to be really awesome, you can tweet about the icons or send me a message. If you’re more of a gift-giving sort, you can make a PayPal donation or buy something from my Amazon wish list.
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.
Oct 11
Ice Cream Social Icon Pack Updated (Google Wave, WordPress & more)
Update: Ice Cream Social Icon Pack 1.2 is now available with even more icons.
Originally created for use on this site and since incorporated into several of my projects, the Ice Cream Social Icon Pack is a set of 25 social media icons you can use in your designs.
New to this release are icons for BlinkList, Blogger, LiveJournal, WordPress and Google Wave. The complete list:
- BlinkList
- Blogger
- Buzz
- Delicious
- Digg
- Facebook
- Feed
- Flickr
- Google
- Lala
- Last.fm
- LinkedIn
- LiveJournal
- Mail
- MySpace
- Newsvine
- Reddit
- StumbleUpon
- Technorati
Twitter- Vimeo
- Virb
- Wave
- WordPress
- YouTube
Aug 05
Introducing the Ice Cream Social Icon Pack
This week’s web site redesign came with a set of custom-tailored social networking icons for easy sharing of articles and portfolio items. Inspired by Rogie King’s excellent social media network icon pack, I wondered if I, too, should unleash these little sixteen-pixel lovelies into the web design wilderness. With encouragement from Peter Wooley, Jim Gray and Vin Thomas, I’m doing just that!
The Ice Cream Social Icon Pack is a set of twenty 16 square pixel PNGs representing your favorite social networks, including Delicious, Digg, Facebook, Flickr, Google, Lala, Last.fm, LinkedIn, MySpace, NewsVine, Reddit, Stumble Upon, Technorati, Twitter, Vimeo, Virb and YouTube. Generic icons for feeds and email are also included.
Update: Ice Cream Social Icon Pack 1.1 is now available with even more icons.
Jul 12
Icons and Comics on Strange Love Live
If you missed viewing my Strange Love Live appearance when it was actually live, you can now view it on Blip.TV, in iTunes, or right here:
I had a blast being on the show! Thanks again to Cami Kaos and Dr. Normal for being such gracious hosts. I’ll be sure to post my comics essay (as promised) in the coming weeks.
Icon designers I should have mentioned (but didn’t for some reason) include Susan Kare, the Iconfactory, John Hicks and Adam Betts.
Some of the comics I talked about (not all of which are safe for youngsters) were Amulet, Sonic the Hedgehog, Bone, Groo, Usagi Yojimbo, Cerebus, Watchmen and Dark Knight Returns. For a larger list of keen comics to check out, see my WebVisions follow-up.
If you’re hungry for more comic book, indie rock and tech geekery and don’t mind the occasional expletive, older audiences can check out the less structured Afterhours episode (with appearances by Peter Wooley).
Jun 22
Firefox’s New Spin
Given how often I write about iconography here, I would be remiss if I didn’t mention the subtle Firefox icon redesign that’s been introduced in the recent 3.5 Release Candidate. The new icon comes courtesy of Anthony Piraino of the IconFactory and is based on the previous icon by John Hicks.
I was initially a bit put off by the little bits of fur going around the globe, which to me unnecessarily break up the eye-pleasing circular shape. But then I saw the smaller variations (48 square pixels at right), and I’m really impressed with the way the newfound flecks of blue reinforce the sphere when the level of detail is reduced. I also enjoy the new sweeping strokes in the fur (reminiscent of Adam Betts’ variation) and the re-treated globe.
Overall, this is a solid icon progression that increases the dimensionality and contrast without sacrificing recognition and consistency. Thanks to WordPress contributor @Viper007Bond for pointing it out to me.
Apr 11
New TweetDeck Replacement Icons
Along with a handful of great features, TweetDeck 0.25 introduced a new icon. Though unpopular with some users, I believe the design is a step in the right direction. The minimalist treatment of the signature crow now feels connected to the application’s largely typographic, streamlined interface, and the containing shape solves my pet peeve of the icon disappearing against dark backgrounds.
That being said, the bird is still a little faceless for my tastes, lacking a certain element of personality or character. Which is why I’ve updated my previous replacement icons to incorporate the successful elements of the new design. Pick your favorite color (yellow, silver, green, pink, blue, red or classic) and off you go!
Download Now (ZIP, 831kb)
Installation
Windows
- Extract the ZIP file
- Find or create a shortcut to the TweetDeck executable
- Right-click the shortcut and select “properties”
- In the “Shortcut” tab, choose “change icon”
- Click “Browse,” and navigate to the “win” directory of the extracted ZIP contents
- Select the icon you would like to use, and click “Open,” then “OK”
- Click “OK” or “Apply”
Mac OS X
- Extract the ZIP file and navigate to the “mac” directory therein
- Pick which color you’d like to use, and rename that file to “Icon.icns” (note capitalization)
- Make sure TweetDeck is closed, and locate the TweetDeck application (usually found, appropriately enough, in your Applications directory)
- Right-click (or option-click) the application and select “Show package contents”
- Navigate to the “Resources” directory, and drag the “Icon.icns” file you created earlier into it (you may have to input an administrative password to overwrite the default icon)
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.
Use it yourself by installing a simple Greasemonkey script.
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): Script and icon files updated with improved anti-aliasing.
Updated (5/9): 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.
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”.