When visitors bookmark your website  you want the bookmarks to look as professional as your website itself. This can be accomplished using both a “favicon” and a “touch icon”.

A favicon is a small logo or other image that you see in your browser next to the title of the web page. Since you are looking at the Branding Arc Blog, you can see the “ARC” image next to the title in your browser right now.

Touch icons are button images that are shown on mobile devices when your website is bookmarked to the home screen. These buttons make your website bookmark look just like the other apps in your phone.

Setting Up a Favicon

A favicon is a 16px by 16px image that will be shown in browser bookmarks and next to the title web pages. Favicon images must be loaded to your website in .ICO format. You can generate .ICO format images using favicon generators like favicon.cc. Generators like this one will allow you to upload a small image that it will convert to the right size and allow you to fine tune the image with there in-browser art tools.

When your image is finalized you can download the .ICO file then upload it to the root folder of your website. For the purpose of this example, let’s assume you name the file “favicon.ico” which is the default from our favorite generator.

With the file loaded to the root of your website all you have to do is add the following line of code to the meta section of your web pages.

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

If for some reason your favicon image is not showing after refreshing the page, try completing the “href” link to exactly where the file is located on the internet. (i.e. <link rel=”icon” href=”https://www.brandingarc.com/favicon.ico” type=”image/x-icon“>)

Now your favicon is up and running! When you bookmark your site, you’ll now see a little picture that sets you apart from other bookmarks.

Setting Up a Touch Icon

Setting up a touch icon that can be read by iPad, iPhone, iPod, Android and even Windows phones is easy too. Before you start designing your new touch icon there are a few things that you should be aware of:

  1. There are different size icons for different types of displays.
  2. Fancy effects are added automatically.
Because Apple has dramatically improved their display quality over the past decade, different devices are capable of showing different resolution touch icons. There are three different sizes of icons that can be used:
  • 114 x 114 pixels (retina display devices)
  • 57 x 57 pixels (other devices)
  • 72 x 72 pixels (iPad specific)
To make sure that your touch icon can be used by any device we suggest making one high resolution image at 114 x 114 pixels and using just that one. Older devices will re-size this image so that it can be used on older iPhones or iPods and still have the best resolution the device offers. This is the same method that Apple uses on their own website.
The other big thing to be aware of when designing your touch icon is that the mobile devices do most of the work for you! Apple touch icons automatically add many of the fancy effects that make these buttons so unique:
  • Rounded corners
  • Drop shadow
  • Reflective shine
Since these features are added automatically, making professional looking touch icons for Apple devices is really easy. Many Android devices are also able to reach the Apple touch icons on your website as well. To install your new touch icon in your website just add the following line of code into the meta section of your web pages. In general we suggest naming the file “apple-touch-icon.png” as it is becoming a standard. Load the touch icon file in .PNG or .JPG format to the root folder of your website. Apple devices will automatically check this location for an icon image even if you have not installed any HTML to locate the image, but it does not always work with Android devices. We always suggest that you add the following line of HTML to the meta section of your website to ensure your icons are found: <link rel="apple-touch-icon" href="apple-touch-icon.png">

My Touch Icon Is Not Working

If your icon is not working correctly, you should recheck your work:
  1. Is the icon in .PNG or .JPG format?
  2. Is it the correct size? (114 x 114 pixels)
  3. Is the file named correctly? (i.e. apple-touch-icon.png)
If you still can’t see your icons, try extending the links in the HTML file.
(i.e. <link rel="apple-touch-icon" href="http://www.brandingarc.com/apple-touch-icon.png">