Freigeben über

Erstellen des Symbols für Ihre Windows App

  • Artikel

Ein Diagramm, das mehrere Symbolpositionen in Windows 11 zeigt.

Nachdem Sie das Symbol Ihrer App entworfen haben, müssen Sie die Symboldateien erstellen. Da Windows mehrere Themen, Bildschirmauflösungen und Skalierungsfaktoren unterstützt, sollten Sie mehrere Versionen Ihres Symbols bereitstellen, um sicherzustellen, dass es auf jedem Gerät und in jeder Größe gut aussieht.

Symbolgrößen (WPF, UWP, WinUI)

Windows zeigt Ihr App-Symbol in verschiedenen Größen an, je nachdem, wo das Symbol angezeigt wird und wie der Benutzer die Skalierung der Anzeige eingestellt hat. In der folgenden Tabelle sind alle möglichen Größen aufgeführt, die Windows zum Anzeigen Ihres Symbols verwenden kann.

Symbolgrößen (Win32)

Windows ICO-Dateien gibt es schon lange. 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 exakten Größe gesucht. Wenn es keine genaue Übereinstimmung gibt, wird nach der nächsten Größe nach oben gesucht und verkleinert. Wenn Sie mehr Symbolgrößen in Ihre App einbinden, bedeutet dies, dass Windows häufiger eine pixelgenaue Übereinstimmung findet und die Anzahl der Skalierungen reduziert, die auf skalierte Symbole angewendet werden.

Skalierungsfaktor für Windows 11 100 %% 125% 150% 200 % 250% 300 % 400 %
Kontext-Menü, Titelleiste, Infobereich 16px 20px 24px 32px 40px 48px 64px
Taskleiste, Suchergebnisse, Liste aller Apps starten 24px 30px 36px 48px 60px 72px 96px
Start-Pins 32px 40px 48px 64px 80px 96px 256px

Hinweis

Apps sollten mindestens Folgendes aufweisen: 16x16, 24x24, 32x32, 48x48 und 256x256. Dies deckt die gängigsten Symbolgrößen ab und stellt durch die Bereitstellung eines 256px-Symbols sicher, dass Windows Ihr Symbol immer nur nach unten skaliert und niemals nach oben.

Transparente Hintergründe

Symbole sehen am besten mit einem transparenten Hintergrund aus. Wenn das Branding Ihrer App erfordert, dass Ihr Symbol auf einem Hintergrund platziert wird, ist das auch in Ordnung. Allerdings müssen Sie einige Themen-Funktionen, die kostenlose transparente Symbole erhalten, neu implementieren. Sie könnten zum Beispiel eine Version Ihres App-Symbols auf zwei verschiedenen Hintergründen anbieten, von denen einer besser zu einem hellen und der andere zu einem dunklen Thema passt.

Vollständige Liste der Symbole und Variationen

Windows verwendet unterschiedliche Symbolressourcen in verschiedenen UI-Kontexten. Die Verwendung hat sich zwischen Windows 10 und Windows 11 etwas geändert.

Die nachstehenden Listen definieren die spezifischen Dateinamen, 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. Es wird an mehreren Stellen verwendet, einschließlich der Taskleiste, der Start-Pins, der gesamten App-Liste und der Liste der Suchergebnisse. 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 zur Verfügung stellen, wird Ihr Symbol auf einer System-Symbolplatte erscheinen, um ein minimales Kontrastverhältnis zu gewährleisten.

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 Design (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-Listenskalierung (Windows 10) (Option)

  • AppList.scale-100.png
  • AppList.scale-125.png
  • AppList.scale-150.png
  • AppList.scale-200.png
  • AppList.scale-400.png

Helles Design (Windows 10) (Option)

  • 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 Design (Option)

  • 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 aufzunehmen.

Begrüßungsbildschirm

Die Begrüßungsbildschirme können wie die App-Symbole auch mit hellen und dunklen Themen versehen werden.

Standard

  • SplashScreen.scale-100.png
  • SplashScreen.scale-125.png
  • SplashScreen.scale-150.png
  • SplashScreen.scale-200.png
  • SplashScreen.scale-400.png

Dunkles Design (Option)

  • 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 Design (Option)

  • 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

Badgesymbole werden auf dem Sperrbildschirm von Windows 10 verwendet und sind für die meisten Apps nicht erforderlich.

Windows 10 (Option)

  • BadgeLogo.scale-100.png
  • BadgeLogo.scale-125.png
  • BadgeLogo.scale-150.png
  • BadgeLogo.scale-200.png
  • BadgeLogo.scale-400.png

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 Design (Option)

  • 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