2

Which icon is Opera mobile using for bookmarks / speeddial?

I've generated all possible icons using this converter: http://www.favicon-generator.org/ and included them with the correct tags in my website head.

The converter generates "icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps" - well it truly does, it created a total of 25 different icon formats / sizes for my web site.

Sadly Opera mobile seems to use the most low-res version it can find among these 25 icons. It looks horrible in the speeddial / bookmarks.

But I haven't yet been able to figure out, which exact icon it is using, all help would be appreciated. Which icon does Opera mobile use?

UPDATE: By trial and error, I found Opera Mobile uses the "favicon.ico", even though there are higher resolution icons available for my website, and I've embeded them with this code:

<!--Favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="https://***/wp-content/themes/***/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://***/wp-content/themes/***/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://***/wp-content/themes/***/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://***/wp-content/themes/***/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://***/wp-content/themes/***/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://***/wp-content/themes/***/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://***/wp-content/themes/***/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://***/wp-content/themes/***/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://***/wp-content/themes/***/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="https://***/wp-content/themes/***/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://***/wp-content/themes/***/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://***/wp-content/themes/***/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://***/wp-content/themes/***/favicons/favicon-16x16.png">
<link rel="manifest" href="https://***/wp-content/themes/***/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://***/wp-content/themes/***/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> 
<!--End Favicons--> 
| improve this question | | | | |
  • Why do you care? Opera mini has very low usage numbers. I can't imagine that many of your web site users would run into this problem. – Stephen Ostermiller May 4 '16 at 10:15
  • Opera Mobile is not Opera Mini. Opera Mobile has more than 100. Million downloads in Google Play Store, so I might care. – bortran May 4 '16 at 11:20
1

Ok, another hour of trial and error, I think I finally found the answer.

The problem is caused by this code:

<link rel="apple-touch-icon" sizes="57x57" href="https://***/wp-content/themes/***/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://***/wp-content/themes/***/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://***/wp-content/themes/***/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://***/wp-content/themes/***/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://***/wp-content/themes/***/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://***/wp-content/themes/***/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://***/wp-content/themes/***/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://***/wp-content/themes/***/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://***/wp-content/themes/***/favicons/apple-icon-180x180.png">

I have to use a precomposed icon definition like this:

<link rel="apple-touch-icon-precomposed" href="https://***/wp-content/themes/***/favicons/apple-icon-152x152.png"> 

That alone won't make it work. I had to erase the first block of code, so Opera's finally using the high-res icon. That's not fully satisfying as I now have to disregard all other resolutions.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.