Favicon and App Icon Template

tl;dr

Let’s be honest, managing favicons and web app icons is complex and a bit of a pain. Various browsers display the favicon in different contexts and at different sizes. Windows, Android and iOS all implement “home screen” app icons at different sizes and use different markup. And if you want to dive deeper, you can also add more sophisticated functionality such as live feeds or task shortcuts. Make it easier for yourself with a Photoshop template that generates all the image sizes you need plus prepared HTML, XML and JSON files. Jump to the bottom of the article to grab your bundle of goodies. Also available on GitHub.
Files in the package include:

  • Favicon and App Icons Template.psd – Template for generating all required image sizes
  • index.html – HTML markup to add to the <head> of your website
  • browserconfig.xml – XML file to support home screen tiles on Windows 8
  • manifest.json – JSON file to support home screen icons on Android
favicon-app-icon-template-full

What is a favicon/app icon?

A favicon is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.

Wikipedia

Favicons are the small icons you see in the tabs of your browser, or in the URL bar. They add to a site’s branding, and are pretty useful for tab junkies like me.

tabs

Web app icons are used when you add a website to your phone or tablet’s home screen, or to the desktop or Start bar in Windows.

taskbar

This article shows you the basic markup you’ll need to have a customised title and icon image that’s the right size for the majority of devices that support these features on Windows, Android and iOS. It also shows you how to add a configuration file to your site for adding the more sophisticated features available to Android and Windows users, although if you are planning on going further you will probably want to check out the documentation links at the bottom of the article.

What image sizes do I need? What about HTML markup?

I’ve used the excellent HTML5 Boilerplate Favicon PSD-Template by Daniel Heitz in all my web projects for some time now. Recently I realised with the release of iOS 8 it was probably time to review this part of my workflow and add in extra icon sizes as necessary. Unfortunately it looks like this template hasn’t been updated since May 2012, so it was time to go searching for a new solution.

I came across this very comprehensive blog post by David Ensinger from February 2014 in which he outlines his preferred icon stack markup, which includes favicons, iOS, Android and Windows 8 tiles. Viget has another great resource, including Apple start up screens as well as favicons and Windows tiles, but nothing for Android. Unfortunately, their template set is composed of individual files, instead of Heitz’s efficient approach of ‘create once, save to multiple sizes’.

Doing this research opened up a can of worms. Not only do the different platforms all support a huge range of image sizes, there’s also a lot of sophisticated features that you can configure in your web app markup to give a more “native” experience to your users. For example, adding a web site to the home screen on Android means that it will open in a full screen browser, without the normal browser navigation. You can also specify a default device orientation and access the app from the OS task switcher. On Windows 8, you can integrate a live feed to your site’s tile, while on Windows 7 you can add shortcuts to commonly visited pages or tasks to the context menu on the task bar icon for your app/site. Apple also allows full screen browsing and a splash image on launch.

Here’s a quick summary of the icon sizes required.

Apple

iOS demands a LOT of sizes. As the form factor of their devices has shifted, so too have the associated icon sizes, with a range from 180×180px to 57×57px. From iOS 4.2 and up, you can use the “sizes” attribute to let the browser know the size of the image with markup like so:

For all iOS versions that support the sizes attribute, you can basically call your file whatever you like. On the other hand, if you’re feeling lazy, the fallback image that will be used if no other is found, or if your user is on an old iOS version, is “apple-touch-icon.png”:

Then there’s the consideration of “precomposed”. For iOS 6 and below, your icon will automatically get a nice glossy sheen added to it so that it matches the look of native icons. This doesn’t apply at all to iOS 7 and up. If you don’t want the fancy effects added, let Apple know by adding the -precomposed suffix to your filename:

Putting it all together, you basically want a stack of all sizes that falls back to the smallest size for older devices:

If you want the glossy effects added then simply take out the -precomposed suffix. If you use the attached template, all file names are autogenerated for you so you should be fine!

As well as adding app icons to the home screen, you can also specify a startup/launch image. This is a full screen image that is shown when your app/website is launched while the site is downloading. It will make your site feel more “native” and seem like it’s loading faster. If you plan on encouraging your site visitors to install your site to the home screen, it’s probably worth including. Again there are a range of sizes to support. Note the startup image always has a portrait orientation.

I haven’t included the splash image in the PSD template. If you’d like a template/generator for startup images, let me know in the comments and I’ll put one together.

Bonus info:

To have your website launch full screen without the browser chrome, add this to your <head>:

And to set the title of your launcher icon:

Windows

Windows 7 with Internet Explorer 9 and 10 supports favicons of various sizes. It also allows users to “pin” a site by dragging a tab onto the taskbar. You’ll need to supply .ico files up to 64×64px in size to provide users with nice images for all these uses. You can also specify various additional metadata such as the URL to launch (the default is the site root) or shortcuts to commonly used parts of your application.

Windows 8 with IE11 allows you to add website shortcuts to the desktop as tiles. These tiles can be static images, or they can be “live” tiles that incorporate RSS updates from your site. You need to reference the tile images either in your head <meta> or by placing all the image links and metadata in an xml config file. Again, I’ve included a sample browserconfig.xml in the package.

Android

Since Chrome M31, released in November 2013, it’s been possible to set up your web app to have an application shortcut icon added to an Android device’s homescreen, and have the app launch in full-screen “app mode”, using the following markup added to the <head>:

With the arrival of Chrome M39, you can replace the clutter in the <head> with a link to a manifest.json file, which specifies the title, orientation and display (full screen or with browser chrome) of your web app, as well as pointing to variously sized image icon files. Android recommends a 192×192px image be included for optimal presentation, although other sizes can be included too to support different pixel density displays. I’ve included an example manifest.json and a few default image sizes in the template package.

Online generators

One resource that’s useful is this online app icon and favicon generator. This covers a range of Apple compatible sizes as well as Windows 8 tiles. It generates the images files and HTML code. The only drawback is that the favicon itself has only one layer at 16px. You can select a scaling algorithm for when the icon is displayed at larger sizes, but you can’t embed multiple image files into a single .ico file.

Microsoft have their own online generator for building Windows 8 tiles. If you want to have a live tile that pulls in updates from an RSS feed, this is a great way to generate the files and images you need to achieve this. There’s more details about this here.

For generating ICO files with multiple images, try http://icofx.ro/, http://convertico.org/ or http://www.kodlian.com/apps/icon-slate. IE9 requires 16×16, 24×24, 32×32 and 64×64 for optimal display. Microsoft also recommends this online icon builder.

Further Reading

The Apple documentation is available here and here. Android docs are here and Windows here.

Download

Download the template package here.

How to generate your favicon and app icons

  • Design a square icon image at minimum 310×310px resolution.

    large

  • Open up the Photoshop template and double click on the smart layer to edit it.

    smart-object

  • Paste your image into the smart layer. Save and close the smart layer. You should now see your icon design repeated throughout the template.

    smart-layer-edit

    replaced-logo

  • Select File>Save for Web, then click save in the dialogue box that opens. Select a location to save the files to. Make sure “save all user defined slices” is selected.

  • You should now have 24 exported PNG files at the correct sizes in the folder you selected.

    all iamges

  • Choose your icon generator of choice and compile your favicon.ico from the relevant sizes (16×16, 24×24, 32×32 and 64×64 – the files are called favicon-1.png, favicon-2.png etc). I’ve found convertico.org to be a quick and easy online solution.
  • Optional: for a more “native-like” experience, add in extra code to support full screen browsing, live feeds, or splash images.
  • Add the contents of index.html into the <head> of your project.
  • Add manifest.json and browserconfig.xml to your project root, or a subfolder.
  • Add the image and ICO files to your project root, or into a subfolder.
  • If you have added the image, JSON or XML files to subfolders, update the HTML and the JSON and XML files to point to the correct file locations.
  • You’re done!

I hope you find this template useful, let me know if you have any questions about how to use it. If you’re a WordPress developer, you’ll find the boilerplate code and files have been added to my barebones development theme based on Theme Hybrid and Bootstrap over at GitHub.

Leave a Reply