Since its debut in 1999 with Microsoft’s Internet Explorer, the favicon has expanded in scope thanks to adoption by modern browsers and operating systems. Although it was originally a tiny 16×16 pixel icon appearing in a browser’s address bar, favicons now also provide high-resolution visual assets for websites pinned to a mobile device’s home screen, a Windows 10 favorites tile, and much more.

In addition to being helpful to the user, these icons are just another level of polish designers and developers can apply to help a website stand out.

Our web design team has created an efficient toolkit to design and apply these useful icons in our clients’ projects so that they appear consistently across platforms. We’d like to share with our favicon production process, the development of our Icon Suite Photoshop template, and some of the trials and tribulations we’ve navigated so that you can create a beautiful, reliable favicon in your own web design projects.

Changes in the Favicon World

As favicons gained popularity, the number of cuts required to provide a great experience quickly grew – iOS alone has 11.

Designed by Y.Can Yurdaer

In order to streamline our process, we took a closer look at how modern mobile and desktop browsers and operating systems are using favicon assets. These platforms drove our design team to reevaluate our approach, resulting in the creation of our Icon Suite. We found that all of the icons needed for a website can be created with only five cuts. (Note that the output created for iOS, Android Chrome and Windows are doubled to ensure proper retina display).

Cuts 1 and 2: Favicon (16×16, 32×32) – This is the “classic” favicon shown in Bookmark menus and next to the current page’s address in many browsers.

Cut 3: iOS (180×180, retina display is 96×96) – Beginning with iOS 3, Apple stopped looking for a hard coded image filename and instead started using the largest image defined and scaling it down, which is why we’ve included the 180X180 and allow Apple devices to scale as needed. This narrows the assets needed for iOS in our Icon Suite down to a single image instead of 11.

Cut 4: Android Chrome (192×192, retina display is 96×96) – As with Apple, Android recently began scaling the largest image down, minimizing the previous six images down to a single one.

Cut 5: Windows 8.1/10 (270×270, retina display is 150×150) – Windows 8.1 – 10 utilize a handful of different tiles for their “metro” interface tiles, but we chose to optimize the medium square size as the highest-use scenario with acceptable performance when larger or smaller tiles were chosen.

We recently dropped support for the favicon.ico format (IE 9). We follow the common practice of supporting only the latest two major browser versions and not only is IE 9 well outside this threshold, but it holds only 5.28% of current browser shares.

In general, it is ideal to reduce the number of images whenever possible because some older browsers incorrectly grab all icons instead of the one most suited for the job. For a more comprehensive listing of favicon file types, take a look here.

Icon Suite Template Code

We’d like to share with you the implementation code we use. It allows each device to locate the correct favicon types needed on a given website. The following code is used in the <head> tag to identify all the needed components:

<meta name="apple-mobile-web-app-title" content="JTech Communications" />
<meta name="application-name" content="JTech Communications" />
<meta name="msapplication-config" content=“/assets/icons/browserconfig.xml” />
<meta name="theme-color" content="#ffffff" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon-180.png" />
<link rel="manifest" href=“/assets/icons/manifest.json” />
<link rel="icon" type="image/png" href="/assets/icons/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/assets/icons/favicon-16.png" sizes="16x16" />

The manifest.json file is a way to describe a web application which is used by Android Chrome we are using the basic information (Reference site: https://developer.mozilla.org/en-US/docs/Web/Manifest):

{
"name":"JTech Communications”,
“icons": [{
“src”:"/assets/icons/android-chrome-192.png", “sizes":"192x192", “type”:"image/png"}
],
“theme_color":"#ffffff",
"display":"standalone"}

The browserconfig.xml file is used by IE11 through Edge for the windows 8.1/10 tiles.

<?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
        <msapplication>
            <tile>
                <square150x150logo src="/assets/icons/ms-tile-270.png" />
                <TileColor>#04283d</TileColor>
            </tile>
        </msapplication>
    </browserconfig>

Our Design and Production Process

To speed up our process, we’ve created a Photoshop template. The template utilizes smart objects to create a mock up of the icons in the sizes we outlined above. This way, we only have to create an icon once for each type: Favicon, Android, iOS and Window 8.1/10. Photoshop renders all of the various image cuts necessary for the home screen, browser window, etc.

There are a couple of things to keep in mind:

For iOS applications – because Apple rounds the corners for you, it is best to use a square image for the icon. If you want to do rounding yourself, you can use the recomposed image cut to tell Apple not to initiate rounding, but we suggest not bothering with this step.

For Windows – The Windows 10 tiles text poses a few problems. Windows icons include a medium and small tile size. The small tile is the medium size halved and will not display a text title. It is important that an icon can adequately scale to the smaller tile dimension. At first, we would offset the image to make room for the title placement but found that when the favicon was reproduced on smaller tiles without a label, it appeared misaligned. To avoid this behavior and minimize work, our current practice is to center it, so it doesn’t appear offset when there is no title and sizing it small enough, so it looks balanced with its title.

Here’s how our logo appears in a Windows tile with a title.

Windows 10 and 8/8.1 automatically assigns the text color of the title based on the color of the background. To ensure best results, we specify the background color, even if the favicon is a full sized image with no transparency.

After modifying objects in our Photoshop template, our script outputs all of the specific cuts our developers need. I’ve provided the script below for your own use.

Download the jTech Photoshop Favicon Script

Conclusion

When it comes to their value, the favicon is another example of attention to detail. Not only are they a subtle way to enhance a company’s branding and improve the user experience, but they are a way to make a website visually distinct.

Although we sometimes battle browser configurations and OS upgrades, it is a small price to pay in order to perfect our customer’s projects, adding to the custom design and overall polish.

The post Modern Favicon and Icon Development Techniques and Best Practices appeared first on Speckyboy Design Magazine.

Formula Pi: Racing Software Engineers