Question

我无法控制我的网站演示文稿图标。浏览器选择显示我在标题部分中的菜单按钮。或者，当保存在书签中时，我的网站会自动由一个丑陋的黄色方块表示，里面有一个字母。请告诉我我应该编写的代码，以获得我自己选择的图片/图片，代表我在浏览器中的网站（当共享链接时，保存到书签时）。请不要写关于标签的favicon代码，这不是问题。谢谢！

Answer 1

漫反射浏览器和平台使用图像图像的衍射分辨率/宽高比和代码。

您获得股票浏览器图标而不是徽标的原因可能是由于您的图片宽高比不正确以及您定位的平台代码错误。请详细说明您定位图标的平台，我相信人们可以提供更多帮助。但无论如何我会发布下面我知道的分辨率和代码。

16x16：浏览器图标

32x32：任务栏快捷方式图标

96x96：桌面快捷方式图标（和Google / android TV）

128x128：Chrome网上商店图标

196x196：Android Chrome图标

228x228：Opera Coast图标

以下是浏览器图标，任务栏和快捷方式

的代码示例

<link rel="icon" type="image/png" href="https://yourwebsite.com/favicon-16x16.png" sizes="16x16">

Apple IOS（touch devides）

120x120：iPhone Retina（iOS 7）

180x180：iPhone 6 Plus（iOS 8 +）

152x152：iPad Retina（iOS 7）

167x167：iPad Pro（iOS 8 +）

以下是针对苹果设备的代码示例

<link rel="apple-touch-icon" sizes="180x180" href="yourLogo.png">

Windows Metro

由于平铺系统在Windows中使用的microsoft metro UI中的工作方式，您需要以下分辨率70x70,270x270,310x310和310x150

代码示例，请记住，以下代码应发布在您网站的根目录中，名称为browserconfig.xml !!!

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>

      <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
      <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
      <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Answer 2

在你的HTML中设置一个og：image，如下所示：

Application

这是大多数网站使用的开放图谱协议的一部分。

有关结构化的更多信息og：image here

如何以我想要的方式显示我的网站图标？

2 个答案: