Question

如何为我的网站创建图标？

Answer 1

搜索关于favicons，我发现我需要10种以上的文件才能在所有浏览器和设备中使用：（

我很生气并创建了我自己的favicon生成器，它为每个文件创建了所有这些文件和正确的HTML标题：faviconit.com

希望你喜欢它。

Answer 2

如果您已经有想要转换为图标的徽标图像，则可以使用http://www.favicomatic.com/进行转换。它创建了清晰的favicons，我不必在创建它们之后编辑它们。它将生成16x16和32x32的favicons并引用它们：＆＃34;每个该死的大小，先生！＆＃34;。该网站还支持/保留某些png中存在的透明度。此外，他们的网站看起来很酷，易于使用。

例如，这是一个stackoverflow徽标： enter image description here

以下是一些生成的favicon：

enter image description here

他们还会生成所需的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="&nbsp;"/>
<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个左右的谷歌搜索结果，这是迄今为止最好的。

Answer 3

GIMP是一个很好的计划。只需将图像保存为PNG，然后添加

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

在您网页的<HEAD>部分。

Answer 4

您创建的图标文件为16x16或32x32或64x64。将其命名为favicon.ico并将其放在网站公用文件夹的根目录中。

有些网站会将其他图片格式转换为.ico。即。 http://tools.dynamicdrive.com/favicon/

Answer 5

最好的在线favicon工具之一是FaviconGenerator.com。快速，现代的设计，没有绒毛。

Answer 6

如果要创建.ico文件，还可以使用GIMP创建favicon。现代浏览器可以使用普通的图像文件，但最初我认为它只是.ico文件。它是一个类似于Photoshop的开源图像编辑器。创建和编辑正确大小的图像（例如32 x 32），展平为一个图层（除非您希望在同一文件中有多个图标），并另存为.ico。它会正确格式化，然后使用Stefano的<link rel="SHORTCUT ICON" HREF="/favicon.ico">在您的网页中使用它。

Answer 7

我使用开源Paint.net程序和Icon plugin。

然后，您可以创建并保存.ico格式的图像，并将所有不同的尺寸嵌入到.ico文件中。

Answer 8

如果您使用的是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/

Answer 9

我使用Photoshop制作16 x 16或32 x 32的图片。我将它保存为gif然后我使用IrfanView将gif转换为ico。

Answer 10

创建图标时，您需要考虑以下因素：

支持的平台十年前，您只想支持桌面浏览器，解决方案是生成经典的favicon.ico图片。如今，您希望支持iOS（和iOS Safari）和Android（以及Android Chrome）。也许是Windows 10（和Edge）以及新的Mac Book Pro Touch Bar（macOS Safari）。你不能只使用一个＆＃34;一个尺寸适合所有＆＃34;图像了。
设计只要您支持多个平台，您就会面临多个设计指南。例如，Google在Android上使用透明图标作为其自己的原生应用，而iOS图标则根本不透明。你不能只使用＆＃34;单一的设计适合所有＆＃34;方法
生成的图标和HTML代码两年或三年，引用的目的是生成尽可能多的图标，以涵盖所有情况。我恐怕我自己创造了这个趋势： - /问题是你最终得到了20行或HTML，这太过分了。为了获得令人满意的技术解决方案，您需要平衡生成的图标/ HTML和支持的平台的数量。

像往常一样，您可以手动创建所有这些资产。除非你有非常非常具体的需求和预算，否则这绝对不可能。

对大多数人来说，正确的方法是使用一个favicon生成器，让您决定所有图标的外观并处理所有细节。唯一能做到这一点的是Real Favicon Generator。完全披露：我是本网站的作者。

创建一个favicon

10 个答案: