如何为我的网站创建网站图标？
user187554
问问题
65341 次
10 回答
104
搜索 favicons，我发现我需要 10 多种文件才能在所有浏览器和设备上工作:(
我很生气并创建了自己的 favicon 生成器，它为每个文件创建了所有这些文件和正确的 HTML 标头：faviconit.com
希望你喜欢它。
于 2013-10-11T11:12:58.350 回答
43
如果您已经有一个想要转换为 favicon 的徽标图像，那么您可以使用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 结果，这是迄今为止最好的。
于 2015-04-27T20:02:52.013 回答
20
于 2009-10-10T05:35:28.087 回答
8
您创建一个 16x16 或 32x32 或 64x64 的图标文件。将其命名为 favicon.ico 并将其放在您网站公共文件夹的根目录中。
有些网站会为您将其他图形格式转换为 .ico。IE。http://tools.dynamicdrive.com/favicon/
于 2009-10-10T05:41:40.240 回答
5
FaviconGenerator.com是最好的在线网站图标工具之一。快速、现代的设计，没有绒毛。
于 2015-05-01T02:35:26.490 回答
3
如果要创建 .ico 文件，还可以使用GIMP创建网站图标。现代浏览器可以使用普通的图像文件，但最初我认为它只是 .ico 文件。它是一个类似于 Photoshop 的开源图像编辑器。创建和编辑正确大小的图像（例如 32 x 32），展平为一层（除非您希望同一文件中有多个图标），然后另存为 .ico。它会正确格式化，然后使用 Stefano<link rel="SHORTCUT ICON" HREF="/favicon.ico">在您的网页中使用它。
于 2009-10-10T06:34:30.610 回答
3
创建网站图标时，您需要考虑以下因素：
- 支持的平台十年前，你只想支持桌面浏览器，解决方案是生成经典
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。全面披露：我是本网站的作者。
于 2016-12-21T15:04:19.360 回答
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/
于 2009-10-10T05:54:55.637 回答
1
我使用 Photoshop 将我的图标设置为 16 x 16 或 32 x 32。然后我将其保存为 gif，然后使用IrfanView将 gif 转换为 ico。
于 2009-10-10T06:43:39.923 回答