我正忙于一个 WordPress 网站，并来到舞台上添加点睛之笔，成为 favicon。我主要是一名开发人员，所以图形和图标不是我的强项。
创建网站图标时的最佳实践是什么（在大小等方面，我已经有了设计）？我想适应每一种可能的设备，无论是移动设备、平板电脑、视网膜显示器等。我也不希望它最终变得模糊，所以我需要知道要使用什么像素密度以及一切。
如果有一些 Mac 应用程序或在线工具可以为您执行此操作（并且正确执行），那也很棒。否则我知道如何在 Illustrator 和 Photoshop 中找到自己的出路。
Favicons的基础知识- 2013 年最佳实践：
ICO favicon.ico (32x32)
PNG favicon.png (96x96)
平铺图标 tileicon.png (144x144)
苹果触控图标 apple-touch-icon-precomposed.png (152x152)
还有一份关于 GitHub 上网站图标大小/类型的“令人痛苦的痴迷”备忘单。
永远值得一读：http ://www.jonathantneal.com/blog/understand-the-favicon/
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
favicon.ico 是最古老的 favicon，它在许多阅读此内容的人出生之前就一直有效，并且今天仍然可以正常工作。
Microsoft 建议包含大小为 16x16、32x32 和 48x48 的图像。
定义网站图标的标准方法：
<link rel="shortcut icon" href="/favicon.ico" />
浏览器将搜索您网站的根目录，favicon.ico以便您可以省略链接。favicon.ico即使声明了更合适大小的 PNG，一些较旧的浏览器也会默认声明，因此在根目录中保留未声明的 ICO 并声明不同大小的 PNG 可能是个好主意。
HTML5 引入了该sizes属性来帮助声明多种尺寸的图标。使用特定的 PNG 可以让您更好地控制所使用的尺寸，这意味着只加载正确的图像。
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
您声明的尺寸取决于您要支持的设备。一些常见和不常见的尺寸：
iOS 网络剪辑图标有多种尺寸，适用于不同的设备和分辨率。您可以指定一个或多个大小的图标，如果没有找到相关大小的图标，将使用没有声明大小的通用图标。
如果没有使用链接元素指定图标，iOS 将在根目录中搜索带有apple-touch-icon前缀的图标。iOS 设备并不是（奇怪的是）唯一使用这些图标的设备（例如 Android Chrome），因此声明它们是更安全的选择。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
当您将网站固定到 Windows 或 Windows Phone 上的开始屏幕时会使用磁贴，并且有多种尺寸。
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
推荐的图像尺寸大于这些图像的名称所建议的尺寸。这些是microsoft.com推荐的尺寸
| Minimum | Recommended
Small | 70 x 70 | 56 x 56 | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide | 310 x 150 | 248 x 120 | 558 x 270
Large | 310 x 310 | 248 x 248 | 558 x 558
瓦片的默认行为是从<title>标签中获取瓦片的标题并尊重瓦片图像中的任何透明度，显示背景颜色。您可以使用这些元标记自定义颜色和标题：
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
所有msapplication元标记都可以删除并替换为根文件夹中名为browserconfig.xml. XML 文件应如下所示：
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/tile-small.png"/>
<square150x150logo src="images/tile-medium.png"/>
<wide310x150logo src="images/tile-wide.png"/>
<square310x310logo src="images/tile-large.png"/>
<TileColor>#582686</TileColor>
</tile>
</msapplication>
</browserconfig>
图标、触摸图标、平铺图标等。您需要哪些？- 写成一个测验，但包含很多有用的信息（你可以把它当作一篇文章来阅读，忘记它是一个测验）
ImageMagick - 用于转换图像的有用命令行工具。
RealFaviconGenerator.net - 综合网站图标生成器。
FAVIC-O-MATIC - 具有易于定制的输出格式的综合网站图标生成器。
这个工具是一个超级节省时间的工具。试试看！它会为您处理一切。
以大约 800 像素 x 800 像素的大小上传您的图像，使其美观而清晰。
http://realfavicongenerator.net/
还要添加此元标记，以便您可以在某些保存到 iOS 设备时命名您的图标。
<meta name="apple-mobile-web-app-title" content="Website Name">
希望有帮助！
使用此 GRUNT 任务生成所有可能的变体：
https://github.com/gleero/grunt-favicons
从 PNG 图像生成所有已知类型和大小的图标。使用 ImageMagick。
输入： png 格式的方形徽标。您还可以靠近带有分辨率前缀的源文件，例如 source.16x16.png。
输出：
favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.
添加对 html 文件的更改。