创建具有多种尺寸的.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
用一个文件和一行代码来支持多个大小的图标。 这是我们将要创建的:
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 imagemagick
If 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.ico
convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
The 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对其进行引用。 这个:
Not this:
不是这个:
And not this:
而不是这样:
For Windows users, you can install ImageMagick here. It should work in a similar way.
对于Windows用户,您可以在此处安装ImageMagick 。 它应该以类似的方式工作。