Beyond the Favicon

Posted May 19, 2011 by Blue Coast Web Short URL: http://bcw.im/hk4t

We're all pretty familiar with the Favicon... that little 16x16 pixel site-specifc image that shows up in your browser or tab title. They're useful when scanning a large number of open tabs to recognize sites, and are an easy way to promote your brand's experience when a user visits the site.

However, with the growing market of mobile devices and tablets, users are visiting sites in more ways than a typical desktop web browser. With that comes a new set of imagery that can add to the overall experience, and promote your brand.

Apple Touch Icon for iOS devices

One nice feature that's been built in to the iPhone, iPad, and iPod Touch since launch is the ability to add any website to your home screen. When visiting the site you want to save in Safari, simply click the "Share" button on the bottom toolbar:

You'll see an option to "Add to Home Screen". Tap it.

Finally you'll be able to name it something informative. By default it will use the page title, but it's probably worth changing. This will be the "label" that appears on your phone screen, and it will make the site look and function like an App.

Here's the tricky part... in the above screenshot, you'll see the image used to identify the site is just a cropped screen grab. This can range from boring at best, and ugly and confusing at worst. Luckily, creating a custom image for that icon is extremely easy.

All you have to do is create a PNG image that's 114px by 114px (it used to be 57x57, but remember with the Retina Display the resolution increased two-fold). Name the file apple-touch-icon.png.

There are various PSD templates out there you can find, but by default your image will automatically have the corners rounded and the glossy layer on top applied. If you don't want the gloss applied, you can name the file apple-touch-icon-precomposed.png.

Then we need to reference the file in our header so the iDevice can find it. This works just like a favicon:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

or

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

Here's what that last screen looks like with our new icon.

And finally, on our home screen. Nice!

Opera Speed Dial Icon

The Opera browser still has a fairly small market share, but Opera users are a vocal and loyal bunch. One feature that showed up in version 11.1 of the browser is the "Speed Dial" feature when you open a new window. It's essentially a grid of shortcuts to sites that you can organize. Much like the iOS home screen, in fact.

Also much like iOS, when you add a new site to the Speed Dial, it just creates a thumbnail of the site itself as the icon. But (surprise!) you can create a custom one that gets saved.

All the gritty details are available on the Opera Development site, but essentially we just follow the same steps as above. Key details are:

• Icon should be between 114px by 114px and 256px by 160px. Anything bigger will get resized down, and anything smaller will get ignored
• You can use a GIF, JPG, or PNG. No animation is supported (thankfully)
• Multiple icons are supported. The largest one will be used for the Speed Dial icon

And here's the code for referencing the file in your page head:

<link rel="icon" type="image/png" href="/logo.png">

 Let's see how it looks... here's the default screenshot view on the Speed Dial:

Not too bad, but it isn't very well branded. Here's our bookmark with our new custom icon:

With the web always evolving, you can bet there will be more types of custom elements such as these in the future. Luckily they are really easy to build, and they add some really nice touches to a site. It's these unexpected details that can set a site apart from the competition, so there's really no reason not to put in the (minimal) extra effort.

Are there any other shortcut icons you add to a site? Let us know in the comments!