Adding a Favicon & Touch Icon
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://brandingarcinc.wpengine.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:
- There are different size icons for different types of displays.
- Fancy effects are added automatically.
- 114 x 114 pixels (retina display devices)
- 57 x 57 pixels (other devices)
- 72 x 72 pixels (iPad specific)
- Rounded corners
- Drop shadow
- Reflective shine
<link rel="apple-touch-icon" href="apple-touch-icon.png">My Touch Icon Is Not Working
- Is the icon in .PNG or .JPG format?
- Is it the correct size? (114 x 114 pixels)
- Is the file named correctly? (i.e. apple-touch-icon.png)
<link rel="apple-touch-icon" href="http://www.brandingarc.com/apple-touch-icon.png">) 
