Checking Favicons Off Your To-Do List
by Brian Pohl
Wait, favicons aren’t on your To-Do list? Well I’m glad you’re here because they should be. As responsive design plays an ever-increasing role in the viewing of your website across a constantly changing multitude of devices, favicons can help you achieve consistent branding across all of these different devices. A favicon is defined as follows:
an icon associated with a URL that is variously displayed, as in a browser’s address bar or next to the site name in a bookmark list.
Most of our encounters with these icons used to come through our web browser, next to either the meta title or URL for your site, depending on the browser (shown below):
However, in 2016, that little icon is now taking many forms, including, but not limited to: an iOS App Icon, an Android App Icon, a Windows 8 Tile Graphic or a Linux Application Link. Because your site is accessed on such a wide range of devices through an even wider variety of browsers and applications, its important to provide these devices with instructions on how to render your site’s branding when its bookmarked, pinned, tiled, etc.. (an iOS icon is shown below):
Settings your favicons is typically done through link and meta tags in the <head>…</head> section of your site’s HTML code. This can be done by anyone familiar with HTML and is very straight-forward. If your site utilizes a CMS (Content Management System) like WordPress, these tags can often be pasted in one template and permeate through the whole site.
Don’t want to write all these tags/code lines yourself? Good, neither did we. There are tons of favicon generator sites on the web you can find by just googling: favicon generator. At Invex, we like to use: RealFaviconGenerator.net but this is just one example, again, there are tons of sites that will do the job. Using a generator, you can have the code all ready to give your developer so he can place it in the right template for your site.
Whether you wrote the code or generated it, it should look something like this:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
You don’t need to know what this means or how it works, the important take away here is this is very straight-forward work for a developer to do. It doesn’t take a lot of time, and therefore if you can’t do it in-house, it still shouldn’t cost you a lot of money. Its easy to do and allows you to maintain consistent branding across many different platforms and devices.
As always, feel free to leave a comment below with any questions. Thanks!
UPDATE (2/12/2016): Check out our article on Converting Your Website Into an App which deals directly with favicons.