Koit's Technoblog

Opera is my main browser. Upon opening a new blank tab, it shows Speed Dial – large buttons that link to pages recently visited or deliberately added to Speed Dial. I noticed that some pages are displayed as screenshots, while others display a neat icon. My site displayed the screenshot (the lower left image labeled Before), but I wanted it to show the icon (the lower center image labeled After). Figuring out the way from Before to After was quite an effort. Here is how I got it done.

Theory and Tools

What Opera uses is basically a flavor of favicon, the tiny icon often seen in the title of tabs, next to page title text. Turns out, there is a wide variety of favicons in use: the tiny 16 by 16 px ones in address bars and bookmark lists, medium sized ones used as icons for web page shortcuts on desktops, and 180 by 180 px and larger images used by Opera Speed Dial, Windows 8 tiles etc. Altogether about 20 different image files, which would take half a day to create manually with an image editor.

Luckily, I discovered Real Favicon Generator that does it in an automated way, meaning, it does both the image files and the HTML that goes with them. To get the best results, I ran it twice and used a combination of images from the two sets.

Run 1

Source file with transparent background, no margin. The image fills the space edge-to-edge – this is important to get the best quality for tiny sizes like 16 x 16 px. My source file was 1000 x 1000 px.

Icons for web clips on iOS home screen need backgrounds and handling of them depends on the specifics of the image. In my case, the image had plain white background, so in the section “Favicon for iOS – Web Clip” I chose “Add a solid, plain background to fill the transparent regions” and set the color to #ffffff.

In the section “Favicon for Windows 8 – Tile” I left the default “Use the original favicon as is” and again set the tile color to #ffffff.

For compression, I had “High quality, low compression factor.”

For scaling algorithm, Lanczos seemed to do the best job with my image.

Run 2

Source file again with transparent background, but with a margin added. For margin size I took inspiration from the default settings of realfavicongenerator.net, which created 180 px icons that had 156 px images + 12 px margin around them (12/156 = 7.7% of base image). I took the same 1000 px base image I used in Run 1, added 77 px margin and got 1154 px resulting image.

From the second run I only took these files:

• favicon-96×96.png
• favicon-160×160.png
• favicon-192×192.png

HTML

realfavicongenerator.net gives you the necessary lines of HTML:

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.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">
<meta name="apple-mobile-web-app-title" content="My Site">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<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="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="application-name" content="My Site">


Publishing

Applying it to the site is straightforward: upload the files to the proper directory on the web server and add the HTML code into the <head> section of the index page.

Final Comments

Opera Speed Dial seems to use the files in this order:

• favicon-192×192.png
• favicon-160×160.png
• apple-touch-icon-180×180.png
• apple-touch-icon-152×152.png

However, I’m not fully sure this is the actual order – testing it is cumbersome because of image caching. Sometimes a reload can be forced by right clicking on the Speed Dial image and selecting Reload, but occasionally it still left me with a cached image.

The total cost of these bells and whistles was 168 KB of icon files plus 1561 bytes of HTML in the index.html. Considering that in a normal use scenario, the browsers only download the HTML and the 8 KB favicon.ico, the actual extra traffic is about 10 KB. The improvement in beauty is, of course, priceless :-).

Links

For a general understanding of favicons, the Wikipedia article is really good:

http://en.wikipedia.org/wiki/Favicon

This FAQ page gives all the necessary technical knowledge:

http://realfavicongenerator.net/faq

These pages also have some useful info:

http://iconhandbook.co.uk/reference/chart/favicons/

http://webmasters.stackexchange.com/questions/29616/how-do-you-add-a-opera-thumbnail-for-your-site