How do you add a Opera thumbnail for your site?

Question

I noticed that in the "Speed Dial" feature of Opera, some sites will display their logo as preview image, while other sites just a screenshot of how the site looks when you add it to speed dial. I don't know for sure but I think Chrome has the same behavior.

Stackoverflow for example has the logo :D

So how do I make my site display the logo when users add it inside speed dial?

Answer 1

After the release of Barracuda Opera uses the <link rel=”icon”> or <link rel="apple-touch-icon"> meta in the site's header to find the logo, but it will only show in Opera if the attached image is wider than 114px.

In stackoverflow's case the code looks like this:-

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

Which links to a 158 x 158px icon image

Answer 2

You can also use (dynamic) HTML to show the latest article headlines, images or comments. See Make your site shine in Speed Dial for details.

I have written a small WordPress plugin for this job with lots of inline comments and practical hints. It may help to understand how things work by example.