阿里图标库图标大小_网站图标：大小和设计注意事项

阿里图标库图标大小

Somebody might be able to do a great painting that is 20 × 30 in, but you take that down to 1 × 1½ in, and it’s a challenge to make it work. 某人可能能够完成20×30英寸的出色绘画，但是将其降低到1×1½英寸，要使其正常工作是一个挑战。

Ethel Kessler, Art Director for USPS Stamp services, quoted on a 99% Invisible episode on stamp design

美国邮政邮票服务艺术总监埃塞尔·凯斯勒(Ethel Kessler)引用了邮票设计中99％的不可见情节

In the first article of this series I talked about the new formats supported for favicons; in this one, I shall talk about their sizes and design factors.

在本系列的第一篇文章中 ，我谈到了网站图标支持的新格式。 在这一篇中，我将讨论它们的大小和设计因素。

From simple 16 × 16 pixel images, favicons and their variants (including thumbnail images for social media) have expanded into a vast and potentially confusing gamut of different sizes and formats:

从简单的16×16像素图像开始，网站图标及其变体(包括社交媒体的缩略图图像)已扩展为各种尺寸和格式的巨大且令人困惑的色域：

In most cases you will want all of these icons to have the same appearance, consistently presenting your brand identity. To simplify matters I would suggest making the Facebook icon 110 × 110 pixels in size, so that every icon retains a 1:1 aspect ratio.

在大多数情况下，您希望所有这些图标都具有相同的外观，以始终如一地呈现您的品牌标识。 为了简化问题，我建议将Facebook图标的尺寸设置为110×110像素，以便每个图标都保持1：1的纵横比。

Start by designing a 256 × 256 icon: this image will be used as the basis for all of the icons you will create. A design that is clear, bold and simple will tend to reduce well in size. If you can’t keep it simple, be prepared to make separate designs optimized for the 16 × 16 and 24 × 24 icon sizes.

首先设计一个256×256的图标：该图像将用作您将创建的所有图标的基础。 清晰，大胆和简单的设计将倾向于减小尺寸。 如果不能保持简单，请准备好针对16×16和24×24图标大小进行优化的单独设计。

Drawing in such a limited space is a skill in itself: 16 × 16 pixels is a very small canvas to work in.

在如此有限的空间中绘画本身就是一项技能：16×16像素是可以使用的很小的画布。

Icon Sizes And Purposes For Modern Sites

Size	Purpose
16 × 16	The traditional size of favicons, still the best supported
24 × 24 32 × 32 64 × 64	Used by IE9 and above for pinned sites
88 × 31	The default image size for an RSS feed icon. The largest square icon that can be used is 144 × 144. The largest size possible is 144 pixels wide × 400 pixels high
129 × 129	Icon size for bookmarked sites on iOS devices (iPhones, IPad, etc). Must be a separate file in PNG format. Will also work on Android devices if rel is set to the precomposed variant when linking.
130 × 110	Maximum size for thumbnail images used in Facebook shares/likes (must be a separate file).

现代网站的图标大小和目的

尺寸	目的
16×16	传统的Favicon大小，仍然是最好的支持
24×24 32×32 64×64	IE9及更高版本用于固定网站
88×31	RSS feed图标的默认图像尺寸。 可以使用的最大正方形图标为144×144。最大尺寸为144像素宽×400像素高
129×129	iOS设备(iPhone，iPad等)上带有书签的网站的图标大小。 必须是PNG格式的单独文件。 如果在链接时将rel设置为预先组成的变体，那么它也将在Android设备上工作。
130×110	Facebook分享/点赞中使用的缩略图的最大尺寸(必须是单独的文件)。

A few design tips may help:

一些设计技巧可能会有所帮助：

• While anti–aliasing is usually your friend, you may find that Photoshop’s tendency to smooth everything uses too many pixels when working on a favicon. Switching to the pencil tool and a single pixel brush size and/or turning off antialiasing on fonts may help.
  虽然抗锯齿通常是您的朋友，但您可能会发现，使用Photoshop处理favicon时，趋于平滑所有内容的趋势会使用太多像素。 切换到铅笔工具和单个像素画笔大小和/或关闭字体的抗锯齿功能可能会有所帮助。
• Only create what can be seen. While working at magnified levels may be vital to your creative workflow, at the end of the day if something on the icon is not visible at 100% it’s not going to count.
  只创造可见的东西。 虽然放大的水平对于您的创意工作流程可能至关重要，但最终如果图标上的某些内容以100％的比例看不到，那将不计算在内。

The good news is that you will not have six different icon files to keep track of: for the final site: you just need three. The .ico format can actually store multiple resolutions: your 16 × 16 , 24 × 24 , 32 × 32 and 64 × 64 icons can all sit within a single file. The icon for iOS/Android devices will be a second separate image, and the Facebook icon a third.

好消息是，您将没有六个不同的图标文件来跟踪：对于最终站点：您只需要三个。 .ico格式实际上可以存储多种分辨率：您的16×16，24×24，32×32和64×64图标都可以放在一个文件中。 iOS / Android设备的图标将是第二张单独的图像，Facebook图标是第三张。

The next logical article to read in this series takes you through the process of making a single traditional 16 × 16 pixel favicon; if you’re interested in taking the approach of making multiple icon sizes, I’ll talk about that presently.

本系列中的下一篇逻辑文章将带您完成制作单个传统的16×16像素收藏夹图标的过程 ； 如果您有兴趣采用多种图标尺寸的方法，那么我现在将讨论。

翻译自: https://thenewcode.com/433/Site-Icons-Sizes-amp-Design-Considerations

阿里图标库图标大小