创建收藏夹图标[关闭]

95

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

html favicon

— Ry-
source

1

如何为网站添加浏览器选项卡图标（favicon）的

— 米哈尔Perłakowski

@Gothdo这不是重复的！您指向的是IS！在此之前一年半！

— Dov Miller

5

我投票结束这个题为离题，因为这与编程无关，而与网页设计有关。

— Kyll

@DovMiller具有更好答案的更好问题是应该保持开放状态的问题。

— mbomb007

100

搜索网站图标时，我发现需要10种以上的文件才能在所有浏览器和设备上工作：(

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

希望你喜欢它。

— 爱德华多·鲁索（Eduardo Russo）
source

14

优秀的应用程序。这是我见过的最好的网站图标生成器网站之一。

— 克里斯·里夫达尔2014年

1

谢谢，克里斯！我很高兴为您提供帮助！

— 爱德华多·鲁索

3

@EduardoRusso这真是太棒了-谢谢！

— davnicwil

4

做得好。可以正常工作。

— Dilshan

1

效果比预期的好！微小错误（？）：使用高级时，路径和版本未包含在browserconfig.xml中。不过还是喜欢它。：D

— mrjink 2015年

42

如果您已经有要转换为收藏夹图标的徽标图像，则可以使用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="&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" />

我查看了Google的前20个搜索结果，这是迄今为止最好的。

— 贾里德·梅纳德（Jared Menard）
source

1

我如何改善这个答案以避免进一步的投票？

— 贾里德·梅纳德

3

我不知道。您的回答对我来说是五分钟的工作。谢谢。

— andyb

1

有些人无缘无故地喜欢投票。因此，需要针对它制定政策。顺便说一句，我们是否真的需要许多不同的尺寸，还是16x16和32x32足以满足网站生成的需求？

— batmaci

我个人不知道最佳实践是什么。在我的网站上，我认为我们只使用一个。当与manifest.json结合使用时，这些方法对于chrome渐进式Web应用程序可能会有所帮助。

— 贾里德·梅纳德

我在favicomatic.com上找到了此资源，它被称为“ Favicon 备忘

— Jared Menard

20

GIMP是一个很好的程序。只需将图片另存为PNG，然后添加

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

在<HEAD>页面部分。

— 斯蒂法诺·波里尼（Stefano Borini）
source

7

Gimp还提供了将其另存为favicon.ico的选项，这样可以省去添加链接的麻烦。

4

可惜的是，旧的MSIE（仍然很流行）不会接受PNG来代替“适当的” ICO格式的文件。

— 三月Örlygsson

要将网站固定到任务栏，Windows也需要一个ico。

— Necriis 2014年

8

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

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

— 吉姆
source

4

另外：如果您在页面块中添加A <link rel="shortcut icon" href="link/to/fav.ico" />，则可以将Favicon文件保存在任何位置<head>。

— 三月Örlygsson

1

tools.dynamicdrive.com/favicon还将允许您将多个大小合并到一个favico中，这非常好

— hdorio 2013年

5

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

— 敲门X
source

1

FaviconGenerator.com还提供从node / grunt / gulp访问其API的权限。

— 马特

3

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

— 火箭猴
source

3

我使用开源的Paint.net程序以及Icon插件。

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

— 马修·洛克（Matthew Lock）
source

嗯，paint.net.amihotornot.com.au作为Icon插件的主机？那是合法的吗？

— RonaldB

@RonaldB是的，它是该插件的主页。是不是很奇怪的领域

— 马修·洛克

2

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

支持的平台十年前，您只想支持桌面浏览器，而解决方案是生成经典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和支持的平台的数量。

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

对于大多数人来说，正确的方法是使用网站图标生成器，该生成器使您可以决定所有图标的外观并处理所有细节。唯一执行此操作的是Real Favicon Generator。完全披露：我是本网站的作者。

— philippe_b
source

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/

— 塔里克
source

1

请注意，doctype.com于2013年2月15日关闭。了解更多信息。

— Krease

1

我使用Photoshop将我的图标设为16 x 16或32 x 32。我将其另存为gif，然后使用IrfanView将gif转换为ico。

— 最高
source