Enhance Your Website with Favicons/Apple Icons

Code SnippetsMay 12th, 2010

Here’s a quick and easy way to improve the usability of your website — add Favicons and Apple Icons to your website. Favicons or favorite icons are small graphic images that you usually see in the address bar or tabs of web browsers. With the growing popularity of iPhone/iPod and the recent release of iPad, more users are now consuming web content than ever before.

Firefox Tabs

NetNewsWire RSS Reader Sidebar

Favicons and Apple Icons allow users to visually identify your website at a glance. It might be small thing but it is a very helpful detail to improve the usability of your website. If you have multiple open tabs in your web browser or browse websites using a RSS reader, having favicons allow your users to easily identify your site.

  • To create a Favicon, just create a GIF image of size 16×16 pixels, and save it as: favicon.ico
  • To create an Apple Icon, just create a PNG image with dimensions 57×57 pixels, and save it as: apple-touch-icon.png

And then, place these two images in the root directory of your website.

If you are using WordPress, you can use this code snippet to embed the icons. Edit the functions.php of your theme directory, and insert the following code:

// add Favicons/Apple Icons to your site

function favicons() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
    echo '<link rel="apple-touch-icon" href="'.get_bloginfo('wpurl').'/apple-touch-icon.png" />';
}

add_action('wp_head', 'favicons');

For the above code to work in WordPress, make sure the wp_head() action hook template tag is included in your header.php template file.

Or if your website is just pure x(html), you can just copy the code below and place it inside the head tags:

<link rel="shortcut icon" type="image/x-icon" href="http://www.yourwebsite.com/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.yourwebsite.com/apple-touch-icon.png" />

By default, Apple touch devices (iPhone, iPod, and iPad) will capture a screenshot of the of the page you are visiting. Below is a comparison of my site with and without the Apple touch icon enabled.

iPhone Touch Icons comparison

As you can see, the icons clearly enhance the usability of your site. If you have multiple home screens, locating your bookmark is much easier. Enjoy.

Tags: , , ,

Comments are closed.