Introduction
In the chapter HTML Metadata from our HTML Foundation unit, we went over the <link> element and a couple of its main uses in websites. One of them, as we discussed, was to denote the favicon of a webpage.
A favicon is basically just an icon that can be seen alongside the title of a webpage in browser tabs and even bookmark lists. In the chapter, we did explore favicons but the exploration was pretty brief.
Now in this chapter, we shall expand upon all that knowledge and learn a great deal of information regarding favicons. To be specific, we'll see what is a favicon, in depth; where did it come from; what its name means; the variation that Apple brought to the realm of favicons; the browser-compatibility issues of giving favicons; and much more.
Without a doubt, there's a lot to learn in this chapter and it's all very important for every developer to master, for the art of favicons is an important part of effectively communicating a brand's visual identity across such mere mediums as browser tabs, bookmark lists and homescreen app shortcuts.
What are favicons?
Let's start by reviewing the idea of a favicon.
Mainly a favicon shows up in browser tabs and bookmark lists.
Here's an illustration of a favicon in the browser tab:
A favicon also shows up when a webpage is added as a shortcut to the homescreen on a mobile operating system (this is possible in both Android and iOS).
Moving on, the definition above does tell us what a favicon is, but still the secrets to its nomenclature remain a mystery. That is, we don't yet know about the meaning of 'fav' in there.
Well, it's not really a mystery.
The term 'favicon' simply stands for 'favorite icon'; 'fav' is just a fancy short form of 'favorite'.
Now the purpose of having the word 'favorite' in there has everything to do with the origin of the concept in Internet Explorer. Let's learn about it...
The origin of favicons in Internet Explorer
In March 1995, Microsoft released the 4th version of Internet Explorer, and with it introduced a particularly nice feature.
A user could select a given webpage as one of his/her favorites and then later on go through all of them via the browser's favorites section. This wasn't a completely new idea, though; it existed in Netscape Navigator (a competing browser) already under the name of 'bookmarks' (which is more common these days as well).
But where Internet Explorer innovated was in providing a small icon next to every favorite (webpage) which really helped the user in identifying a given favorite quickly.
IE called this a favicon.
And that's how the world got introduced to the idea of favicons on the web.
Shortly after this, since the feature prove particularly handy, it was extended to appear in browser tabs as well. Ultimately, it found its way into the HTML standard, denoted via the <link> meta element.
Nice history, isn't this?
Today, when we talk about a favicon, we immediately refer to an icon designed to be viewed exclusively for a website, across a multitude of locations (browser tabs, bookmark lists, and so on).
An important part of developing any website these days is to effectively design a collection of favicons that can cater to a wide variety of such locations.
The ICO file type
When Internet Explorer introduced the idea of a favicon, it went with the approach of webmasters having to place a favicon.ico file at the root of their site to represent the favicon.
Even to date, this approach works wonders in all browsers, perhaps because of its ubiquity.
But you might be wondering what exactly is this .ico file type. Were you?
Well, a file with the .ico extension is called an ICO file.
The ICO file format was originally created by Microsoft for its Windows operating system to denote icons of desktop applications.
By virtue of the fact that ICO was created by Microsoft itself, it was very natural for it to be used for representing favicons for their IE browser as well.
Although initially created for Windows, the ICO file type is now supported on all major browsers. This is not to say that it's the only image file type supported for favicons on browsers; we can use PNGs, GIFs, JPGs, and even SVGs (although they're not that well supported as of this writing).
The best thing about ICO is that creating an ICO file is superbly simple.
- You can either use an online tool, such as favicon.io, throw in a PNG and get back a collection of converted .ico files,
- or use the spectacular, open-source image-editing tool, GIMP.
In the latter way, supposing you have a PNG image of an icon with you, import it into GIMP and then export it as an ICO file. The process is way simpler than it sounds. Believe it!
Favicons and the <link> element
To add a favicon to a website, we have to employ the <link> element. The fact that the <link> element is used to refer to a favicon is given by the rel attribute set to the value "icon".
Recall that the href attribute is used to specify the link to the favicon file.
Typically, if the favicon image is located at the root of the site and is an ICO file named favicon.ico, then it's possible to omit the <link> element.
This is because browsers are configured by default to look for a favicon.ico file at the root of a website if they can't find a <link> element for a favicon (of if it isn't possible to provide a link to the favicon image, such as when viewing the source code of a webpage in the browser).
In the example below, we demonstrate linking the following icon,
named favicon.png, to our webpage as a favicon:
<link rel="icon" href="favicon.png">This is the minimal code required for adding a favicon to a webpage.
Here's how the webpage above displays in the browser tab panel:
Notice our custom favicon image displaying in the browser tab.
Pretty awesome, isn't this?
In addition to rel, there are numerous other attributes that we could include in a favicon <link> element, including sizes, type, and so on.
The legacy rel value "shortcut icon"
Back in the day, the rel attribute was often set to the value "shortcut icon", where shortcut didn't really have any special semantic significance.
Surprisingly enough, shortcut doesn't have any semantic significance even to date, and is just supported for legacy reasons.
It's recommended to NOT use shortcut in the rel attribute; we should just stick to using rel="icon".
The sizes attribute
A favicon <link> element can contain a sizes attribute to hint about the size (width and height), or sizes, of the underlying icon image.
This hint can be used by the browser to determine the most optimal icon to download and use out of a given set of icon <link> elements.
sizes doesn't have to specify the actual size of the underlying icon but obviously it makes no sense in providing an incorrect size; why give the browser a fake hint.sizes can be set to either:
- The value
"any", which means the icon can be used for any size. - A custom dimension value. This has the syntax
<width>x<height>, where<width>and<height>are to be replaced with the width and height of the icon, in pixels, respectively.
In the following code, we use sizes to specify the size of the icon image we linked above:
<link rel="icon" href="favicon.png" sizes="16x16">Since the icon is originally 16 pixels wide and 16 pixels tall, we use the value 16x16 for sizes to hint to the browser that the given favicon <link> applies to a requirement of a 16 x 16 pixels icon image.
The value "any" is typically used with SVG icons since SVG images don't have a resolution and, therefore, no fixed size:
<link rel="icon" href="favicon.svg" sizes="any">Theoretically, we can have very large icons but it's clearly a waste of network resources to go this way. We should always try to keep our icon files as terse as possible.
Why is sizes called 'sizes'?
If you're curious as to why is the attribute called sizes, in the plural form, and not just 'size', that's because sizes can define multiple sizes as well.
But why would anyone want to have multiple sizes for just one single icon image?
Well, ICO files, as we discussed above, are capable of storing multiple icon images inside of them, each having a different size.
That's where we can use sizes to, for instance, tell the browser that an ICO file contains 16 x 16, 32 x 32, and 64 x 64 icon images in one combo.
Apple touch icons
One of the most painful and tiring things in the realm of frontend development is a consequence of per-browser innovations. Yes, it's healthy that different browsers come up with new and different ideas and features, but in the past, this has only led to issues.
Such differences have, for a very long time, only led to web developers having to write additional code just to cater to a different browser.
HTML is just the beginning of these incompatibilities and discrepancies; once you start learning CSS and JavaScript, they'll become more noticeable and irritating. But unfortunately, we ought to bear with them (to some extent).
In the case of favicons, Apple brought an innovation of adding webpages as shortcuts to the homescreen for a quick access.
With this feature, Apple put forward the idea of proprietary favicon approach which it called 'apple touch icon'. This icon was to be used as the icon for a webpage's shortcut in the homescreen on an iOS device.
The initial idea was that a browser would automatically look for a PNG file named apple-touch-icon.png at the root of a website, and use that file, if it exists, as the icon for the webpage's homescreen shortcut.
If it was necessary to override this default behavior or maybe not possible to provide a PNG image at the root, a developer could provide a <link> element with the rel attribute "apple-touch-icon" and its href pointing to the desired icon image.
Something as follows:
<link rel="apple-touch-icon" href="/other-icon.png">Here, the <link> attribute represents a link to an apple touch icon image, named other-icon.png, and residing at the root of the website.
The idea of an apple touch icon is used even today in all iOS-based devices.
If a webpage doesn't have an apple touch icon properly configured, or configured at all, and we make its homescreen shortcut (using the Safari browser), we'll merely get a scaled-down screenshot of the page.
Honestly speaking, this screenshot doesn't look professional (for a brand) at all!
Let's see a concrete example of what happens when we don't have an apple touch icon configured for a webpage, on iOS.
Consider the website https://example.com, purely meant for demonstrative purposes; it has no associated favicon or apple touch icon.
When we open this webpage in Safari on iOS and then add it to the homescreen as a shortcut, we see that the icon created for the shortcut is merely a screenshot of the webpage (https://example.com), as shown below:
But if we consider our own website, Codeguage, it has a configured apple touch icon, following the convention of having it as an apple-touch-icon.png file at the root of the website.
Likewise, if we take the homescreen shortcut of any webpage from our website, we'll get this very icon image shown for it (and that's just our logomark).
An illustration follows for our landing page (the same applies to all pages):
This example makes it clear that:
And for that, we should ensure that we put an icon image at the root of our websites, named apple-touch-icon.png.
As an additional measure, we could also link to the icon via a <link> element.
