應用程式圖示及標誌App icons and logos

每個應用程式都有一個代表它的圖示/標誌,該圖示會出現在 Windows 殼層中的多個位置:Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • [開始] 功能表中的應用程式清單The app list in the start menu
  • 工作列及工作管理員The taskbar and task manager
  • 您的應用程式磚Your app's tiles
  • 您的應用程式啟動顯示畫面Your app's splash screen
  • 在 Microsoft Store 中In the Microsoft Store

Windows 10 的開始畫面和磚

本文涵蓋建立應用程式圖示的基本概念、如何使用 Visual Studio 來管理它們,以及如何在需要時以手動的方式管理它們。This article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(本文是特別針對代表應用程式本身的圖示;如需有關圖示的一般指引,請參閱圖示一文。)(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

圖示類型、位置和縮放比例Icon types, locations, and scale factors

根據預設,Visual Studio 會將您的圖示資產儲存在資產子目錄中。By default, Visual Studio stores your icon assets in an assets subdirectory. 以下是不同類型的圖示、它們出現的位置,以及它們要呼叫之項目的清單。Here's a list of the different types of icons, where they appear, and what they're called.

圖示名稱Icon name 顯示位置Appears in 資產檔案名稱Asset file name
小型磚Small tile 開始功能表Start menu SmallTile.pngSmallTile.png
中型磚Medium tile [開始] 功能表,Microsoft Store 清單*Start menu, Microsoft Store listing* Square150x150Logo.pngSquare150x150Logo.png
寬型磚Wide tile 開始功能表Start menu Wide310x150Logo.pngWide310x150Logo.png
大型磚Large tile [開始] 功能表,Microsoft Store 清單*Start menu, Microsoft Store listing* LargeTile.pngLargeTile.png
應用程式圖示App icon [開始] 功能表、工作列、工作管理員中的應用程式清單App list in start menu, task bar, task manager Square44x44Logo.pngSquare44x44Logo.png
啟動顯示畫面Splash screen 應用程式的啟動顯示畫面The app's splash screen SplashScreen.pngSplashScreen.png
徽章標誌Badge logo 您的應用程式磚Your app's tiles BadgeLogo.pngBadgeLogo.png
套件標誌/Store 標誌Package logo/Store logo 應用程式安裝程式、合作夥伴中心、Store 中的 [回報應用程式] 選項、Store 中的 [撰寫評論] 選項App installer, Partner Center, the "Report an app" option in the Store, the "Write a review" option in the Store StoreLogo.pngStoreLogo.png

除非您選擇僅顯示 Store 中上傳的影像,否則將使用 *。* Used unless you choose to display only uploaded images in the Store.

若要確保這些圖示在每個畫面上看起來清晰,您可以為不同的顯示縮放比例建立相同圖示的多個版本。To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

縮放比例決定 UI 元素的大小,例如文字。The scale factor determines the size of UI elements, such as text. 縮放比例的範圍從 100% 到 400%。Scale factors range from 100% to 400%. 較大的值會建立較大的 UI 元素,使其更容易在高 DPI 顯示器上看到。Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows 會根據 DPI (每英吋點數) 以及裝置的檢視距離,自動設定每個螢幕的縮放比例Windows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device. (使用者可以藉由前往 [設定] > [顯示] > [縮放與版面配置] 頁面來覆寫預設值)。(Users can override the default value by going to the Settings > Display > Scale and layout page.)

[設定] 中 [顯示] 頁面的螢幕擷取畫面。

因為應用程式圖示資產是點陣圖,且點陣圖無法妥善縮放,我們建議為每個縮放比例提供每個圖示資產的版本:100%、125%、150%、200% 和 400%。Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. 好多圖示啊!That's a lot of icons! 幸運的是,Visual Studio 提供了一個工具,可讓您更輕鬆地產生及更新這些圖示。Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Microsoft Store 清單影像Microsoft Store listing image

「如何在 Microsoft Store 中為我的應用程式清單指定影像?」"How do I specify images for my app's listing in the Microsoft Store?"

根據預設,我們會使用 Store 中來自您的套件中的一些影像,如本頁頂端表格中所述 (以及您在提交程序期間所提供的其他影像 (英文))。By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). 不過,您也可以選擇性地為 Windows 10 (包含 Xbox) 客戶顯示清單時,防止 Microsoft Store 使用您應用程式套件中的標誌影像,指定讓 Microsoft Store 只使用您上傳的影像。However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. 如此您更能在整個 Store 中掌控各種不同顯示的應用程式外觀。This gives you more control over your app’s appearance in various displays throughout the Store. (請注意,如果您的產品支援舊版的作業系統版本,那麼即使您使用此選項,這些客戶仍可能會看到套件中的影像。)您可以在提交程序的 [Store 清單] 步驟的 [Store 標誌] 區段執行此操作。(Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

在應用程式提交程序中指定 Store 標誌

勾選此方塊時,就會出現稱為 [Store 顯示影像] 的新區段。When you check this box, a new section called Store display images appears. 在這裡,您可以上傳 Store 將使用的 3 種圖片尺寸來取代應用程式套件中的標誌影像:300 x 300、150 x 150 和 71 x 71 像素。Here, you can upload 3 image sizes that the Store will use in place of logo images from your app’s packages: 300 x 300, 150 x 150, and 71 x 71 pixels. 雖然我們建議提供所有 3 種大小,但僅需要 300 x 300 大小。Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

如需詳細資訊,請參閱僅顯示 Store 中上傳的標誌影像For more info, see Display only uploaded logo images in the Store.

使用 Visual Studio 資訊清單設計工具管理應用程式圖示Managing app icons with the Visual Studio Manifest Designer

Visual Studio 提供了一個非常有用的工具來管理名為資訊清單設計工具的應用程式圖示。Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

如果您還沒有 Visual Studio 2019,有數個版本可用,包括免費版本 (Visual Studio 2019 Community Edition),其他版本則提供免費試用。If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. 您可以在此下載:https://developer.microsoft.com/windows/downloadsYou can download them here: https://developer.microsoft.com/windows/downloads

啟動資訊清單設計工具:To launch the Manifest Designer:

  1. 使用 Visual Studio 開啟 UWP 專案。Use Visual Studio to open a UWP project.
  1. 在[方案總管] 中,按兩下Package.appmxanifest 檔案。In the Solution Explorer, double-click the Package.appmxanifest file.

Visual Studio 2019 資訊清單設計工具

Visual Studio 顯示資訊清單設計工具。Visual Studio displays the Manifest Designer.

資訊清單設計工具的螢幕擷取畫面,顯示 [應用程式] 索引標籤。

  1. 按一下 [視覺資產] 索引標籤。Click the Visual Assets tab.

資訊清單設計工具的螢幕擷取畫面,顯示 [視覺資產] 索引標籤。

一次產生所有資產Generating all assets at once

[視覺資產] 索引標籤中的第一個功能表項目 [所有視覺資產] 可執行的動作完全符合其名稱:只需按一下按鈕即可產生您的應用程式所需的每個視覺資產。The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

在 Visual Studio 中產生所有視覺資產

您只需要提供單一影像,Visual Studio 將為每個縮放比例產生小型磚、中型磚、大型磚、寬型磚、大型磚、應用程式圖示、啟動顯示畫面和套件標誌資產。All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

若要一次產生所有資產:To generate all assets at once:

  1. 按一下 [來源] 欄位旁邊的 [...] ,然後選取您想要使用的影像。Click the ... next to the Source field and select the image you want to use. 如果您使用點陣圖影像,請確定它至少為 400 x 400 像素,以便您取得清晰的效果。If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. 以向量為基礎的影像效果最好;Visual Studio 允許您使用 AI (Adobe Illustrator) 和 PDF 檔案。Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (選用。)在 [顯示設定] 區段中,設定以下選項:(Optional.) In the Display Settings section, configure these options:

    a.a. 簡短名稱:指定您應用程式的簡短名稱。Short name: Specify a short name for your app.

    b.b. 顯示名稱:指出您是否要在中型、寬型或大型磚上顯示簡短名稱。Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c.c. 磚背景:指定磚背景色彩的十六進位值或色彩名稱。Tile background: Specify the hex value or a color name for the tile background color. 例如,#464646For example, #464646. 預設值為 transparentThe default value is transparent.

    d.d. 啟動顯示畫面背景:指定啟動顯示畫面背景的十六進位值或色彩名稱。Spash screen background: Specify the hex value or color name for the spash screen background.

  3. 按一下 [產生] 。Click Generate.

Visual Studio 會產生您的影像檔,並將它們新增至專案中。Visual Studio generates your image files and adds them to project. 如果您想要變更您的資產,只需重複此程序即可。If you want to change your assets, simply repeat the process.

縮放圖示資產會遵循此檔案命名慣例:Scaled icon assets follow this file naming convention:

檔名-縮放-縮放比例.pngfilename-scale-scale factor.png

例如,For example,

Square150x150Logo-scale-100.png、Square150x150Logo-scale-200.png、Square150x150Logo-scale-400.pngSquare150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png

請注意,Visual Studio 預設不會產生徽章標誌。Notice that Visual Studio doesn't generate a badge logo by default. 這是因為您的徽章標誌是獨一無二的,可能與您的其他應用程式圖示不符合。That's because your badge logo is unique and probably shouldn't match your other app icons. 如需詳細資訊,請參閱 Windows 應用程式的徽章通知一文。For more info, see the Badge notifications for Windows apps article.

深入了解應用程式圖示資產More about app icon assets

Visual Studio 會產生專案所需的所有應用程式圖示資產,但如果您想要自訂它們,最好先了解它們與其他應用程式資產的區別。Visual Studio will generate all the app icon assets required by your project, but if you'd like to customize them, it helps to understand how they're different from other app assets.

應用程式圖示資產會出現在許多地方:Windows 工作列、[工作] 檢視、ALT + TAB 和 [開始] 磚的右下角。The app icon asset appears in a lot of places: the Windows taskbar, the task view, ALT+TAB, and the lower-right corner of Start tiles. 因為應用程式圖示資產會出現在很多地方,所以它會有一些其他資產所沒有的額外調整大小和背板選項:「目標大小」資產和「無背板」資產。Because the app icon asset appears in so many places, it has some additional sizing and plating options the other assets don't have: "target-size" assets and "unplated" assets.

目標大小應用程式圖示資產Target-size app icon assets

除了標準的縮放比例大小 ("Square44x44Logo.scale-400.png") 之外,我們也建議您建立「目標大小」資產。In addition to the standard scale factor sizes ("Square44x44Logo.scale-400.png"), we also recommend creating "target-size" assets. 我們將這些資產稱為目標大小,因為它們針對的是特定的大小,例如 16 像素,而不是特定的縮放比例,例如 400。We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. 目標大小資產適用於不使用縮放倍數系統的曲面:Target-size assets are for surfaces that don't use the scaling plateau system:

  • [開始] 畫面的捷徑清單 (桌面)Start jump list (desktop)
  • [開始] 畫面右下角的磚 (桌面)Start lower corner of tile (desktop)
  • 捷徑 (桌面)Shortcuts (desktop)
  • 控制台 (桌面)Control Panel (desktop)

以下是目標大小資產的清單:Here's the list of target-size assets:

資產大小Asset size 檔案名稱範例File name example
16x16*16x16* Square44x44Logo.targetsize-16.pngSquare44x44Logo.targetsize-16.png
24x24*24x24* Square44x44Logo.targetsize-24.pngSquare44x44Logo.targetsize-24.png
32x32*32x32* Square44x44Logo.targetsize-32.pngSquare44x44Logo.targetsize-32.png
48x48*48x48* Square44x44Logo.targetsize-48.pngSquare44x44Logo.targetsize-48.png
256x256*256x256* Square44x44Logo.targetsize-256.pngSquare44x44Logo.targetsize-256.png
20x2020x20 Square44x44Logo.targetsize-20.pngSquare44x44Logo.targetsize-20.png
30x3030x30 Square44x44Logo.targetsize-30.pngSquare44x44Logo.targetsize-30.png
36x3636x36 Square44x44Logo.targetsize-36.pngSquare44x44Logo.targetsize-36.png
40x4040x40 Square44x44Logo.targetsize-40.pngSquare44x44Logo.targetsize-40.png
60x6060x60 Square44x44Logo.targetsize-60.pngSquare44x44Logo.targetsize-60.png
64x6464x64 Square44x44Logo.targetsize-64.pngSquare44x44Logo.targetsize-64.png
72x7272x72 Square44x44Logo.targetsize-72.pngSquare44x44Logo.targetsize-72.png
80x8080x80 Square44x44Logo.targetsize-80.pngSquare44x44Logo.targetsize-80.png
96x9696x96 Square44x44Logo.targetsize-96.pngSquare44x44Logo.targetsize-96.png

* 我們建議至少提供這些大小。* At a minimum, we recommend providing these sizes.

您不需要將邊框間距新增至這些資產;如果需要,Windows 會新增邊框間距。You don't have to add padding to these assets; Windows adds padding if needed. 這些資產至少需要 16 個像素的擺設區域。These assets should account for a minimum footprint of 16 pixels.

以下是這些資產出現在 Windows 工作列上圖示中的範例:Here's an example of these assets as they appear in icons on the Windows taskbar:

Windows 工作列中的資產

無背板資產Unplated assets

根據預設,Windows 預設會在彩色背板上使用以目標為基礎的資產。By default, Windows uses a target-based asset on top of a colored backplate by default. 如果需要,您可以提供以目標為基礎的無背板資產。If you want, you can provide a target-based unplated asset. 「無背板」表示資產將顯示在透明背景上。"Unplated" means the asset will be displayed on a transparent background. 請記住,這些資產會透過各種背景色彩顯示。Keep in mind that these assets will appear over a variety of background colors.

無背板和有背板資產

以下是使用無背板應用程式圖示資產的曲面:Here are the surfaces that use unplated app icon assets:

  • 工作列和工作列縮圖 (桌面)Taskbar and taskbar thumbnail (desktop)
  • 工作列捷徑清單Taskbar jumplist
  • 工作檢視Task view
  • ALT+TABALT+TAB

無背板資產和佈景主題Unplated assets and themes

使用者選取的佈景主題決定工作列的色彩。The user's selected theme determines the color of the taskbar. 如果無背板資產未針對目前的佈景主題特別限定,則系統將檢查資產的對比度。If the unplated asset isn't specifically qualified for the current theme, the system checks the asset for contrast. 如果工作列有足夠的對比,則系統會使用它。If it has enough contrast with taskbar, the system uses it. 否則,系統會尋找高對比度版本的資產。Otherwise, the system looks for a high-contrast version of the asset. 如果系統找不到任何高對比度版本的資產,則系統會繪製背板形式的資產。If it can't find one, the system draws the plated form of the asset instead.

目標和無背板調整大小Target and unplated sizing

以下是以目標為基礎的資產的大小建議 (縮放比例 100%):Here are the size recommendations for target-based assets, at 100% scale:

縮放比例 100%,以目標為基礎的資產

深入了解啟動顯示畫面資產More about splash screen assets

如需啟動顯示畫面的詳細資訊,請參閱 Windows 應用程式啟動顯示畫面一文。For more info about splash screens, see Windows app splash screens.

深入了解徽章標誌資產More about badge logo assets

當您使用資產產生器來產生所需的所有資產時,預設情況下它不會產生徽章標誌的原因是:它們與其他應用程式資產非常不同。When you use the asset generator to generate all the assets you need, there's a reason why it doesn't generate badge logos by default: they're very different from other app assets. 徽章標誌會出現在通知和應用程式磚上的狀態影像。The badge logo is a status image that appears in notifications and on the app's tiles.

如需詳細資訊,請參閱 Windows 應用程式的徽章通知For more information, see Badge notifications for Windows apps.

自訂資產邊框間距Customizing asset padding

根據預設,Visual Studio 資產產生器會將建議的邊框間距套用至任何影像。By default, Visual Studio asset generator applies recommended padding to whatever image. 如果您的影像已包含邊框間距或您想要延伸到磚結尾的跨頁影像,則可以透過取消勾選 [套用建議的填補] 核取方塊來關閉這項功能。If your images already contain padding or you want full bleed images that extend to the end of the tile, you can turn this feature off by unchecking the Apply recommended padding check box.

磚邊框間距建議Tile padding recommendations

如果您想要提供您自己的邊框間距,以下是我們對磚的建議。If you want to provide your own padding, here are our recommendations for tiles.

磚有 4 種大小:小型 (71 x 71)、中型 (150 x 150)、寬型 (310 x 150) 和大型 (310 x 310)。There are 4 tile sizes: small (71 x 71), medium (150 x 150), wide (310 x 150), and large (310 x 310).

每個磚資產的大小與其所在的磚一樣。Each tile asset is the same size as the tile on which it is placed.

磚會跨頁顯示

如果您不希望圖示延伸到磚的邊緣,則可以在資產中使用透明像素來建立邊框間距。If you don't want your icon to extend to the edge of the tile, you can use transparent pixels in your asset to create padding.

磚和背板

對於小型磚,將圖示寬度和高度限制為磚大小的 66%:For small tiles, limit the icon width and height to 66% of the tile size:

小型磚的大小比例

對於中型磚,將圖示寬度限制為磚大小的 66%,將高度限制為磚大小的 50%。For medium tiles, limit the icon width to 66% and height to 50% of tile size. 這可防止品牌列中的元素重疊:This prevents overlapping of elements in the branding bar:

中型磚的大小比例

對於寬型磚,將圖示寬度限制為磚大小的 66%,將高度限制為磚大小的 50%。For wide tiles, limit the icon width to 66% and height to 50% of tile size. 這可防止品牌列中的元素重疊:This prevents overlapping of elements in the branding bar:

寬型磚的大小比例

對於大型磚,將圖示寬度限制為磚大小的 66%,將高度限制為磚大小的 50%:For large tiles, limit the icon width to 66% and height to 50% of tile size:

大型磚的大小比例

有些圖示是水平或垂直方向,但其他圖示卻有著更複雜的圖形,使其無法恰好符合目標尺寸。Some icons are designed to be horizontally or vertically oriented, while others have more complex shapes that prevent them from fitting squarely within the target dimensions. 看起來像置中的圖示可能偏向另一側。Icons that appear to be centered can be weighted to one side. 在這個案例中,假如圖示的視覺大小與恰好符合的圖示相同,則部分圖示可能會超出建議的擺設區域:In this case, parts of an icon may hang outside the recommended footprint, provided it occupies the same visual weight as a squarely fitted icon:

三個置中的圖示

對於跨頁資產,請考量在磚的邊界和邊緣內互動的元素。With full-bleed assets, take into account elements that interact within the margins and edges of the tiles. 將邊界維持在至少是磚高或磚寬的 16%。Maintain margins of at least 16% of the height or width of the tile. 如為最小型磚大小,這個百分比表示邊界寬度的兩倍:This percentage represents double the width of the margins at the smallest tile sizes:

含邊界的跨頁磚

在這個範例中,邊界太擠了:In this example, margins are too tight:

邊界過小的跨頁磚

針對特定佈景主題、語言和其他條件進行最佳化Optimizing for specific themes, languages, and other conditions

本文說明如何為特定的縮放比例建立資產,但您也可以建立各種不同條件及條件組合的資產。This article described how to create assets for specific scale factors, but you can also create assets for a wide variety of conditions and combinations of conditions. 例如,您可以針對高對比度顯示器或淺色佈景主題和深色佈景主題建立圖示。For example, you can can create icons for high contrast displays or for the light themes and dark themes. 您甚至可以為特定語言建立資產。You can even create assets for specific languages.

如需相關指示,請參閱針對語言、縮放比例、高對比及其他限定詞量身打造您的資源)。For instructions, see Tailor your resources for language, scale, high contrast, and other qualifiers.