Download 10 Free 
Since its debut in 1999 with Microsoft’s Internet Explorer, the favicon has expanded in scope thanks to its adoption by modern browsers and operating systems. Although it was initially 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 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 client’s projects so that they appear consistently across platforms. We’d like to share with you 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. 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, the 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, the 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, the 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.
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 that 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 Windows 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 sizes. The small tile is medium-sized 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 assign the text color of the title based on the color of the background. To ensure the 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
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.
Related Topics
Top