Enhance Your Website with Favicons/Apple Icons
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.
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:
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="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.
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: apple, favicons, iphone, usability
