Gotcha of the Day: Generating and Using Custom Firefox Profile Icons on OS X

One feature I rely on are Firefox Profiles. Much of my life is spent in a browser, and profiles allow me to isolate work, play and development from each other. I can be logged into my work gmail in one profile, personal gmail in another profile, and be constantly clearing my cookies in a third.

With a little tweaking, the script I used to kick off different profiles on Linux was coaxed into working on OS X:

#!/bin/bash

case `uname` in
  Darwin)
    PROFILE_DIR="$HOME/Library/Application Support/Firefox/Profiles"
    FIREFOX=/Applications/Firefox.app/Contents/MacOS/firefox
    ;;
  *)
    PROFILE_DIR=$HOME/.mozilla/firefox
    FIREFOX=FIREFOX
    ;;
esac

##
## Kick off firefox in a specific profile
##
profile=$1 ; shift
dir=`(cd "$PROFILE_DIR" ; ls | grep -e "[.]$profile$")`

if [ -n "$dir" ] ; then
  $FIREFOX -new-instance -profile "$PROFILE_DIR/$dir"  2> /dev/null &
else
  echo Profile not found: [$profile]
fi

This solution has worked well, except for one detail: in the OS X dock all the instances had the same Firefox icon. The result is that to jump to a specific profile meant a game of guess-the-browser, often jumping me to the wrong instance. It was time to clean up this icon ambiguity.

Both MultiFox and this blog post present OS X solutions for running multiple instances of Firefox. Ultimately however, I decided to stick with my shell script above and use this plugin: OS X Dock Icon Changer to customize the Firfox icon in use.

With the Dock Icon Changer extension in place all that was left to do was to pick new icons for each of my profiles: Surf, Personal, Dev and DevJr. I'm sure I could have found some graphics on Google Images or the like, but for my purposes it was easier to use ImageMagick to generate these icons. And so here's a script to do just that:

#!/bin/bash

profiles='
 Surf:BigCaslonM:#26532B:#5ABCB9
 Dev:Herculanum:#826251:#F4ECD6
 DevJr:Chalkduster:#114B5F:#F3E9D2
 Personal:Krungthep:#101D42:#5ABCB9
'

for p in $profiles ; do
  name=`echo $p | cut -d: -f1`
  font=`echo $p | cut -d: -f2`
  bg=`echo $p | cut -d: -f3`
  fg=`echo $p | cut -d: -f4`

  echo $name
  convert -background "$bg" -fill "$fg" -font "$font" -size 512x512 \
          -gravity Center label:"$name\nFF" icons/$name.png

done

Each icon has its own font, foreground color and background color. You can run convert -list font to see all the fonts available. Here's the icons the script generated:

And here's the new Dock:

And just like that, the days of playing guess the browser instance are behind me. Whoo!