Posted in Web Development on September 22, 2017
In this short guide, we walk through the process of adding full icon support to your website. This includes icon and favicon support across all browsers and devices. Enable icon support for your favorite web browser, and when bookmarking/adding your site to the homescreen on your phone or tablet.
For starters, we will cover the various types of icons out there in the wild. This list is exhaustive and will support all major browsers and device types.
The favicon is a small icon that is recognized by your PC's web browser and other websites. This small icon is displayed in the title bar, bookmarks, and even when saving your site to your social profiles. This icon is the most widely used website bookmarking icon.
Of all the icons we will be creating, this one is the smallest in dimensions. The W3C organization declares the image standards for a favicon on their website:
"However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit color. The format of the image must be one of PNG (a W3C standard), GIF, or ICO."
To get our icon displaying on Apple devices using Safari for iOS, we need to create some specific images and code. These images are then recognized by devices like iPhones and iPads. These images are populated when saving a website to the Homescreen as a Web Clip, or when bookmarking a website.
Between the mobile and tablet screen sizes, and high-resolution Retina displays, there is a range of images we can create. Apple keeps an up-to-date definition of these image dimensions:
We can ignore the 'App Store' icon since we are adding these icons to our website. The remaining 4 sizes drive icon to display on the various iPhone and iPad screen resolutions
Apple defines the usage guidelines for these images. Simply put, if defined, Apple devices look for the appropriately sized icon for the device. If it is undefined, the device will default to the next largest size available.
This means at a minimum we need to define the 120 x 120px Apple Touch Icon. Though, since you have to create one icon, why not create them all?
Google's documentation outlines the very simple process to support Android devices. This icon will show in places like the browser tab, recent app switch, the new or recently visited tab page and more.
In this case, you'll only need one icon to get the job done. A 192 x 192px high res icon will handle all devices.
For Windows 10 and Microsoft's Edge browser, we can create another icon that will show on tiles that are pinned to the Windows Start screen. Per Microsoft's documentation, we can declare the largest size which is a 310 x 310px square.
To create a consistent brand identity, I suggest making all the icons the same design. Start by considering the favicon first since it is the smallest icon. If you're able to make the favicon recognizable, then any larger icons will be easy for the user to comprehend.
For Netmospherics, I've chosen to take the 'N' from the header and reverse it to black on white using the same font. The result is a highly legible favicon that looks good across all the sizes.
To create the image, whip open your favorite image editor and start with a square canvas. Starting with a 310 x 310px document gives you room to work. Once you have this created, go through the various size chart below. You'll want to downsize through each step and save each image as a 24 bit PNG using the specified names.
Here are all the Netmospherics icons as an example:
Once you've created the images, you'll need to upload them all to the root directory of your website. Once uploaded, check that you can access them via: http://yoursite.com/favicon.png and similar.
Then, add the following code to the <head> section of your website.
In WordPress, this means you'll open the header.php file for your theme and paste the data between the <head> declaration:
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="apple-touch-icon" href="/touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="167x167" href="/touch-icon-ipad-retina.png"> <link rel="apple-touch-icon" sizes="180x180" href="/touch-icon-iphone-retina.png"> <link rel="icon" sizes="192x192" href="/android-icon.png"> <meta name="msapplication-square310x310logo" content="/microsoft-icon.png">
The last step is to confirm that the icon is working across the various device types.
Here is an example of adding Netmospherics to the Homescreen of my iPhone: