Cleanup on Aisle 9: Favicons, Drupal, Photoshop and You

A beautiful favicon for TTG...
favicon example
iPhone screenshot showing cleanup needed
Photoshop Screen Shot 1
Photoshop Screen Shot 2
Photoshop Screen Shot 3
iPhone Screen Shot - Improved Favicon

A 'favicon' is the smallish image that appears on a browser tab/address bar that showcases your site's brand. It's very easy to add in Drupal. These images should feature a 'transparent background' and are often .PNG image file types. The first picture above shows a spiral image (made at TNT using a JavaScript app!) that was adjusted and cleaned up for the icon.

CG was horrified though, when looking at his site on his iPhone. The favicon shows up in the history as shown in the 2nd picture and there are some 'after effects' showing some incomplete image clean up that were not apparent in the browser favicon. This shows two things: the importance of having a favicon in the first place, and making sure it looks good in all environments in the second place.

When the image was opened in Photoshop (3rd image) things looked ok: the cute spiral was nicely placed in a transparent background (gray checkerboard in Photoshop) and it's clear why CG had been happy with the image originally. It wasn't until he placed the image over a tinted background that he saw the 'cleanup' that was still required. (Image 4 above). Lesson: Do cleanup of transparent images with an enabled background tint layer so you see 'mess' that needs to be tended to!

To clean up the mess, CG did NOT use the eraser tool: it is a 'destructive' process that could damage necessary artwork. Instead, he added a 'Layer Mask' (5th image) and used the adage "White Reveals, Black Conceals" to 'mask' the offending blobs.

Once the new image was uploaded to the site and the Safari web history on the phone was cleared, the cleaned up favicon certainly looked better!

We love you Photoshop and Layer Mask!