阿里图标库图标大小
A site doesn't seem complete without having a favicon. For some reason, I will usually immediately notice when a site doesn't have one. It leaves me questioning the legitimacy or quality of the site over something that's so seemingly irrelevant.
如果没有网站图标，网站似乎并不完整。 出于某种原因，当一个站点没有站点时，我通常会立即注意到。 这让我对似乎无关紧要的东西质疑网站的合法性或质量。
Favicons have evolved beyond being a simple bookmark "favorite icon" though. They're even more relevant now with responsive design and mobile devices. A user can now "pin" any website or webapp to their home screen (or desktop) to give them the feeling of a quick-access native application. With Windows 8, Microsoft has even gone so far as to let any old website or application even send notifications to the favicon ("tile" in this case).
Favicon的发展已不仅仅是一个简单的书签“收藏夹图标”。 它们现在与响应式设计和移动设备更加相关。 用户现在可以将任何网站或Web应用程序“固定”在其主屏幕（或桌面）上，从而给他们带来快速访问本机应用程序的感觉。 使用Windows 8，Microsoft甚至可以让任何旧网站或应用程序甚至将通知发送到该图标 （在这种情况下为“ tile”）。
我的想法 (My Thoughts)
I think it's definitely worth setting up favicons for as many different devices as possible. You never know who will want to pin or favorite the site on whatever device they have. That extra bit of effort can go a long way, as with many things in development. The problem is the standard for favicons is terrible right now. Between all the different devices, operating systems, browsers, and screen resolutions out there, to support everyone is a huge pain and it pollutes the head of your HTML document with numerous lines of link tags. To be perfect every single time requires lots of research and testing.
我认为绝对值得为尽可能多的不同设备设置图标。 您永远不会知道谁愿意在他们拥有的任何设备上固定或收藏该网站。 与开发中的许多事情一样，这种额外的努力可能会走很长一段路。 问题是网站图标的标准现在很糟糕 。 在所有不同的设备，操作系统，浏览器和屏幕分辨率之间，要为所有人提供支持是一个巨大的痛苦，并且它会用许多行link标签污染HTML文档的head 。 每次都要做到完美，需要大量的研究和测试。
I like the concept of an .ico file supporting multiple sizes in a single file, but what I really want is vector support for favicons (like an SVG image). This way I could do it once and know I'm supporting everyone's needs, but that will probably never happen.
我喜欢在单个文件中支持多种大小的.ico文件的概念，但我真正想要的是对图标图标（如SVG图像）的矢量支持。 这样，我就可以做到一次，并且知道我在满足每个人的需求，但这可能永远不会发生。
Below you will find my default go-to for setting up favicons. There's a ton of information on the web, and many favicon generators seem to generate different sizes to which they think the standards are. Skip to the bottom of this article if you'd like to check out those resources and references to create your own.
在下面，您将找到我的默认图标，用于设置收藏夹图标。 网络上有大量信息，许多网站图标生成器似乎会生成他们认为标准的不同大小。 如果您想查看这些资源和参考来创建自己的资源，请跳到本文的底部。
创建具有多种尺寸的.ico文件 (Creating a .ico file with multiple sizes)
If you didn't know, a .ico file can contain multiple .png or .bmp images. This is awesome because now you can support multiple sized favicons with a single file and line of code in your document's head. This is what we will be creating:
如果您不知道，.ico文件可以包含多个.png或.bmp图像。 真棒，因为现在您可以在文档的head用一个文件和一行代码来支持多个大小的图标。 这是我们将要创建的：
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">This single file actually has five different images. It's actually pretty easy to convert multiple .png images into a single icon file. There's probably a ton of applications you can download to do it for you, but I'll show you how to do it for free from the command line.
该单个文件实际上具有五个不同的图像。 实际上，将多个.png图像转换为单个图标文件非常容易。 您可以下载大量应用程序来为您执行此操作，但是我将向您展示如何从命令行免费进行操作。
The first thing you need to do is install ImageMagick. For Mac users who use Homebrew package manager, you can simply type this from your terminal:
您需要做的第一件事是安装ImageMagick 。 对于使用Homebrew软件包管理器的Mac用户，您只需在终端上键入以下内容：
brew install imagemagickIf you don't have Homebrew installed or that doesn't work, there's this installer. Lastly, if you're hardcore or still having trouble, try to follow these instructions.
如果您没有安装Homebrew或该软件不起作用，请使用此安装程序 。 最后，如果您是中坚分子或仍然遇到问题，请尝试按照以下说明进行操作 。
If everything was successful, you should see a huge list of instructions from the command line when you type:
如果一切成功，则在键入时，您应该从命令行中看到大量的指令列表：
convert -v
Now to convert multiple .png files into a single .ico file, just follow this format from the terminal:
现在要将多个.png文件转换为单个.ico文件，只需在终端上遵循以下格式：
convert pathtofirstfile pathtofsecondfile pathtothirdfile [...] outputname.icoconvert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.icoThe last thing that I think is important to note is to make sure you put the newly created favicon.ico file in the root of your site, and make sure you reference it with a full absolute URL. This:
我认为需要注意的最后一件事是确保将新创建的favicon.ico文件放在网站的根目录中，并确保使用完整的绝对URL对其进行引用。 这个：
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">Not this:
不是这个：
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">And not this:
而不是这样：
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/images/favicon.ico">For Windows users, you can install ImageMagick here. It should work in a similar way.
对于Windows用户，您可以在此处安装ImageMagick 。 它应该以类似的方式工作。
Android，iPhone和其他应用程序的图标 (Favicons for Android, iPhone and others)
Again, this is something you should look into yourself to make sure it fits your needs and works for you, but this is nonetheless a good starting point.
同样，您应该研究一下自己，以确保它适合您的需求并为您工作，但这仍然是一个很好的起点。
<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">You'll also want to add this in your document's
您还希望将其添加到文档的
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">Windows 8 Tile的Favicon (Favicon for Windows 8 Tile)
This is just for the most basic icon. They recently added support for even more sizes though.
这只是最基本的图标。 他们最近增加了对更多尺寸的支持。
<meta name="application-name" content="Scotch Scotch scotch">
<meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">和所有在一起 (And All Together)
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">
<meta name="application-name" content="Scotch Scotch scotch">
<meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">其他资源和参考 (Additional Resources and References)
博客文章/用户贡献 (Blog Posts / User Contributed)
- Favicon Cheat Sheet Favicon备忘单
- Convert multiple png images into a single icon file 将多个png图像转换为单个图标文件
- Shortcut Icons 快捷方式图标
- Touch Icons 触摸图标
文献资料 (Documentation)
发电机 (Generators)
翻译自: https://scotch.io/tutorials/all-favicons-for-all-devices-and-sizes
阿里图标库图标大小
扫一扫
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
