Question

在Opera Neon中，有些网站有自定义＆＃34; bubble＆＃34;图标。看图像。

我想为我的网站添加这样的图标。它们与favicon或苹果图标没有任何关系，我也检查了每个网站的负责人，但我什么也找不到。

问题是：我应该如何调用图标以及我应该在哪里声明它？什么是正确的尺寸？

谢谢！

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可能有一个特定的元标记，但尚未记录。

答案很长： ＆＃34;泡泡标签＆＃34;主要用于显示与页面/文章相关的图像，而不是像fav图标这样的图标。您将在共享的图像上看到“赞”图标已位于气泡选项卡上的第二个气泡中。

例如，如果您点击The Verge上的文章，您会看到气泡标签使用文章的精选图片作为＆＃34;图标＆＃34;。

Soultion：我怀疑Opera Neon正在使用Open Graph协议来选择图像。因此，如果您的网站上有 og：图片元标记（带有工作源），Opera Neon会将其用作Bubble Tab中的图像。这就是为什么气泡标签图像可能会在网站的不同页面上有所不同。

要确认Opera Neon正在使用来自og：image元标记的图像，我在网站上运行了一些测试，我在og：image元标记中更改了src，并注意到气泡选项卡中的图像已更改。浏览器花了一段时间来抓取新信息，但过了一段时间它就改变了（我还在研究如何强制抓取新信息）。

我还注意到＆＃34; Speed Dial＆＃34;中的大部分页面。首页上没有og：image元标记。我一直在查看所有元标记和图标资源，并且没有找到任何可以匹配＆＃34;快速拨号＆＃34;中使用的那些，所以我的结论是那些图标在哪里默认情况下添加，而不是相关的网站源代码。如果您要将自己的网站添加到＆＃34;快速拨号＆＃34;您会注意到它将使用og：image元标记中的图像，或者如果缺少元标记，则使用页面的屏幕截图。

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

Answer 2

og：图片元标记似乎是Opera Neon附带的示例网站中唯一的常见因素，但不匹配气泡图标。例如，如果您手动链接到Google或纽约时报，新的气泡图标比示例气泡（bubblicons？）大得多。它还有一个较小的气泡，左上角，包含favicon，而大多数示例bubblicons没有。因此，似乎存在第二个隐藏的源，其中引用了bubblicons。

Answer 3

我在Opera Neon的编译代码中挖掘了一下，据我所知，页面图标是从Facebook图像og:image开始生成的，然后回到Twitter图像twitter:image如果Facebook失踪了。我没有找到Opera Neon引入的任何自定义元数据，但我很高兴出错。

看起来他们也对以下网站采取了一些特别的关注（这可能会回答你关于为什么某些网站有更好的页面图标的问题）：

如何制作像Opera Neon这样的泡泡图标？

3 个答案: