The Favicon & Touch Icons

The AR5 icons tool allows you to control your website's favicon and touch icons. Access the icons tool by navigating to design > icons from the primary nav. You'll see a list of the available icons and a preview of the image that's assigned to each icon, if any. Click edit, and that same list will appear with a checkbox next to each item, and an image widget. From here, you can select an image from your library, select the icons that you wan to use the image for, and click save. AR will then resize the image to each of the sizes you chose, using the filenames that appear in the list for the new images and depositing them in your library—in /library/public/designs/default. 

The easiest and quickest way to add icons to your website is to use one source image and select all the available destination icons from the list. In general, we recommend this approach (with the exception, perhaps, of the favicon). You can read more about the differences between the icons below, but here are some guidelines:

• The image should be square.
• The image should be no smaller than the largest available icon size: 152x152 pixels.
• The image should not have too much detail or too great a variety of colors. Whole words are not recommended because they may become illegible. It's often best to use some distinguishing element from your logo rather than the logo itself—a single letter or a simple, high-contrast graphic are good choices. 

The favicon (also known as the shortcut icon) is what appears, in most browsers, in the browser tab next to the page title. Because it's just 16x16 pixels when shown in the browser, it's best to use an image with little detail and high contrast as the source for your favicon. 

Touch icons are what appear on devices with touchscreens when a user adds your website to the iOS or Android home screen as a shortcut. While it's not neccessary to include icons for all the different sizes that are available, it's reccommended because it prevents a device from having to download a larger image than it needs, which would be an unnecessary use of resources. 

Looking at the list of touch icons, you'll notice that for each size there's a version with precomposed in the filename. By default, iOS 6 and earlier applies visual effect to icons when they appear on the home screen. These effects are:

• Rounded corners
• Drop shadow
• Reflective shine

Including precomposed in the filename tells iOS to show the icon without the shadow and the shine. However, as of iOS 7, iOS no longer applies shadow or shine to icons. Nonetheless, it's reccomended that you include both the precomposed and regular versions of the touch icons, for full compatibility and full control over look and feel. 

The images that are generated by AR5 using the icons tool are stored in /library/public/designs/default. Browsers access these image files using symbolic links at the root directory of your website. Among other things, this means that only the icon that's asked for by the browser is loaded when a page is loaded, which is more efficient than loading either all the available icons or the largest available version of the icon each time. 

This also means that you can change any one of these icon files by uploading an image with the same filename to the /public/designs/default folder in your library. Using an image for your source that's the same size as your destination (and is a .png file) will have the same result in the case of touch icons—the existing image in the library, if any, will simply be overwritten by a copy of the source image. In the case of a favicon, however, the source image will always be processed (even if it is already an .ico file) through a script that creates an .ico file containing five sizes (64, 48, 32, 24, and 16 pixels) at 256 colors. For this reason, you should upload your favicon.ico file directly to the library if you want to use it as-is.