我一直在做一个网站,我想在浏览器选项卡上添加一个小图标。

我怎么能在HTML中做到这一点,在代码的哪里,我需要把它(例如头)?我有一个。png徽标文件,我想转换为一个图标。

相关:HTML设置图像浏览器选项卡。


当前回答

我没有用过其他的,但https://realfavicongenerator.net/似乎是首选,这里还没有提到它。

它支持svg作为生成favicons的源图像,并提供了用于覆盖不同平台的图像的有用选项。此外,默认情况下,它不会生成大量的图像来向后兼容每个过时的平台。相反,它提供了一些选项来检查是否需要它们。

从开发者发给我的邮件来看,他们还计划增加对生成SVG favicons的支持,以及SVG主题敏感性,我认为这是一个非常棒的功能。

其他回答

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

请允许我为那些仍然困惑的人解释清楚。.ico文件往往比.png文件提供更多的透明度,这就是为什么我建议在这里转换你的图像如上所述: http://www.favicomatic.com/done 另外,在href中只是图像的位置,它可以是任何服务器的位置,记住在前面添加http://,否则它将不起作用。

请使用下面的代码在标题部分你的索引文件。

<link rel="icon" href="yourfevicon.ico" />

通过在Apache的.htaccess文件[或Nginx的等效文件]中重命名/翻译每个HTTP请求,你可以让~所有浏览器发现一个favicon.png文件,如下所示:

# Universal favicon
RewriteRule ^(?:fav|apple-touch-)icon.*\.(?:ico|png)$ favicon.png [L]

然后,你唯一需要做的就是将这一行添加到HTML代码的头部部分:

<link rel="icon" href="favicon.png">

关于图像尺寸,我会使用我的webapp所期望的最高尺寸(例如Android的192px),让剩余的尺寸由用户代理自动向下采样(这在现代视网膜设备中不应该是问题)。

上面有很多复杂的解决方案。给我吗?在将图像大小更改为32 x 32像素后,我使用GIMP保存了原始PNG文件的副本。

只是要确保将其保存为*.ico文件并使用

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

上面列出的

HTML标准的链接rel=icon

为了完整起见,这个标准是这样写的:https://html.spec.whatwg.org/multipage/links.html#rel-icon

The icon keyword may be used with link elements. This keyword creates an external resource link. The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface. [...] The following snippet shows the top part of an application with several icons. <!DOCTYPE HTML> <html lang="en"> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ... For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, the rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and no other ASCII whitespace).