Create a Microsoft Teams app package

You need an app package however you plan to distribute your Microsoft Teams app. A valid package is a ZIP file that contains the following:

  • App manifest: Describes how your app is configured, including its capabilities, required resources, and other important attributes.
  • App icons: Each package requires a color and outline icon for your app.

Teams doesn't host your app

When a user installs your app in Teams, they install an app package that contains a only configuration file (also known as an app manifest) and your app's icons. The app's logic and data storage are hosted elsewhere, such on localhost during development and Azure Web Services. Teams accesses these resources via HTTPS.

Illustration showing app hosting for Teams app

App manifest

Your app manifest file must be at the top level of the package with the name manifest.json.

When publishing to the Teams store, make sure your manifest references to the latest schema.

App icons

Your app package must include two .png versions of your app icon: A color and outline version.

Note

If your app has a bot or message extension, your icons also will be included in your Microsoft Azure Bot Service registration.

For your app to pass Teams store review, these icons must meet the following size requirements.

Color icon

The color version of your icon displays in most Teams scenarios and must be 192x192 pixels. Your icon symbol (96x96 pixels) can be any color, but it must sit on a solid or fully transparent square background.

Teams automatically crops your icon to display a square with rounded corners in multiple scenarios and a hexagonal shape in bot scenarios. To crop the symbol without losing any detail, include 48 pixels of padding around your symbol.

Teams color icon and design guidance.

Outline icon

An outline icon displays in two scenarios:

  • When your app is in use and “hoisted” on the app bar on the left side of Teams.
  • When a user pins your app's message extension.

The icon must be 32x32 pixels. It can be white with a transparent background or transparent with a white background (no other colors are permitted). The outline icon should not have any extra padding around the symbol.

Teams outline icon design guidance.

Best practices

Illustration showing how to design your app icons.

Do: Follow the precise outline icon guidelines

The RGB values of white used in your icon must be Red: 255, Green: 255, Blue: 255. All other parts of the outline icon must be fully transparent, with the alpha channel set to 0.

Illustration showing how not to design your app icons.

Don't: Crop in a circular or rounded square shape

The color icon submitted in your app package must be square. Don’t round the corners of your icon. Teams automatically adjusts the corner radius.

Don't: Copy other brands

Your icons must not mimic any copyrighted products that you don't own. For example, a design similar to a Microsoft product or brand.

Examples

Here's how app icons appear in different Teams capabilities and contexts.

Personal app

Example showing how an app icon looks in a personal app.

Bot (channel)

Example showing how an app icon looks on a bot inside channel.

Message extension

<alt text>

Next step

Choose how you plan to distribute your app:

See also

Manage your apps with the Developer Portal for Microsoft Teams