这篇翻译不完整。请帮忙从英语翻译这篇文章。
在不同的平台上实现应用程序的图标是一种痛苦，这甚至是没有考虑设计的图标和图形。不同的平台有不同的应用方式和大小，所以你需要有很多要考虑，如果你想让你的应用支持多个平台。本文提供了有用的提示，用来实现应用程序的图标，包括不同的大小和不同的平台（如：浏览器的操作系统），以及实施细节。我们不会提供图标图形设计信息，但我们将为每个平台链接到合适的资源。
Web应用程序的通用图标
TBD
Firefox OS
谋智的Firefox OS 平台是一个最简单的从图标的支持。这部分从细节上解释了为什么这些大小是需要的，并提供了一个表来表明具体图标大小与相关发布的手机出货量。
Note: For more information on the actual design of Firefox OS icons, read the Firefox OS app icon design guidelines. They can be square or round, as stated in the guidelines.
Icon format
Firefox OS icons need to be in PNG format.
Icon sizes
Required icon sizes
- 128 x 128
- For display on the Firefox Marketplace and device.
Recommended icon sizes
- 128 x 128
- For display on the Firefox Marketplace and pre-Firefox OS 2.0 devices.
- 512 x 512
- From Firefox 2.0 onwards, larger icons are needed for crisp display on all the different possible combinations of Phone and tablet screen sizes, screen resolutions, and 3 and 4-column layouts. We accept a 512 x 512 icon, which is then scaled for all the different uses across devices. This size is also useful for display on other platforms apps can be installed across, such as Android.
Other icon sizes that might be useful
- 60 x 60
- For the exact on-device icon size on older Firefox OS versions.
- 16 x 16, 32 x 32, 48 x 48, 64 x 64, 90 x 90, 128 x 128 and 256 x 256
- These icon sizes are used on various other platforms your app can be installed on, such as Windows, Mac OS X and Android.
Icon size explanations
512 icon for device display
For older Firefox OS device (pre-2.0), the recommendation was a 60 x 60 icon, to use on the homescreen of your device. It was simple back then, as the devices generally had a similar screen size and resolution, and the layout didn't vary much. However, more recently, a number of factors have proven this to be less than ideal:
- Devices are now appearing with a wider range of screen sizes, including not only phones but tablets, and in the near future, TVs.
- Higher resolution devices are starting to appear.
- Firefox OS 2.0+ have multiple homescreen layout configurations available, including 3 and 4 column layouts.
These factors resulted in icons started to look pixelated on some devices. The Firefox OS UX team considered many different options to resolve this, including SVG icons, multiple device icon requirements, and a number of different single icon sizes, but in the end the best solution was a single 512 x 512 icon that can be resized as needed for different uses across devices. This is the best solution:
- Requiring a different image file for every icon usage instance would be really inconvenient for developers. 512 x 512 is a fairly standard size in other app store submission processes.
- SVG, despite its superior file size, took significantly more processing to render than a simple image file, which was too much of a performance hit to bear, especially for lower end devices like the Tarako.
- 512 x 512 proved to be big enough for all conceivable uses, while still being a reasonable file size.
With the 2.0 homescreen design, we wanted to move to larger app icons as one of the tenets of the 2.0 visual refresh is to make things feel more spacious and comfortable to use. As such, we decided to ship a 3 column, large icon version of the homescreen, but still provide users with an option to switch back to the 4 column, small icon layout from Settings.
The icon sizes starting with the 2.0 release across different devices are as follows:
| Device name | Physical screen specifications | Screen resolution | Scale factor | Large (3 column homescreen) icon size | Small (4 column homescreen) icon size |
|---|---|---|---|---|---|
| Most in-market devices | 320x480 HVGA 3.5” | 165ppi | 1x | 84px | 64px |
| Helix (Huawei) or ZTE Open C | 480x800 WVGA 4.0” | 233ppi | 1.5x | 126px | 96px |
| Flame reference device | 480x854 FWVGA 4.5” | 218ppi | 1.5x | 126px | 96px |
| 4.5" @ qHD | 540x960 qHD 4.5” | 245ppi | 2x | 142px | 108px |
| 4.7" @ 720p | 720x1280 720p 4.7” | 312ppi | 2.25x | 189px | 144px |
| 5.0" @ 1080p | 1080x1920 1080p 5” | 440ppi | 3.375x | 284px | 216px |
For the 320 x 480 screen, the base sizes of 84 x 84 for 3 column mode, and 64 x 64 for 4 column mode were chosen to maximize icon size while balancing the icon density and wallpaper visibility needs. Icon sizes for all other screens are calculated by multiplying by the relevant scale factor. For example, on Flame it is 1.5 (scale factor) x 84 = 126 (large icons) and 1.5 (scale factor) x 64 = 96 (small icons).
128 icon for marketplace
The Firefox Marketplace still requires a 128 x 128 icon, for display on app marketplace listing pages.
Including the icon in your app
You specify the path to the icons in the icon field of the app manifest, and multiple icons can be pointed to like this:
"icons": {
"512": "/img/icon-512.png",
"128": "/img/icon-128.png"
}
You can also use a 64 bit encoded Data URI directly in the manifest file to provide the icon and cut down on HTTP requests:
"icons": {
"512": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC ... "
}
We have cut the above example down for the sake of brevity.
Adding more specific icon sizes
Note that you don't need to just include 512 x 512 and 128 x 128 with your app: you can happily include further specific icon sizes if you want to provide a tailored look for each different required size — you can simply include more icon lines in the manifest icon field shown above.
Icons in other app ecosystems
Android, iOS, Windows, Tizen, etc.
It would be good to cover icon requirements for different ecosystems.