创build一个favicon
我怎样才能为我的网站创build一个图标？
searchfavicons，我发现我需要超过10种文件工作在所有的浏览器和设备:(
我生气了，并创build了我自己的图标生成器，创build所有这些文件和正确的HTML标题为每个人： faviconit.com
希望你喜欢它。
如果您已经有了一个想要转换为favicon的logo图片，那么您可以使用http://www.favicomatic.com/进行转换。; 它创build清晰的图标，我创build它们之后不必编辑它们。 它将生成16×16和32×32的图标，并引用它们：“每个该死的大小，先生！”。 该网站还支持/保留一些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左右的谷歌结果，这是迄今为止最好的。
GIMP是一个很好的计划。 只需将图像保存为PNG，然后添加
<link rel="SHORTCUT ICON" HREF="/favicon.png">
在页面的<HEAD>部分。
您创build一个图标文件是16×16或32×32或64×64。 将其命名为favicon.ico并将其放置在您的网站公用文件夹的根目录下。
有网站将转换其他graphics格式为您的。 即。 http://tools.dynamicdrive.com/favicon/
最好的在线图标工具之一是FaviconGenerator.com 。 快速，现代的devise，没有绒毛。
如果你想创build.ico文件，你也可以使用GIMP来创build网页图标。 现代浏览器可以使用正常的图像文件，但最初我认为这只是一个.ico文件。 这是一个类似于Photoshop的开源图像编辑器。 创build和编辑合适大小的图像（比如说32 x 32），压平到一个图层（除非你想在同一个文件中有多个图标），并保存为.ico。 它将正确格式化，然后使用Stefano的<link rel="SHORTCUT ICON" HREF="/favicon.ico">在您的网页中使用它。
我使用开源的Paint.net程序和Icon插件 。
然后，您可以创build并以.ico格式保存图像，并将所有不同的大小embedded到.ico文件中。
如果您使用的是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" />
但您可以在这里find更多信息： http ： //doctype.com/
我使用Photoshop制作16 x 16或32 x 32的图标。 我把它保存为gif，然后使用IrfanView将gif转换为ico。
在创build图标时，您需要考虑以下因素：
- 支持的平台十年前，您只想支持桌面浏览器，解决scheme是生成经典的
favicon.ico图片。 如今，您想要支持iOS（和iOS Safari）和Android（以及Android Chrome）。 也许Windows 10（和边缘）和新的Mac Book Pro触摸栏（macOS Safari）。 你不能只使用一个“一刀切”的形象了。 - devise只要您支持多个平台，您就面临多个devise指南。 例如，Google在Android上使用透明图标作为自己的原生应用，而iOS图标根本不能透明。 你不能只使用“单一devise适合所有”的方法。
- 生成的图标和HTML代码为了覆盖所有的情况，两三年来，引用的是尽可能多的图标。 恐怕我自己都是这样创造出来的：/问题是，最终会出现20行或HTML，这太多了。 为了获得令人满意的技术解决scheme，您需要平衡生成的图标/ HTML和支持的平台的数量。
像往常一样，您可以手动创build所有这些资产。 除非你有非常非常具体的需求和预算，否则这绝对不是。
对于大多数人来说，正确的方法是使用一个图标生成器，让您决定所有图标的外观，并处理所有细节。 唯一一个这样做是真正的Favicon发电机 。 充分披露：我是这个网站的作者。
