快速提示：快速，轻松地将Favicons添加到HTML

tech2022-12-17 135

Favicons add that extra bit of polish to your website, helping to separate your site from the rest. These icons are increasingly more crucial as desktop clients, operating systems, and mobile devices let users pin useful sites for quick access. It’s important to get these favicons right so that regardless of where your site is pinned, your users will always get the best looking icon.

网站图标为您的网站增添了些许美感，有助于将您的网站与其他网站分开。随着桌面客户端，操作系统和移动设备使用户固定有用的站点以便快速访问，这些图标变得越来越重要。正确设置这些图标很重要，这样无论您将网站固定在何处，用户都将始终获得外观最好的图标。

Favicons generally aren’t easy to manage. Because of the fragmentation of both mobile and desktop operating systems and browsers, catering to every device to ensure the best icon is used becomes a slow and tedious process. Sometimes you may have to manage 30+ resources for this task depending on how much support you want to provide.

网站图标通常不容易管理。由于移动和桌面操作系统以及浏览器的碎片化，迎合每台设备以确保使用最佳图标的过程变得缓慢而乏味。有时，您可能需要管理30多个资源来完成此任务，具体取决于要提供多少支持。

However, thankfully there’s the Real Favicon Generator web service. This website takes you through a step by step process to quickly and easily generate all the favicons and web resources you’ll need.

但是，值得庆幸的是，这里有Real Favicon Generator Web服务。该网站将带您逐步进行操作，以快速，轻松地生成所需的所有图标和网络资源。

生成过程 (The Generation Process)

Real Favicon Generator makes the whole process painless. You start by selecting your favicon and uploading it to the generator. When the page loads, you’ll see different screens for the different device targets.

真正的Favicon Generator使整个过程轻松自如。首先选择图标，然后将其上载到生成器。页面加载后，您会看到不同设备目标的不同屏幕。

Several of these sections offer similar options, such as being able to supply a dedicated picture to target the device, adding margins around the icon and applying background colors. Below are the main screens you can adjust, one for iOS, one for Android and one for others (Windows / Safari) respectively.

这些部分中的几个提供类似的选项，例如能够提供专用图片来定位设备，在图标周围增加边距以及应用背景颜色。以下是您可以调整的主屏幕，分别是iOS，一个Android和其他(Windows / Safari)屏幕。

The visual interface makes tweaking your favicons easy, you can see exactly how your icon will appear when you pin your site to your device.

视觉界面使调整图标变得容易，当您将网站固定到设备时，您可以确切地看到图标的外观。

Besides actual favicons themselves, this generator will also handle the creation of a manifest file for mobile Chrome, along with other settings for pinnable tabs in Safari. These values are eventually turned into <meta> tags in the final output.

除了实际的图标集之外，此生成器还将处理为移动Chrome浏览器创建清单文件以及Safari中可设置标签页的其他设置。这些值最终在最终输出中变成<meta>标签。

使用您的网站图标 (Using Your Favicons)

When you’re ready to proceed, press the “generate” button. Once the page loads, it will give you the raw HTML you need to add to your site. Here’s an example of the output:

准备好继续时，请按“生成”按钮。页面加载后，它将为您提供需要添加到站点的原始HTML。这是输出示例：

The generator creates all of your <link> and <meta> tag elements based on the settings you provided earlier.

生成器根据您之前提供的设置创建所有<link>和<meta>标记元素。

Now you just need to press the Favicon Package button to get your files. Once downloaded, just extract them somewhere and copy these icons to your site. As part of the generation process you can specify the directory if you will not be storing them on the site’s root location (for example storing them inside of a nested directory like /images/favicons).

现在，您只需要按Favicon Package按钮即可获取文件。下载后，只需将它们解压缩到某个位置，然后将这些图标复制到您的站点即可。在生成过程中，您可以指定目录(如果您不将它们存储在站点的根目录中) (例如，将它们存储在嵌套目录中，例如/images/favicons ) 。

Once you copy over your files and add your HTML to your site’s <head>, you’re good to go. When you pin your site on your device, your website will serve the best looking favicon to your users.

复制文件并将HTML添加到站点的<head> ，就可以了。当您将网站固定在设备上时，您的网站将为用户提供外观最好的网站图标。

If you end up finding this service useful and find that it saves you time, you might consider donating a few dollars to them as a thank you (they even take Bitcoins!).

如果最终发现此服务有用并发现它可以节省您的时间，则可以考虑向他们捐赠几美元(谢谢他们(他们甚至拿走了比特币！))。

附加功能和选项 (Extra Functions and Options)

Besides generating favicons, the Real Favicon Generator service lets you check if your website is serving all the required favicons you need, giving you a breakdown of what you could be missing.

除了生成图标，Real Favicon Generator服务还可以让您检查您的网站是否正在满足您所需的所有必需图标，从而使您可以了解可能丢失的内容。

Favicon support is continually evolving, so this is a great tool to ensure you are serving up the best favicons and resources you can.

网站图标的支持在不断发展，因此这是确保您提供最佳网站图标和资源的强大工具。

翻译自: https://www.sitepoint.com/quick-tip-add-favicons-quickly-and-easily-to-your-html/

相关资源：jdk-8u281-windows-x64.exe

最新回复(0)