【发布时间】：2010-12-05 13:14:33
【问题描述】：
如何为我的网站创建网站图标？
【问题讨论】：
-
@Gothdo 这不是重复的！你指向的那个是！这个比那个早一年半！
-
我投票结束这个问题，因为这不是关于编程而是网页设计。
-
@DovMiller 具有更好答案的更好问题是应该保持开放的问题。
【发布时间】：2010-12-05 13:14:33
【问题描述】：
【讨论】：
-
Gimp 还提供了将其保存为 favicon.ico 的选项，这样可以省去添加链接的麻烦。
-
遗憾的是旧的 MSIE（仍然很流行）不接受 PNG 代替“正确”的 ICO 格式文件。
-
要将网站固定到任务栏，Windows 也需要 ico。
您创建一个 16x16 或 32x32 或 64x64 的图标文件。将其命名为 favicon.ico 并将其放在您网站公共文件夹的根目录中。
有些网站会为您将其他图形格式转换为 .ico。 IE。 http://tools.dynamicdrive.com/favicon/
【讨论】：
-
另外：如果您将
<link rel="shortcut icon" href="link/to/fav.ico" />添加到页面的<head>块中，您可以将您的网站图标文件保存在任何位置。 -
tools.dynamicdrive.com/favicon 还允许您在一个 favico 中合并多个尺寸，这很棒
如果您使用的是 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/
【讨论】：
-
请注意，doctype.com 已于 2013 年 2 月 15 日关闭。Read more about it。
如果您想创建 .ico 文件，也可以使用 GIMP 创建网站图标。现代浏览器可以使用普通的图像文件，但最初我认为它只是 .ico 文件。它是一个类似于 Photoshop 的开源图像编辑器。创建和编辑正确大小的图像（例如 32 x 32），展平为一层（除非您希望同一文件中有多个图标），然后另存为 .ico。它会正确格式化，然后使用 Stefano 的<link rel="SHORTCUT ICON" HREF="/favicon.ico"> 在您的网页中使用它。
【讨论】：
我使用 Photoshop 将我的网站图标设置为 16 x 16 或 32 x 32。然后我将它保存为 gif，然后使用IrfanView 将 gif 转换为 ico。
【讨论】：
我使用开源的Paint.net 程序和Icon plugin。
然后，您可以创建并保存 .ico 格式的图像，并将所有不同尺寸嵌入到 .ico 文件中。
【讨论】：
-
嗯，paint.net.amihotornot.com.au 作为 Icon 插件的主机？这合法吗？
-
@RonaldB 是的，它就是那个插件的所在地。是不是很奇怪的域名
搜索网站图标时，我发现我需要 10 多种文件才能在所有浏览器和设备上工作:(
我很生气并创建了自己的网站图标生成器，它会为每个文件创建所有这些文件和正确的 HTML 标头：faviconit.com
希望你喜欢它。
【讨论】：
-
优秀的应用程序。这是我见过的最好的网站图标生成器网站之一。
-
谢谢，克里斯！我很乐意提供帮助！
-
@EduardoRusso 这简直太棒了 - 谢谢！
-
干得好。按预期工作。
-
效果比预期好！小错误（？）：使用高级时，路径和版本不包含在 browserconfig.xml 中。不过还是很喜欢。 :D
如果您已经有想要转换为网站图标的徽标图像，则可以使用http://www.favicomatic.com/ 将其转换。 它创建清晰的图标，创建它们后我不必编辑它们。 它将生成 16x16 和 32x32 的图标并引用它们：“每个该死的尺寸，先生！”。该网站还支持/保留某些 png 中存在的透明度。 此外，他们的网站看起来很酷且易于使用。
例如，这是一个 stackoverflow 徽标：
以下是一些生成的网站图标：
它们还生成所需的 html：
<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 个左右的 google 结果，这是迄今为止最好的。
【讨论】：
-
我怎样才能改进这个答案以避免进一步的否决？
-
我不知道。你的回答让我完成了五分钟的工作。谢谢。
-
有些人就是喜欢无缘无故地投反对票。所以需要有反对它的政策。顺便说一句，我们真的需要很多不同的尺寸吗，或者我们 16x16 和 32x32 就足够网站生成了
-
我个人不知道这里的最佳做法是什么。在我的网站上，我想我们只使用一个。当与 manifest.json 结合使用时，这些可能对 chrome 渐进式 Web 应用程序有所帮助。
-
我在favicomatic.com 找到了这个资源，它被称为“Favicon Cheat Sheet”github.com/audreyr/favicon-cheat-sheet
最好的在线网站图标工具之一是FaviconGenerator.com。快速、现代的设计，没有绒毛。
【讨论】：
-
FaviconGenerator.com 还提供从 node/grunt/gulp 访问他们的 API。
在创建网站图标时，您需要考虑以下因素：
-
支持的平台 十年前，您只想支持桌面浏览器，解决方案是生成经典的
favicon.ico图片。如今，您希望支持 iOS（和 iOS Safari）和 Android（和 Android Chrome）。也许还有 Windows 10（和 Edge）和新的 Mac Book Pro Touch Bar（macOS Safari）。您不能再只使用一个“一刀切”的图片了。 - 设计 一旦您支持多个平台，您就会面临多个设计准则。例如，谷歌在 Android 上为自己的原生应用程序使用透明图标，而 iOS 图标根本不能透明。您不能只使用“单一设计适合所有人”的方法。
- 生成的图标和 HTML 代码 两三年来，参考一直是生成尽可能多的图标以涵盖所有情况。恐怕我自己创造了这个趋势：-/问题是你最终得到了 20 多行或 HTML，这太多了。为了获得令人满意的技术解决方案，您需要平衡生成的图标/HTML 的数量和支持的平台。
像往常一样，您可以手动创建所有这些资产。除非您有非常非常具体的需求和预算，否则这绝对不是您要走的路。
对于大多数人来说，正确的方法是使用网站图标生成器，让您决定所有图标的外观并处理所有细节。唯一这样做的是Real Favicon Generator。全面披露：我是本网站的作者。
【讨论】：