Mac app icon for LiveReload

LiveReload

LiveReload is a desktop application + a Safari/Chrome/Firefox extension that:

1. Applies CSS and Image changes when you save a file, without reloading a page.

2. Automatically reloads a page when any other file changes (html, server-side script, etc).

3. Optionally compiles SASS/LESS/Stylus/HAML/Jade/CoffeeScript files into css/html/js.

See http://livereload.com (the content is there, design is not finalized)

Version 1.x has been free and open-source, and had only a command-line interface: https://github.com/mockko/livereload.

Now I'm making version 2.x for the Mac (and, eventually, Windows) which includes 3 most-requested features: (1) native Mac UI, (2) easy installation, (3) compilers support (feature #3 above).

Mac application icon, to be used in:

1) Mac App Store (sizes up to 512x512)
2) icon of the LiveReload.app application bundle
3) Mac menu bar when the app is running, in several states

The app is recognized as a revolution in web designer's workflow, so I want something bold. I also want it to look crisp and polished. Can be playful and crazy, can be clean and professional or anything in between, you decide.

The menu bar icon should match the small-size app icon and is needed in several color-coded states (see the LiveReload-example-screenshots.zip for referenced examples):

* inactive: no browser connected. Icon: grayed out or something like that (see example of how a similar system icon looks: system-wifi-bluetooth-off.png)

* active: normal state, browser(s) connected (see example of how a similar system icon looks: system-wifi-bluetooth-on.png)

* highlighted: while the app popup is open; white, displayed over the blue system highlight background (see example of how a similar system icon looks: system-wifi-highlighted.png, system-bluetooth-highlighted.png)

* change detected: displayed for about 0.25sec after each change; green right now, should be something colorful and noticeable because it's only visible for a short time

* drop target: while dragging a folder into the app's icon; blue right now, but I would like some glowing effect instead (see example: twitter-glowing.png)

Old menubar icons attached in LiveReload-old-icons.zip. Note that the height is fixed, but the width is flexible, +/- couple of pixels is no problem.

Please pay attention that we're creating an utility here, not a document app, and what Apple Icon Guidelines say about those: http://developer.apple.com/library/…Icons.html

SOME ICONS I LOVE:

* Reeder: http://itunes.apple.com/en/app/reed…5554?mt=12 (simply good icon)
* Wikibot: http://itunes.apple.com/en/app/wiki…8583?mt=12
* Divvy: http://itunes.apple.com/en/app/divv…7545?mt=12 (this is very close to our case; note how an element of the big icon becomes the small icon in menubar, on the screenshot)
* Code Runner: http://itunes.apple.com/en/app/code…5799?mt=12
* FaceTime, utility app from Apple: http://itunes.apple.com/en/app/face…7850?mt=12
* a few more random utilities: http://itunes.apple.com/en/app/snip…5721?mt=12, http://itunes.apple.com/en/app/patt…9079?mt=12
* Coda: http://itunes.apple.com/en/app/coda…1464?mt=12 (very brave and bold, and I do love it, but I wouldn't want my icon to look as abstract as that)

ICONS I LIKE, BUT NOT AS MUCH:
* http://itunes.apple.com/en/app/grap…4640?mt=12 (good icon and to the point, but too obvious and boring)
* http://itunes.apple.com/en/app/view…2759?mt=12 (nice icon, but too crowded, could use more simplification)
ICONS I DON"T LIKE - LOOK AMATEUR:
* http://itunes.apple.com/en/app/ootp…6626?mt=12
* http://itunes.apple.com/en/app/cook…6874?mt=12
* http://itunes.apple.com/en/app/swac…0209?mt=12
* http://itunes.apple.com/en/app/tank…4920?mt=12

The target audience is web site designers and developers.

Possible keywords to guide your thinking: refresh/reload, monitor (the changes on the file system), notify, automate, helper, utility. I encourage you to try less-obvious associations.