我该如何为我的网站创建和使用一个网站图标？
10个回答
109
我停止了对该网站的工作，现在它已经被禁用。还有其他类似的解决方案，比如https://realfavicongenerator.net。
搜索有关网站图标的信息时，我发现我需要超过10种文件才能在所有浏览器和设备上正常工作 :(
我感到非常恼火，于是我自己创建了一个网站图标生成器，可以生成所有这些文件，并为每个文件生成正确的HTML头部信息：faviconit.com 希望你会喜欢它。
搜索有关网站图标的信息时，我发现我需要超过10种文件才能在所有浏览器和设备上正常工作 :(
我感到非常恼火，于是我自己创建了一个网站图标生成器，可以生成所有这些文件，并为每个文件生成正确的HTML头部信息：faviconit.com 希望你会喜欢它。
- Eduardo Russo
9
14优秀的应用程序。这是我见过的最好的网站之一，可以生成favicon图标。 - Chris Livdahl
1谢谢，克里斯！我很高兴能帮忙！ - Eduardo Russo
3@EduardoRusso这真是太棒了，谢谢！ - davnicwil
4干得好，符合预期。 - Dilshan
1比预期效果更好！小小的问题（？）：当使用高级选项时，路径和版本未包含在browserconfig.xml中。尽管如此，我仍然喜欢它。:D - mrjink
显示剩余4条评论
44
如果您已经有一个想要转换成favicon的标志图像，则可以使用http://www.favicomatic.com/将其转换。它会创建清晰的favicon，我在创建后没有做过任何编辑。
它将生成16x16和32x32大小的favicon，并引用他们的话说：“每个该死的尺寸，先生！”。该网站还支持保留某些png中透明度的功能。此外，他们的网站看起来很酷，易于使用。
例如，这里是一个stackoverflow标志：
以下是一些生成的favicon：
例如，这里是一个stackoverflow标志：
以下是一些生成的favicon：
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
我查看了前20个谷歌搜索结果，这是迄今为止最好的。
- Jared Menard
6
1我该如何改进这个答案以避免更多的踩？ - Jared Menard
4我不知道。您的回答让这项工作只用了五分钟。谢谢。 - andyb
1有些人只是喜欢无缘无故地踩负评。SO 需要制定相应政策反对这种行为。顺便问一下，我们真的需要很多不同尺寸的图标吗？还是16x16和32x32已经足够了，因为这个网站会生成。 - Emil
我个人不知道这里的最佳实践是什么。在我的网站上，我认为我们只使用一个。当与 manifest.json 结合使用时，这些可能对 Chrome 渐进式 Web 应用程序有所帮助。 - Jared Menard
我在http://www.favicomatic.com/发现了这个资源，它被称为“Favicon Cheat Sheet”，链接是https://github.com/audreyr/favicon-cheat-sheet。 - Jared Menard
这个网站还在运作！（我无法访问在上一个回答中提到的网站） - undefined
20
- Stefano Borini
3
7Gimp还提供将文件保存为favicon.ico的选项，这样就不用麻烦地添加链接了。 - user181548
4遗憾的是，旧版的MSIE（仍然相当受欢迎）不接受PNG格式代替“正确”的ICO格式文件。 - Már Örlygsson
要将网站固定到任务栏，Windows 需要一个图标。 - Necriis
9
您需要创建一个16x16、32x32或64x64的图标文件。将其命名为favicon.ico并放置在您网站公共文件夹的根目录下。
有一些网站可以将其他图形格式转换为.ico格式，例如：http://tools.dynamicdrive.com/favicon/
- Jim
2
4如果在网页的
<head> 区块中添加 <link rel="shortcut icon" href="link/to/fav.ico" />，则可以将网站图标文件保存在任何地方。 - Már Örlygsson1tools.dynamicdrive.com/favicon 还可以让您将多个尺寸的图标合并为一个 favico，非常方便。 - hdorio
3
创建favicon时，您需要考虑以下因素：
- 支持的平台：十年前，您只需支持桌面浏览器，解决方案是生成经典的
通常，您可以手动创建所有这些资产。除非您有非常具体的需要和预算，否则绝对不是正确的方法。
对于大多数人来说，正确的方法是使用favicon生成器，让您决定所有图标的外观并处理所有细节。唯一一个这样做的是Real Favicon Generator。完全透明：我是这个网站的作者。
- 支持的平台：十年前，您只需支持桌面浏览器，解决方案是生成经典的
favicon.ico图片。现在，您需要支持iOS（和iOS Safari）和Android（和Android Chrome）。也许还要支持Windows 10（和Edge）和新的Mac Book Pro Touch Bar（macOS Safari）。您不能再使用单一的“一刀切”图像了。
- 设计：一旦你支持多种平台，就会面临多种设计指南。例如，Google在Android上使用透明图标作为其自己本地应用程序的图标，而iOS图标则不能完全透明。您不能只使用“单一设计适用于所有”的方法。
- 生成的图标和HTML代码：两三年来，参考意见是生成尽可能多的图标以涵盖所有情况。恐怕我自己创造了这个趋势 :-/问题是最终会得到20多行HTML，这太多了。为了拥有令人满意的技术解决方案，您需要平衡所生成的图标/HTML数量和支持的平台。通常，您可以手动创建所有这些资产。除非您有非常具体的需要和预算，否则绝对不是正确的方法。
对于大多数人来说，正确的方法是使用favicon生成器，让您决定所有图标的外观并处理所有细节。唯一一个这样做的是Real Favicon Generator。完全透明：我是这个网站的作者。
- philippe_b
3
如果你想创建 .ico 文件，可以使用 GIMP 创建网站图标。现代浏览器可以使用普通图像文件，但最初的情况可能只支持 .ico 文件。它是一个类似于 Photoshop 的开源图像编辑器。创建并编辑正确尺寸的图像（如32 x 32），将其压缩为一个图层（除非你想要在同一个文件中有多个图标），然后保存为 .ico 格式。它会正确格式化，然后使用 Stefano 的
<link rel="SHORTCUT ICON" HREF="/favicon.ico"> 在你的网页中使用它。- rocketmonkeys
1
如果你正在使用asp.net，可以尝试以下方法将favicon应用到你的页面上：
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
但你可以在这里找到更多信息：http://doctype.com/
- Tarik
1
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接