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

时间:2014-10-18 05:23:42

标签: html css browser opera opera-blink

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

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:8)

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文件或小图标的网站上,它会显示网站文字链接,如您在示例中所示。

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