Opera默认页面 - 带徽标的网站链接

Question

Opera Blink上的默认页面包含指向用户喜爱的网页的链接.其中一些网页,如脸书,推特等,都有一个标志.

当我在那里添加我的网站时,它没有显示任何徽标; 它只显示my-site.com文本.

我看到有些网站,当我在这里添加它们时,会显示它们的徽标.

我应该如何处理我的网站以使Opera可以检索徽标？

Answer 1

Favicon尺寸列表 - 请参阅下面的更新...

也许缺少正确尺寸的Favicon？尺寸因设备而异.这是一个很棒的Favicon生成器,可以帮助您创建图像和代码.http://realfavicongenerator.net/由philippe_b创建,它是Stack Overflow的贡献者.

您需要多种尺寸的不同设备和平台.这是一篇很好的文章解释细节:http://www.jonathantneal.com/blog/understand-the-favicon/

创建Favicon图像后,链接将显示在html页面的头部.这是一个很好的列表,可以帮助您入门...

<!--_________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">

更新

Opera使用较大的图标.对于旧的速拨,Favicon必须至少为114px x 114px,而任何较小的速度都不会显示.如果你有一个正确链接的大型Favicon,那么它可能是Opera的缓存.有时由于浏览器缓存很难看到更新的Favicon.添加Favicon后,您可能需要删除书签,关闭浏览器并重新为网站添加书签以查看图标.

使用上面设置的Favicon:

1. Opera 12在快速拨号页面上显示Favicon.如果仅使用小的或标准的Favicon .ico,则会显示页面的屏幕截图.

2. Opera 25还显示正确的Favicon,看起来很棒.在仅包含.ico文件或小图标的网站上,它将显示网站文本链接,如您在示例中所示.

所以看起来两个版本都使用更大的Favicons.