目前,使网站图标在所有支持网站图标的浏览器中显示的最佳方法是什么?

问题描述 投票:81回答:9

当前使图标图标显示在当前支持它的所有浏览器中的最佳方法是什么?

请输入:

  1. 哪些浏览器支持哪种图像格式。

  2. 各种浏览器在什么位置需要几行。

html standards favicon
9个回答
105
投票

我在这里系上腰带和大括号。

我创建了.ico.png格式的32x32图标,分别称为favicon.icofavicon.png。除非您使用的是旧版浏览器,否则图标名称并不重要。

  1. favicon.ico放在您的站点根目录以支持较旧的浏览器(可选,仅与较旧的浏览器相关。
  2. 将favicon.png放在我的图像子目录中(为了使内容保持整洁)。
  3. <head>元素内添加以下HTML。
]

请注意:

  • .ico文件的MIME类型由IANA注册为image / vnd.microsoft.icon。
  • Internet Explorer将忽略快捷方式图标关系的type属性,这是唯一支持这种关系的浏览器,不需要提供它。

Reference


10
投票

我使用.ico格式,并将以下两行放在<head>元素内:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

6
投票

为了也支持平板电脑和智能手机的触摸图标,我更喜欢HTML5Boilerplate的方法>>

有关触摸图标的更多信息,请参见this article。>>

使用浏览器支持的当前状态,您甚至不必在文档中添加网站图标的HTML标签。浏览器将自动搜索文件列表,请参见iOS的以下示例:

如果HTML中未指定图标,iOS Safari将会搜索网站的根目录,其中包含apple-touch-icon或apple-touch-icon-precomposed前缀。例如,如果适当设备的图标大小为57×57像素,iOS搜索文件名按以下顺序:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png
  5. 我的建议是在文档中不要包含收藏夹图标,但要在根网站中准备好文件列表:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)
  • html5boilerplate.com下载模板时,这些都包括在内,只需用自己的图标替换它们。

    IE6无法正确处理PNG,警告。

    Favicon必须为.ico file,才能在所有浏览器上正常工作。

    现代浏览器也支持PNG和GIF图像。

    [我发现通常,最简单的创建方法是使用免费提供的Web服务,例如favicon.cc

    还有一个站点,您可以在其中检查任何页面的图标的制作方式

    getfavicon.org

    [您可以在其中看到有关制作图标,图像类型和分辨率的教程,很好!

    大多数浏览器会自动检测到您的根目录中有favicon.*。您可以使用以下方法确保检测到它:

     <link rel="icon" type="image/png" href="/path/image.png" />
    

    我个人使用.png图片,但大多数格式都可以使用。

    这个问题的答案已经变成complicated enough,最好的方法是只使用RealFaviconGenerator之类的工具,该工具可让您上载png / jpg,然后生成网站图标和代码以覆盖所有平台:https://realfavicongenerator.net/



    4
    投票

    IE6无法正确处理PNG,警告。


    3
    投票

    Favicon必须为.ico file,才能在所有浏览器上正常工作。


    3
    投票

    还有一个站点,您可以在其中检查任何页面的图标的制作方式


    2
    投票

    大多数浏览器会自动检测到您的根目录中有favicon.*。您可以使用以下方法确保检测到它:


    0
    投票

    这个问题的答案已经变成complicated enough,最好的方法是只使用RealFaviconGenerator之类的工具,该工具可让您上载png / jpg,然后生成网站图标和代码以覆盖所有平台:https://realfavicongenerator.net/

    © www.soinside.com 2019 - 2024. All rights reserved.