Search code examples
htmlcssbrowseroperaopera-blink

Opera default page - website links with logo

The default page on Opera Blink contains links to user-favourited webpages. Some of these webpages, like facebook, twitter, etc., have a logo.

When I add my website there, it doesn't show any logo; it shows only my-site.com text.

enter image description here

I see there are some websites which, when I add them here, display their logo.

What should I do with my website to make the logo retrievable by Opera?

Solution

  • List of Favicon Sizes - Please see the update below...

    Perhaps the correctly sized Favicon is missing? The size can vary by device. Here is a great Favicon generator that will help you create the images and code. http://realfavicongenerator.net/ Its created by philippe_b, a contributor on Stack Overflow.

    You'll need several sizes for the different devices and platforms. Here's a great article explaining the details: http://www.jonathantneal.com/blog/understand-the-favicon/

    Once you create the Favicon images, the links will go in the head of your html page. Here's a good list to get you started...

    <!--_________Start Favicons____________-->
<!-- favicon for non-IE browsers -->
<link rel="icon" href="media/img-icon/favicon.png">
<!-- favicon ico for IE only, IE doesn't recognize .png. E10+ won't see conditional comments, so favicon.ico was added to the root folder. Safari and Chrome will choose ico over png, so the conditional comment will hide the ico code from Safari and Chrome. -->
<!--[if IE]><link rel="shortcut icon" href="media/img-icon/favicon.ico"><![endif]-->
<!-- favicon Windows 8 Pinned Tiles. Application name = Tile text. Otherwise, it pulls from the title tag. TileColor = bg color -->
<meta name="msapplication-TileImage" content="media/img-icon/windows-tile-144.png">
<meta name="application-name" content=“Name of Your Site”>
<!-- favicon Web Clips for Apple -->
<link rel="apple-touch-icon" sizes="72x72" href="media/img-icon/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="76x76" href="media/img-icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="media/img-icon/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="120x120" href="media/img-icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="media/img-icon/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="media/img-icon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="57x57" href="media/img-icon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="media/img-icon/touch-icon-iphone.png"> <!-- 57x57, smallest size listed last for older browsers -->
<!-- size and order are important for diffrent browser/browser functions-->
<link rel="icon" href="media/img-icon/favicon-16.png" sizes="16x16">
<link rel="icon" href="media/img-icon/favicon-48.png" sizes="48x48">
<link rel="icon" href="media/img-icon/favicon-64.png" sizes="64x64">
<link rel="icon" href="media/img-icon/favicon-128.png" sizes="128x128">
<link rel="icon" href="media/img-icon/favicon-32.png" sizes="32x32">

    Update

    Opera uses the larger icons. For the old Speed Dial, the Favicon had to be at least 114px x 114px, and anything smaller would not show. If you have a properly linked large Favicon, then it may be Opera's cache. Sometimes its difficult to see an updated Favicon because of the browsers cache. Once you add the Favicon, you may need to delete the bookmark, close the browser and re-bookmark your site to see the icon.

    Using the Favicon set above:

    1. Opera 12 displays the Favicon on the Speed Dial page. If only a small, or standard Favicon .ico is used, it displays a screenshot of the page instead.

    2. Opera 25 also displays the correct Favicon, and it looks great. On the sites that have only the .ico file or a small icon, it will display the website text link as you pictured in your example.

    So it looks like both versions use the larger Favicons.