Html 创建收藏夹
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1547150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a favicon
提问by Eduardo Russo
How can I create a favicon for my website?
如何为我的网站创建网站图标？
回答by Eduardo Russo
Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices :(
搜索网站图标，我发现我需要 10 多种文件才能在所有浏览器和设备上工作:(
I got pissed and created my own favicon generator, that creates all these files and the correct HTML header for each one of them: faviconit.com
我很生气并创建了自己的图标生成器，它为每个文件创建了所有这些文件和正确的 HTML 标题：faviconit.com
Hope you enjoy it.
希望你喜欢它。
回答by Jared Menard
If you already have a logo image that you want to transform into a favicon, then you can convert it using http://www.favicomatic.com/. It creates crisp favicons, and I haven't had to edit them after creating them. It will generate favicons at 16x16 and 32x32 and to quote them: "Every damn size, sir!". The site also supports/preserves transparency present in some pngs. Also, their site looks cool and is easy to use.
如果您已经有要转换为网站图标的徽标图像，则可以使用http://www.favicomatic.com/进行转换。它创建了清晰的图标，创建它们后我不必编辑它们。它将生成 16x16 和 32x32 的图标并引用它们：“每个该死的大小，先生！”。该站点还支持/保留某些 png 中存在的透明度。此外，他们的网站看起来很酷并且易于使用。
For example here is a stackoverflow logo:
例如这里是一个 stackoverflow 标志：
Here are some of the generated favicons:
以下是一些生成的图标：
They also generate the needed html:
他们还生成所需的 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" />
I looked at the first 20 or so google results, and this was by far the best.
我查看了前 20 个左右的 google 结果，这是迄今为止最好的。
回答by Stefano Borini
回答by Jim
You create a icon file that's 16x16 or 32x32 or 64x64. Name it favicon.ico and place it in the root of your website public folder.
您创建一个 16x16 或 32x32 或 64x64 的图标文件。将其命名为 favicon.ico 并将其放置在您网站公共文件夹的根目录中。
There are websites that will convert other graphic formats to .ico for you. ie. http://tools.dynamicdrive.com/favicon/
有些网站可以为您将其他图形格式转换为 .ico。IE。http://tools.dynamicdrive.com/favicon/
回答by Knocks X
One of the best online favicon tools is FaviconGenerator.com. Fast, modern design, no fluff.
FaviconGenerator.com是最好的在线图标工具之一。快速、现代的设计，没有绒毛。
回答by rocketmonkeys
If you want to create .ico files, you can also use GIMPto create favicons. Modern browsers can use normal image files, but originally I think it was just .ico files. It's an open source image editor similar to Photoshop. Create and edit an image of the right size (say 32 x 32), flatten to one layer (Unless you want multiple icons in the same file), and save as a .ico. It'll format it correctly, then use Stefano's <link rel="SHORTCUT ICON" HREF="/favicon.ico">to use it in your webpage.
如果你想创建 .ico 文件，你也可以使用GIMP来创建 favicon。现代浏览器可以使用普通的图像文件，但最初我认为它只是 .ico 文件。它是一个类似于 Photoshop 的开源图像编辑器。创建和编辑合适尺寸的图像（比如 32 x 32），展平为一层（除非您想要在同一个文件中包含多个图标），然后另存为 .ico。它会正确格式化，然后使用 Stefano<link rel="SHORTCUT ICON" HREF="/favicon.ico">在您的网页中使用它。
回答by Matthew Lock
I use the open source Paint.netprogram along with the Icon plugin.
You can then create and save an image in the .ico format with all the different sizes embedded into the .ico file.
然后，您可以创建并保存 .ico 格式的图像，并将所有不同的大小嵌入到 .ico 文件中。
回答by philippe_b
When creating a favicon, you want to take the following factors into account:
创建网站图标时，您需要考虑以下因素：
- Supported platformsTen years ago, you only wanted to support desktop browsers and the solution was to generate the classic
favicon.icopicture. Nowadays, you want to support iOS (and iOS Safari) and Android (and Android Chrome). Maybe Windows 10 (and Edge) and the new Mac Book Pro Touch Bar, too (macOS Safari). You cannot just use a single "one size fits all" image anymore. - DesignAs soon as you support multiple platforms, you are facing multiple design guidelines. For example, Google is using transparent icons for its own native apps on Android, while iOS icons cannot be transparent at all. You cannot just use a "single design fits all" approach.
- Generated icons and HTML codeFor two or three years, the reference has been to generate as many icons as possible in order to cover all cases. I am afraid I created this trend all by myself :-/ The problem is that you end up with 20-something lines or HTML, which is way too much. In order to have a satisfying technical solution, you need to balance the amount of generated icons/HTML and the supported platforms.
- 支持的平台十年前，你只想支持桌面浏览器，解决方案是生成经典
favicon.ico图片。如今，您希望支持 iOS（和 iOS Safari）和 Android（和 Android Chrome）。也许还有 Windows 10（和 Edge）和新的 Mac Book Pro Touch Bar（macOS Safari）。您不能再只使用一个“一刀切”的图像了。 - 设计一旦您支持多个平台，您就会面临多个设计指南。例如，谷歌在 Android 上为自己的原生应用使用透明图标，而 iOS 图标根本不能透明。您不能只使用“单一设计适合所有人”的方法。
- 生成的图标和 HTML 代码两三年来，参考一直是生成尽可能多的图标以涵盖所有情况。恐怕我自己创造了这个趋势:-/ 问题是你最终得到了 20 多行或 HTML，这太多了。为了获得令人满意的技术解决方案，您需要平衡生成的图标/HTML 的数量和支持的平台。
As usual, you can create all these assets manually. Unless you have very, very specific needs and a budget, this is definitely not the way to go.
像往常一样，您可以手动创建所有这些资产。除非您有非常非常具体的需求和预算，否则这绝对不是要走的路。
The right way for most people is to use a favicon generator that lets you decide of the look of all the icons and takes care of all the details. The only one which does this is Real Favicon Generator. Full disclosure: I am the author of this site.
对于大多数人来说，正确的方法是使用图标生成器，让您决定所有图标的外观并处理所有细节。唯一做到这一点的是Real Favicon Generator。完全披露：我是本网站的作者。
回答by Tarik
And if you are using asp.net try this way to apply favicon to your page :
如果您使用的是 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" />
but you can find more information here : http://doctype.com/
但您可以在此处找到更多信息：http: //doctype.com/
