and like us on FB

The favicon was introduced by Microsoft in 1999 as part of Internet Explorer 5. Uploaded to the root directory of a website, the small 16×16 image (or .ico file ), would render in the favorites menu and URL address bar. Since its introduction, the number of icons each site should provide has increased based on the need to cater for multiple devices, and their use has become an essential website component that’ll determine how your website is represented in browser tabs, desktop shortcuts, and on mobile devices. They’ve become an essential part in how your brand is represented online. Bottom line: if you aren’t using a favicon, you need to educate your web guys on their wayward ways and get it done.

Google’s material design page on icons says that “product icons (similar to site icons) are the visual expression of a brand’s products, services, and tools. Simple, bold, and friendly, they communicate the core idea and intent of a [brand]. All icons should be unified through concept and execution. Product icons are an essential vehicle for communicating your brand”. Simply put, the icon is an essential means of reflecting or communicating your brand identity outside the realm of your own website, and on devices where your content might be consumed.

This article, a variation of a post published on Internoetics in 2012, is a precursor to a few articles that’ll provide very specific code that looks at favicon usage in various ways, such as rendering a large number of icon and tile links into your document head.

Favicon Examples

The screenshot of Internet Explorer and Chrome shows how important your favicon is to your browser, and how that brand re-enforcement and/or recognition might contribute towards the user experience. If you’ve ever saved a website link on an Android, Apple, or MS device you’ll also be aware that they use the appropriate icon as referenced in your page.

The Importance of a Website Favicon

favicon as rendered in IE (top) and Chrome (bottom) tabs.

While it’s not necessarily the case now, Google Plus once rendered the favicon alongside each link that was shared. Other social networks often do the same.

The Importance of a Website Favicon

A link to the social sewer... better known as Mashable.

Keep in mind that there’s always the possibility of using the favicon for evil; if we see a link with a trusted icon, there’s the possibility that we’ll be deceived into following a fraudulent URL. Seeing a familiar icon is not an assurance of safety.

You’ll notice that (on this page) an associated site icon accompanies each external link we provide; this little hack invariably increases upon conversions, and it contributes towards a far better experience. Incidentally, the code and plugin we wrote that deals with automatic link titles, URL truncation, favicon rendering, and ‘dead’ links for scheduled posts, is all part of another article we’ll be sharing soon.

The Impact of Favicons on SEO

The internal workings of the Google-Internets machine is hard to predict so it’s virtually impossible to know if the icons contribute towards a positive score. However, it could be argued that additional HTML and download times for larger icons could all impact upon your load time – adversely impacting upon your SEO.

While the bug no longer exists , there was an early browser issue that caused apple-touch-icon.png and apple-touch-icon-precomposed.png (two Apple-specific tiles) to be loaded on every page load – thus returning a 404 error if the icons didn’t exist. The author of the bug reported that the error accounted for around 3-4% of their mobile bandwidth usage. So, to avoid potential unwanted 404 logs, it was prudent (and still is) to include the icons in your HTML document and in your root directory. Since we can’t be sure of how browsers, search engines, and other devices handle the icon declarations, it’s always best to include them all.

Serving an appropriate image to those that were sucked into using Apple devices is challenging because each operating system, device, or upgrade tends to create a requirement for a new icon image; they also require rather abstract images for various tasks the device might perform. Microsoft has also increased the complexity of displaying simple icons by required an XML file be uploaded to your root.

Bottom line: the favicon ecosystem is a dog’s breakfast requiring constant modification to ensure all sizes and devices are catered for. The result on SEO is that the presence of certain icons can’t really be measured… but for the sake of brand optimization, a suite of icons remains essential. The number of icons you choose to include might be considered more important to device optimization than that of search.

Icofav.com

Out of a frustration from having to constantly make various sizes of icons, we built our own online tool that turns the arduous image-creation exercise into a 30-second task. Our first version of an icon tool was hosted on Internoetics and quickly gained unexpected traction. To make the most of the growth we migrated the feature over to a standalone service at Faviconz.net . When we built in a back-end API, we again moved it over to Icofav.com . The purpose of the Icofav website is to generate a suite of icons compatible with multiple devices (the returned icons are compatible with our upcoming article that includes relevant code).

Until today, Icofav detailed the favicon API (rendering icon images with links). We’ve since removed those details… and the feature itself will be migrated over to this site in the next month.

When we went to alter the images returned by Icofav, we quickly learned of the drawbacks associated with the constant pressure to keep up with multiple image dependencies: we had to work back through multiple websites and alter the header code for each site. It’s this frustration that had us develop a (client-only, at this stage) API that would periodically check our service and, if new icon images were added, it would automatically regenerate the header code and import necessary images to the relevant directory. This funky feature means that the icon links on our client websites would always be up-to-date.

The Importance of a Website Favicon

Icofav screenshot. In need of some TLC...

Usage of the Icofav tool is simple. One simply uploads a single image and a zipped download link for multiple images will be returned.

If you’re a client, it’s preferred to log into our system and generate your icons via the Tools -> Favicon menu. The added benefit of this method is that we store all your icon uploads. This feature may become a little redundant with the addition of favicon handling to our client WordPress plugin.

The Importance of a Website Favicon

BeliefMedia Client Management System Favicon Screenshot.

Our free tool generates a real .ico file along with the multiple .png device-specific images. An icon file is not a png or bmp file renamed to ico (although browsers will tend to forgive you for your malfeasance). The ICO file is actually made up of an ICONDIR (“Icon directory”) structure, containing an ICONDIRENTRY structure for each image in the file, followed by a contiguous block of all image bitmap data. In other words, the one file can include multiple versions of the same image. Internet Explorer 9 uses the icon in the address bar (16×16), new tab page (32×32), taskbar button (32×32), and pinned site browser UI (24×24). Our tool generates the optimal icon as recommended by Microsoft.

The Importance of a Website Favicon

An icon file is a series of images inside the file.

Because many tools will try and fetch an .ico file (or .png file) in the document root (and most browsers will scan for such), they’re two of a bunch that are required in your root whether they’re defined in that location by a link element or not.

The Importance of a Website Favicon

Sample unzipped contents for a generic icon image. To be updated.

While not complete at the time of writing, the images returned by our tool will soon be updated, and the download will include the necessary XML file (as required by Microsoft), and general meta code will be included in a text file. Additional features will be provided in a another article.

WordPress favicon Generator

From WordPress version 4.3 onwards, the platform provides the functionality to create and automatically reference the four most used .png icons – 32×32 (favicon), 192×192 (Android/Chrome), 180×180 (IOS), and 270×270 (medium sized Windows tile). It does, however, create a larger suite of commonly used icons that it doesn’t use by default. It’s the WordPress default favicon features that are the focus of our next favicon article.

The Favicon Series

  1. The Importance of a Website FaviconJuly 23, 2017
  2. Reference (Additional) Device Favicons in WordPressJuly 26, 2017
  3. Favicons with Outgoing Links in WordPress (or PHP) With Google’s Icon APIJuly 27, 2017

Shortt URL for this post: http://shor.tt/1RL6