关于大小和格式的Favicon最佳做法

32

我在WordPress网站上很忙，已经登台添加了画龙点睛的图标。我主要是一名开发人员，因此图形和图标并不是我的强项。

创建网站图标时的最佳做法是什么（就尺寸等而言，我已经设计了）？我想适应所有可能的设备，包括移动设备，平板电脑，视网膜显示器等。另外，我也不希望它最终变得模糊，因此我需要知道要使用的像素密度以及所有功能。

如果有一些Mac应用程序或在线工具可以帮您（并正确执行），那也很好。否则，我会知道如何找到Illustrator和Photoshop。

website-design  best-practice  favicon 
— 提瓦兹89
source
6
去年的新闻，但是：stackoverflow.com/questions/19029342/…。有什么理由不能满足您的需求？
— KMSTR 2014年
1
感谢@KMSTR，该备忘单github.com/audreyr/favicon-cheat-sheet正是我想要的。
— Tiwaz89 2014年
@KMSTR，您应该使用实际答案并链接到github，以便获得信誉，我们可以接受此问题了：）
— Hanna

Answers:

27

Favicons的基础知识-2013年最佳做法：

ICO favicon.ico（32x32）

PNG favicon.png（96x96）

平铺图标tileicon.png（144x144）

Apple Touch图标apple-touch-icon-precomposed.png（152x152）

还有一个“痛苦的”备忘单，适用于GitHub上的网站图标大小/类型。

永远值得一读：http : //www.jonathantneal.com/blog/understand-the-favicon/

— KMSTR
source
我一直在阅读，iOS 8现在最多需要180x180。–
— Drewdavid
您可以链接来源吗？
— KMSTR
1
当然。：我看到现在在不少地方提到180像素，但是这是我可以从苹果公司找到最好的developer.apple.com/library/ios/documentation/UserExperience/...
— Drewdavid
12

包括什么？

最低

<!-- 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.ico是最古老的favicon，自从有很多阅读此书的人诞生之日起，它就已经运行了，并且至今仍然可以正常运行。

Microsoft建议包括大小为16x16、32x32和48x48的图像。

定义收藏夹图标的标准方法：

<link rel="shortcut icon" href="/favicon.ico" />

浏览器将在您网站的根目录中搜索，favicon.ico以便您可以省略链接。favicon.ico即使有更合适大小的PNG声明，某些较旧的浏览器也会默认使用声明的声明，因此在根目录中未声明ICO并声明不同大​​小的PNG可能是一个好主意。

favicon.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">

您声明的大小取决于要支持的设备。一些常见但不太常见的尺寸：

  • 32x32
  • 48x48
  • 64x64
  • 96x96
  • 128x128 Chrome网上应用店图标
  • 适用于Android的160x160 Chrome
  • 192x192 Chrome for Android
  • 195x195 Opera Speed Dial图标
  • 196x196 Chrome for Android
  • 228x228歌剧海岸图标

苹果触摸图标

iOS网络剪辑图标有多种尺寸，可用于不同的设备和分辨率。您可以指定一个或多个大小的图标，如果找不到相关大小的图标，则将使用没有声明大小的通用图标。

如果未使用link元素指定任何图标，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标签自定义颜色和标题：

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

msapplication可以删除所有元标记，并用名为的根文件夹中的XML文件替换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>

进一步的阅读和资源

— 蔡
source
提供所有进一步阅读和资源的奖励积分，尤其是RealFaviconGenerator.net。那是极好的资源。
— bemdesign '16
9

此工具可节省大量时间。试试看！它为您照顾一切。

以大约800像素x 800像素的大小上载您的图片，使其清晰美观。

http://realfavicongenerator.net/

还要添加此元标记，以便在某些图标保存到该iOS设备时可以命名您的图标。

<meta name="apple-mobile-web-app-title" content="Website Name">

希望有帮助！

— 电脑
source
4

使用此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文件。

— MatějKříž
source
1

我也一直在寻找Favicon解决方案，并且不想依赖任何第三方Web服务。我找不到任何可以用作简单构建步骤的通用解决方案，因此创建了faviconbuild。它依靠ImageMagick，因此您可以为您的系统下载该版本的最新版本，也可以使用我在发行版中提供的版本。

我已经根据MIT许可证发布了它，因此任何人都可以自由地将其用于商业或个人用途，或者只是从中获得启发。如果您发现任何错误或想要扩展，请随时参与。

我将使用更详细的信息更新项目页面，但是它已经具有一个非常方便和标准的帮助菜单，并且可以在Unix，Mac和Windows上运行。

您只需在终端中运行.bat或.sh脚本。

适用于Windows：

faviconbuild.bat -h

或Unix / Mac（如果使用Cygwin，则为Windows）：

faviconbuild.sh -h

这将为您提供版本信息以及可用的选项。该脚本旨在获取输入图像并输出所需的所有各种图像以及要包含在您的网站中的html标记。

这是我目前在一个项目中如何使用它的示例：

./faviconbuild/faviconbuild.sh -i ./source.png

我只是简单地将faviconbuild文件夹放置到项目特定的文件夹中，因此不必触摸实际的项目文件，也无需放置source.png。脚本的默认行为是将所有内容放入gitignored的嵌套构建文件夹中，因此如果您使用git，则不会与项目冲突。

如果我遗漏任何东西，请提交功能请求。

我也有一篇博客文章，提供更多信息。

希望这个对你有帮助。

— 马修·桑德斯（Matthew Sanders）
source
您的“示例”将下载整个项目...
— KMSTR
目前，“示例”下载的是最新的打包发行版，其中包括适用于Mac / Windows的ImageMagick二进制文件和示例源png，因此您可以运行它以查看输出。到目前为止，一次提交也有点过时，但是在处理带有空格的路径时并没有丢失其他内容。我没有包括Linux二进制文件，因为有几种不同的风格，您可以从程序包管理器中获得。如果您有任何建议，我欢迎您的到来。:)
— 马修·桑德斯
从UX的角度来看，我不认为“示例”会导致下载的期望，而是...一个示例。也许可以解释到底发生了什么？就像“下载最新版本”。你有两个按钮话说例‘“下载，但下载3件事情有鉴于此，我认为观众会想到后面的画廊或排序。’
— KMSTR
知道了，谢谢！我是一名行业的软件工程师，所以我在UX / UI的初次体验通常是最少的：P。我将做一些事情以使其更加清晰，并可能添加一个带有更多信息的页面示例。
— 马修·桑德斯
我用Hexo.io生成的页面替换了GitHub 生成的页面。我还删除了“示例”链接，并在进行更多说明后将其包含在页面底部。
— 马修·桑德斯
0

这里有许多关于网站图标大小和生成器的有用信息。

我可以通过解释不同大小的设计需求来加深讨论。

是的，图标，图标，符号和徽标的大小可以基于同一艺术，但每种图形都必须专门渲染为该大小才能显得最准确（我是说，自动生成器将无法很好地处理锯齿和渐变如果您开始较小，则16像素大小和自动生成的图像将不会针对128像素大小进行优化。

使用您想要的所有3d技巧，以128像素或任何大尺寸正方形格式绘制艺术品。一次导出一个不同大小的图标，检查结果并调整母版使其在该大小下效果最佳。

对于16 x 16，我将制作一个16x16的正方形网格，并分别对其进行着色，以最大程度地控制输出。

— 韦伯斯特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.