Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Nachdem Sie das Symbol Ihrer App entworfen haben, müssen Sie die Symboldateien selbst erstellen. Da Windows mehrere Designs, Anzeigeauflösungen und Skalierungsfaktoren unterstützt, sollten Sie mehrere Versionen Ihres Symbols bereitstellen, um sicherzustellen, dass es auf jedem Gerät in jeder Größe großartig aussieht.
Symbolgrößen (WPF, UWP, WinUI)
Windows zeigt Ihr App-Symbol in verschiedenen Größen an, je nachdem, wo Ihr Symbol angezeigt wird, und die Skalierungseinstellungen des Benutzers. In der folgenden Tabelle sind alle möglichen Größen aufgeführt, die Windows verwenden können, um Ihr Symbol anzuzeigen.
Symbolgrößen (Win32)
Windows ICO-Dateien gibt es schon seit langem. Es gibt Standardgrößen, die verwendet werden, bei denen es sich um eine Teilmenge des obigen vollständigen Satzes handelt.
Symbolskalierung
Wenn Windows das Symbol Ihrer App anzeigt, wird zuerst nach einer genauen Übereinstimmung in der Größe gesucht. Wenn es keine genaue Übereinstimmung gibt, wird nach der nächsten Größe nach oben gesucht und verkleinert. Wenn Sie weitere Symbolgrößen in Ihre App einbinden, kann Windows häufiger eine pixelgenaue Übereinstimmung erzielen und die auf skalierte Symbole angewendete Skalierung reduzieren.
| Windows 11 Skalierungsfaktor | 100 % | 125% | 150% | 200% | 250% | 300 % | 400% |
|---|---|---|---|---|---|---|---|
| Kontextmenü, Titelleiste, Taskleiste | 16px | 20px | 24px | 32px | 40px | 48px | 64px |
| Taskleiste, Suchergebnisse, Liste "Alle Apps starten" | 24px | 30px | 36px | 48px | 60px | 72px | 96px |
| Start-Pins | 32px | 40px | 48px | 64px | 80px | 96px | 256px |
Hinweis
Apps sollten mindestens 16 x 16, 24x24, 32x32, 48x48 und 256 x 256 aufweisen. Dies deckt die am häufigsten verwendeten Symbolgrößen ab und stellt ein 256px-Symbol bereit, um zu gewährleisten, dass Windows Ihr Symbol nur nach unten skalieren sollten, nie nach oben.
Beziehung von Symbolgrößen zum MSIX-Manifest
Wenn Sie sich das MSIX-Manifest (oder AppX) Ihrer App angesehen haben, haben Sie möglicherweise Einträge wie Square44x44Logo und Square150x150Logo bemerkt. Dies sind Basisgrößen, nicht die einzigen Größen, die Ihre App benötigt. Windows verwendet Anzeigeskalenfaktoren, um die tatsächlichen Pixelabmessungen zu bestimmen, die sie zur Laufzeit anfordert. Das Manifest verweist auf einen Basisbilddateinamen (z. B Square44x44Logo.png. ), und Sie stellen präskalierte Varianten mithilfe von Qualifizierern bereit (z. B Square44x44Logo.scale-200.png. ). Windows wählt dann die beste Übereinstimmung für die Anzeigeeinstellungen des Benutzers aus.
Die folgende Tabelle zeigt, welchen tatsächlichen Pixelgrößen jeder Manifesteintrag für jeden Skalierungsfaktor entspricht:
| Manifesteintrag | Basisgröße | 100 % | 125% | 150% | 200% | 250% | 300 % | 400% |
|---|---|---|---|---|---|---|---|---|
| Square44x44Logo | 44 px | 44 px | 55 px | 66 px | 88 px | 110 px | 132 px | 176 px |
| Square150x150Logo | 150 px | 150 px | 188 px | 225 px | 300 px | 375 px | 450 px | 600 px |
| Wide310x150Logo | 310×150 px | 310×150 px | 388×188 px | 465×225 px | 620×300 px | 775×375 px | 930×450 px | 1240×600 px |
| Square310x310Logo | 310 px | 310 px | 388 px | 465 px | 620 px | 775 px | 930 px | 1240 px |
| Square71x71Logo | 71 px | 71 px | 89 px | 107 px | 142 px | 178 px | 213 px | 284 px |
| StoreLogo | 50 px | 50 px | 63 px | 75 px | 100 px | 125 px | 150 px | 200 px |
Das Symbol "App-Liste" unterstützt auch Varianten der Zielgröße (im Abschnitt "App-Symbol" unten aufgeführt), die Windows für Taskleistensymbole, Kontextmenüs und andere UI-Elemente verwendet, bei denen das Symbol ohne Kachelabstand angezeigt wird. Zielgrößenressourcen werden in genauen Pixelabmessungen (16, 24, 32, 48, 256 und anderen) und nicht in Skalierungsfaktoren angegeben.
Tip
Sie müssen nicht jede mögliche Größe erstellen. Stellen Sie mindestens Ressourcen mit 100 %, 200 % und 400 % Skalierung für die Einträge Square44x44Logo und Square150x150Logo sowie die im Abschnitt App-Symbol aufgeführten Varianten in Zielgröße bereit. Windows wählt die nächstgelegene verfügbare Ressource für Zwischenskalenfaktoren (125%, 150%, 250%und 300%).
Das vollständige Manifestschema finden Sie unter VisualElements.
Transparente Hintergründe
Symbole sehen am besten mit einem transparenten Hintergrund aus. Wenn das Branding Ihrer App erfordert, dass Ihr Symbol auf einem Hintergrund plattet wird, ist dies auch in Ordnung. Allerdings müssen Sie einige Themen-Funktionen, die kostenlose transparente Symbole erhalten, neu implementieren. Sie können z. B. eine Version des Symbols Ihrer App bereitstellen, die auf zwei verschiedenen Hintergründen plattet ist, eine besser für ein helles Design und das andere für ein dunkles Design geeignet ist.
Vollständige Liste der Symbole und Variationen
Windows verwendet unterschiedliche Symbolressourcen in verschiedenen UI-Kontexten. Die Nutzung hat sich etwas zwischen Windows 10 und Windows 11 geändert.
In den folgenden Listen sind die spezifischen Dateinamen aufgeführt, die Windows für jedes entsprechende Symbol erwartet.
App-Symbol
In Windows 10 und 11 ist das Symbol "AppList" das primäre Symbol Ihrer App. Sie wird an mehreren Stellen verwendet, einschließlich der Taskleiste, der Start-Pins, der gesamten App-Liste und der Suchergebnisseliste. Windows 11 wählt ein entsprechendes Symbol für die Liste aller Apps basierend auf dem aktuellen Skalierungsfaktor aus, Windows 10 verwendet jedoch bestimmte, explizit definierte Symbole, wenn Sie diese angeben.
Separate Dateien für alle drei Designvariationen (Standard, helles Design, dunkles Design) sind erforderlich, auch wenn das Symbol identisch ist. Wenn Sie diese Dateien nicht angeben, wird Ihr Symbol auf einer Systemsymbolplatte angezeigt, um ein minimales Kontrastverhältnis sicherzustellen.
Zielgröße der App-Liste (erforderlich)
- AppList.targetsize-16.png
- AppList.targetsize-20.png
- AppList.targetsize-24.png
- AppList.targetsize-30.png
- AppList.targetsize-32.png
- AppList.targetsize-36.png
- AppList.targetsize-40.png
- AppList.targetsize-48.png
- AppList.targetsize-60.png
- AppList.targetsize-64.png
- AppList.targetsize-72.png
- AppList.targetsize-80.png
- AppList.targetsize-96.png
- AppList.targetsize-256.png
Dunkles Design (Erforderlich)
- AppList.targetsize-16_altform-unplated.png
- AppList.targetsize-20_altform-unplated.png
- AppList.targetsize-24_altform-unplated.png
- AppList.targetsize-30_altform-unplated.png
- AppList.targetsize-32_altform-unplated.png
- AppList.targetsize-36_altform-unplated.png
- AppList.targetsize-40_altform-unplated.png
- AppList.targetsize-48_altform-unplated.png
- AppList.targetsize-60_altform-unplated.png
- AppList.targetsize-64_altform-unplated.png
- AppList.targetsize-72_altform-unplated.png
- AppList.targetsize-80_altform-unplated.png
- AppList.targetsize-96_altform-unplated.png
- AppList.targetsize-256_altform-unplated.png
Helles Thema (erforderlich)
- AppList.targetsize-16_altform-lightunplated.png
- AppList.targetsize-20_altform-lightunplated.png
- AppList.targetsize-24_altform-lightunplated.png
- AppList.targetsize-30_altform-lightunplated.png
- AppList.targetsize-32_altform-lightunplated.png
- AppList.targetsize-36_altform-lightunplated.png
- AppList.targetsize-40_altform-lightunplated.png
- AppList.targetsize-48_altform-lightunplated.png
- AppList.targetsize-60_altform-lightunplated.png
- AppList.targetsize-64_altform-lightunplated.png
- AppList.targetsize-72_altform-lightunplated.png
- AppList.targetsize-80_altform-lightunplated.png
- AppList.targetsize-96_altform-lightunplated.png
- AppList.targetsize-256_altform-lightunplated.png
App-Listen-Skalierung (Windows 10) (Optional)
- AppList.scale-100.png
- AppList.scale-125.png
- AppList.scale-150.png
- AppList.scale-200.png
- AppList.scale-400.png
Light-Thema (Windows 10) (Optional)
- AppList.scale-100_altform-colorful_theme-light.png
- AppList.scale-125_altform-colorful_theme-light.png
- AppList.scale-150_altform-colorful_theme-light.png
- AppList.scale-200_altform-colorful_theme-light.png
- AppList.scale-400_altform-colorful_theme-light.png
Hinweis
Wenn Sie die obigen Assets targetsize-*-altform-unplated nicht einbeziehen, wird Ihr Symbol auf eine kleinere Größe skaliert und erhält einen unerwünschten Hintergrund hinter dem Symbol in der Taskleiste und auf Start.
Kacheln
Windows 10 unterstützt vier Kachelgrößen: klein, mittel, breit und groß.
Standard-/Dunkles Design (teilweise erforderlich)
- SmallTile.scale-100.png
- SmallTile.scale-125.png
- SmallTile.scale-150.png
- SmallTile.scale-200.png
- SmallTile.scale-400.png
- MedTile.scale-100.png
- MedTile.scale-125.png
- MedTile.scale-150.png
- MedTile.scale-200.png
- MedTile.scale-400.png
- WideTile.scale-100.png
- WideTile.scale-125.png
- WideTile.scale-150.png
- WideTile.scale-200.png
- WideTile.scale-400.png
- LargeTile.scale-100.png
- LargeTile.scale-125.png
- LargeTile.scale-150.png
- LargeTile.scale-200.png
- LargeTile.scale-400.png
Helles Thema (optional)
- SmallTile.scale-100_altform-colorful_theme-light.png
- SmallTile.scale-125_altform-colorful_theme-light.png
- SmallTile.scale-150_altform-colorful_theme-light.png
- SmallTile.scale-200_altform-colorful_theme-light.png
- SmallTile.scale-400_altform-colorful_theme-light.png
- MedTile.scale-100_altform-colorful_theme-light.png
- MedTile.scale-125_altform-colorful_theme-light.png
- MedTile.scale-150_altform-colorful_theme-light.png
- MedTile.scale-200_altform-colorful_theme-light.png
- MedTile.scale-400_altform-colorful_theme-light.png
- WideTile.scale-100_altform-colorful_theme-light.png
- WideTile.scale-125_altform-colorful_theme-light.png
- WideTile.scale-150_altform-colorful_theme-light.png
- WideTile.scale-200_altform-colorful_theme-light.png
- WideTile.scale-400_altform-colorful_theme-light.png
- LargeTile.scale-100_altform-colorful_theme-light.png
- LargeTile.scale-125_altform-colorful_theme-light.png
- LargeTile.scale-150_altform-colorful_theme-light.png
- LargeTile.scale-200_altform-colorful_theme-light.png
- LargeTile.scale-400_altform-colorful_theme-light.png
Hinweis
Windows 11 verwendet keine Kachel-Ressourcen, aber derzeit sind mindestens die Medium-KachelRessourcen zu 100% erforderlich, um eine Veröffentlichung im Microsoft Store zu ermöglichen. Wenn Ihre App mit Windows 10 & 11 kompatibel ist, wird empfohlen, so viele Kachel-Ressourcen wie möglich einzuschließen.
Begrüßungsbildschirm
Die Begrüßungsbildschirme können wie die App-Symbole auch mit hellen und dunklen Themen versehen werden.
Vorgabe
- SplashScreen.scale-100.png
- SplashScreen.scale-125.png
- SplashScreen.scale-150.png
- SplashScreen.scale-200.png
- SplashScreen.scale-400.png
Dunkles Thema (optional)
- SplashScreen.scale-100_altform-colorful_theme-dark.png
- SplashScreen.scale-125_altform-colorful_theme-dark.png
- SplashScreen.scale-150_altform-colorful_theme-dark.png
- SplashScreen.scale-200_altform-colorful_theme-dark.png
- SplashScreen.scale-400_altform-colorful_theme-dark.png
Helles Thema (Optional)
- SplashScreen.scale-100_altform-colorful_theme-light.png
- SplashScreen.scale-125_altform-colorful_theme-light.png
- SplashScreen.scale-150_altform-colorful_theme-light.png
- SplashScreen.scale-200_altform-colorful_theme-light.png
- SplashScreen.scale-400_altform-colorful_theme-light.png
Abzeichenlogo
Badgesymbole werden auf dem Sperrbildschirm von Windows 10 verwendet und sind für die meisten Apps nicht erforderlich.
Windows 10 (optional)
- BadgeLogo.scale-100.png
- BadgeLogo.scale-125.png
- BadgeLogo.scale-150.png
- BadgeLogo.scale-200.png
- BadgeLogo.scale-400.png
Paketlogo (Microsoft Store-Logo)
Diese Ressourcen müssen im Microsoft Store veröffentlicht werden.
Standard-/Dunkles Design (erforderlich)
- StoreLogo.scale-100.png
- StoreLogo.scale-125.png
- StoreLogo.scale-150.png
- StoreLogo.scale-200.png
- StoreLogo.scale-400.png
Helles Thema (optional)
- StoreLogo.scale-100_altform-colorful_theme-light.png
- StoreLogo.scale-125_altform-colorful_theme-light.png
- StoreLogo.scale-150_altform-colorful_theme-light.png
- StoreLogo.scale-200_altform-colorful_theme-light.png
- StoreLogo.scale-400_altform-colorful_theme-light.png
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
Windows developer