如何制作像歌剧霓虹灯这样的气泡图标？

Question

在歌剧霓虹灯中，一些网站有一个自定义的“气泡”图标。请参见图像。

​

​

我想在我的网站上有这样的图标。它们与favicon或apple图标没有任何关系，我也检查了每个网站的首页，但我什么也找不到。

问题是:我应该如何调用图标，应该在哪里声明它？正确的尺码是什么？

谢谢!

Answer 1

我也一直在调查这个问题。

简短回答： Opera Neon正在使用Open Graph og:image meta tag在气泡标签中显示图像。

<meta property="og:image" content="https://www.example.com/bubble-tab-image.png">

但我也认为Opera Neon可能对此有一个特定的meta标签，但目前还没有文档。

长篇大论：“气泡标签”主要用于显示与页面/文章相关的图像，而不是像最喜欢的图标那样的图标。在你分享的图片中，你会看到最喜欢的图标已经在气泡标签的第二个气泡中。

例如，如果你点击边缘上的一篇文章，你会看到气泡标签使用文章的特色图片作为“图标”。

解决方案：我怀疑Opera Neon正在使用Open Graph协议来选择图像。因此，如果你的网站上有一个og:image meta tag (带有可用的源码)，那么Opera Neon将使用它作为气泡标签中的图像。这就是为什么气泡标签图像在网站的不同页面上可能会有所不同。

为了确认Opera Neon使用的是og:image meta标签中的图片，我在一个网站上运行了一些测试，我在网站上更改了og:image meta标签中的src，并注意到气泡标签中的图片发生了变化。浏览器抓取新信息需要一段时间，但过了一段时间后就发生了变化(我还在研究如何强制抓取新信息)。

我还注意到“快速拨号”中的大多数页面在首页上都没有og:image meta标签。我浏览了所有的meta标签和图标资源，没有发现任何可以与“快速拨号”中使用的匹配的，所以我的结论是这些图标是默认添加的，而不是在相关的网站源代码中添加的。如果你将自己的网站添加到“快速拨号”中，你会注意到它将使用og:image meta标签中的图片，或者如果缺少meta标签，则使用页面的屏幕截图。

所以我的结论是，气泡标签是为了显示与页面/文章相关的特色图像而制作的，并使用Open Graph元标签来处理这一点。但我也认为Opera Neon可能对此有一个特定的meta标签，但尚未记录，因此我们只需耐心等待:)

Answer 2

og:image meta标签似乎是包含在Opera Neon中的示例站点中唯一的公共因素，但与气泡图标不匹配。例如，如果您手动链接到Google或纽约时报，则新的气泡图标比示例气泡大得多(气泡图标？)。也有一个较小的气泡，左上角，包含图标，而大多数示例气泡图标没有。因此，似乎还有另一个隐藏的来源，其中的气泡图标被引用。

Answer 3

我深入研究了一下Opera Neon的编译代码，据我所知，页面图标是从Facebook的图片og:image开始生成的，如果Facebook的图片丢失了，就会退回到Twitter图片twitter:image。我没有找到任何由Opera Neon引入的自定义元数据，但我很高兴是错的。

它还看起来他们特别关注以下网站(这可能回答了你的问题，为什么一些网站有一个更好的页面图标)：

• https://www.facebook.com/
• https://www.youtube.com/
• http://www.opera.com/blogs/
• http://www.theverge.com/
• https://soundcloud.com/
• https://dribbble.com/
• https://medium.com/
• http://mashable.com/
• http://www.nytimes.com/
• https://society6.com/
• http://www.wsj.com/
• https://www.theguardian.com/
• http://antyweb.pl/
• http://thenextweb.com/
• http://www.faz.net/
• http://www.giga.de/
• http://www.golem.de/
• http://www.independent.co.uk/
• http://www.makeuseof.com/
• http://www.pc-magazin.de/
• http://www.pcmag.com/
• http://www.pcwelt.de/
• http://www.reuters.com/
• http://www.spidersweb.pl/
• http://www.techradar.com/
• http://www.windowscentral.com/
• http://www.zdnet.com/
• https://techcrunch.com/
• https://www.buzzfeed.com/
• https://www.ghacks.net/
• https://www.wired.com/
• https://www.behance.net/
• http://www.webdesignernews.com/
• https://loqal.io/
• https://twitter.com/
• http://www.ebay.com/
• https://www.pinterest.com/
• http://4pda.ru/
• https://republic.ru/
• https://lifehacker.ru/
• http://www.computerbild.de/
• https://www.heise.de/
• http://www.chip.de/
• http://www.pcworld.com/
• https://www.engadget.com/
• http://www.digitaltrends.com/
• http://edition.cnn.com/tech/
• https://www.cnet.com/
• http://betanews.com/
• https://www.producthunt.com/
• http://www.vox.com/