The*_*end 592 html favicon static
我有一些__CODE__只是纯HTML,我们在服务器出现故障时显示.我怎样才能把我制作的图标(它是16x16px并且它与HTML文件位于同一目录中;它被称为favicon.ico)作为"标签"图标.我已经阅读了维基百科并查看了一些教程并实现了以下内容:
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
但它仍然不想工作.我正在使用Chrome来测试这些网站.根据维基百科.ico是所有浏览器类型上运行的最佳图片格式.
更新
虽然代码检查它只能在服务器开始为站点提供服务后才能正常工作,但我无法让它在本地工作.只需尝试将其推送到服务器并刷新缓存,它应该可以正常工作.
Haz*_*Gee 859
您可以生成16x16 .png,然后<head>在静态HTML文档的标记之间使用以下代码段之一:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
Cod*_*aft 208
大多数浏览器都会favicon.ico从网站的根目录中获取,而无需被告知; 但他们并不总是立即用新的更新它.
但是,我通常会选择你的第二个例子:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
Edu*_*sso 121
实际上,要使您的favicon在所有浏览器中都能正常工作,您必须拥有10个以上正确大小和格式的图像.
我创建了一个App(faviconit.com),因此人们不必手动创建所有这些图像和正确的标签.
希望你喜欢.
Jet*_*lue 65
以下为我工作......
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Far*_*hid 36
将您的图像文件为Base64字符串像一个工具,这样,然后替换YourBase64StringHere占位符下面的代码片段与您的字符串和放线在你的HTML头部分:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100%运行.
ash*_*awg 25
.ico，.gif，.png，.svg下表显示了favicon在主要浏览器中的使用方法。标准实现在文档的部分中使用具有rel属性的link元素来指定文件格式以及文件名和位置。
请注意，大多数浏览器会优先考虑favicon.ico网站根目录中的文件（因此会忽略任何图标链接标签）。
Edge Firefox Chrome I.E. Opera Safari
---------------------------------------- ------ --------- -------- ------ ------- --------
<link rel="shortcut icon" Yes Yes Yes Yes Yes Yes
href="http://example.com/myicon.ico">
<link rel="icon" Yes Yes Yes 9 Yes Yes
type="image/vnd.microsoft.icon"
href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon" Yes Yes Yes 9 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" type="image/gif" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.gif">
<link rel="icon" type="image/png" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.png">
<link rel="icon" type="image/svg+xml" Yes Yes Yes Yes Yes Yes
href="http://example.com/image.svg">
下表说明了对的图像文件格式的支持favicon：
Animated
Browser ICO PNG GIF GIF's JPEG APNG SVG
------------------- ----- ------ ------ ------- ------ ------ ------
Edge Yes Yes Yes No ? ? ?
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4 No 4 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Safari Yes 4 4 No 4 No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
下表说明了浏览器在其中显示收藏夹图标的不同区域：
Address Address bar 'Links' Drag to
Browser Bar drop-down bar Bookmarks Tabs desktop
------------------- ------------ ----------- --------- ----------- ------ ---------
Edge No Yes Yes Yes Yes Yes
Firefox until v12 Yes Yes Yes Yes Yes
Google Chrome No No Yes Yes 1.0 No
Internet Explorer 7.0 No 5.0 5.0 7.0 5.0
Safari Yes Yes No Yes 12 No
Opera v7–12: Yes No 7.0 7.0 7.0 7.0
> v14: No
图标文件可以是16×16，32×32，48×48，或64×64的尺寸的像素，和8位，24位，或32位中的颜色深度。
尽管上面的信息通常是正确的，但在某些情况下会有一些变化/例外。
在Wikipedia 上的源中查看完整的文章。
Tan*_*ikh 15
如果favicon是png类型的图片,则它在旧版本的Chrome中无法使用.但是它在FireFox中运行得很好.此外,在处理此类操作时,请不要忘记清除浏览器缓存.很多时候,代码很好,但缓存是真正的罪魁祸首.
Rah*_*sai 14
根据W3.org的建议,您可以使用该rel属性来实现此目的.
例:
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
这对我有用
我知道它的老帖子,但仍然发布给像我这样的人.这对我有用
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
将您的favicon图标放在根目录中..
<link href='favicon.png' rel='icon' />
您甚至可以省略引号，但不建议在生产中使用。
| 归档时间： |
|
| 查看次数： |
1388838 次 |
| 最近记录： |