Your Music Service Logo is displayed in the Music Services list on Sonos apps. See the Listing your music service in the Service Catalog tutorial for examples of logos in the user interface and details about where to reference these icons in the Version Manager. You can use images or text in your service logo. See the details below for each format.
SONOS APPs
Service logos are displayed in different sizes and required in different formats depending on your app. See the Digital Asset Guideline Overview for a list of these apps.
Image Formats
Download the Service Logo and Custom Browse Icon Templates for sample service logo templates. See the Digital Asset Guideline Overview for details on how you should save SVG icons for proper display on Sonos apps.
While you can submit images in PNG or SVG format, SVG format is more easily scalable to different sizes that can be used by prospective Sonos apps in the future. Note that the desktop apps and Sonos CONTROL (CR200) require images in PNG format. See the section below for details.
Windows and Mac OS Desktop APPs & SONOS CONTROL
For the Windows (WDCR) and Mac OS (MDCR) desktop apps and the Sonos CONTROL, provide circular logos in PNG format in the following dimensions:
| App | Dimensions |
|---|---|
| MDCR, WDCR | 18x18 |
| MDCR, WDCR | 24x24 |
| MDCR, WDCR, Sonos CONTROL | 48x48 |
| MDCR, WDCR | 72x72 |
Please provide all dimensions above as some apps use different-sized images in different places. PNG images should have a density of 72 DPI, see the Digital Asset Guideline Overview for details.
Android and ios APPs
For iOS (ICR) and Android Tablets (ACR HDPI) prior to build 26.1-74030, you must also provide round PNG-formatted logos in the sizes below. These are the same style of logos as those used for desktop apps. See the Windows, Mac OS, and Sonos CONTROL Service Logos section below for details.
| App | Dimensions |
|---|---|
| ACR/ICR | 36x36 |
| ACR HDPI | 54x54 |
For build 26.1-74030 and above, provide a square logo in the following dimensions for Android (ACR) and iOS (ICR) apps. Please provide SVGs for high-resolution apps, and PNGs if you support older apps, as mentioned below:
| Dimensions (PNG format)* | Dimensions (SVG format) |
|---|---|
| 20x20 | |
| 40x40 | 40x40 |
| 80x80 | |
| 112x112 | |
| 200x200 | |
| 400x400 | 400x400 |
iOS and Android service logos
Use the color scheme and layout guidelines below when creating service logos for iOS and Android apps. Use a color that is the primary color for your brand with a solid fill and no gradients for the logo background. Use a simple shape or text with a white (hex value #ffffff) or secondary color (or colors) for your brand, with a solid fill and no gradients for the logo. If using a white fill for the background color, add a 2px color stroke edge to the inside. See below for illustrations.
See the Digital Asset Guideline Overview for details on how you should save logos for proper display on Sonos apps.
SVG format service logo for ios and android APPs
PNG FORMAT SERVICE LOGO FOR IOS AND ANDROID APPS
Windows, Mac 0s, and SONOS CONTROL Service Logos
Download the Service Logo Templates (Legacy Controllers) Adobe Photoshop templates to create service logos for Windows and Mac OS desktop apps and the Sonos CONTROL as well as iOS (ICR) and Android Tablets (ACR HDPI) prior to build 26.1-74030. Use circular icons in the following sizes: 18, 24, 36, 48, 54, and 72 pixels. See the images below for an illustration.
Follow the steps below to add your artwork:
- Open the template using Adobe Photoshop.
- Copy your artwork.
- Select the mask layer below the "Your art here" layer. See below.
- Paste your artwork.
- Hide or delete the "Your art here" layer.
You can now select your artwork and scale it to fit the artwork mask. For example, choose Edit > Free Transform to scale it (CTRL-T on Windows or Command-T on Mac OS). If you use an image editor other than Photoshop, be sure that the icon takes up the full canvas. If your icon is aliased, leave no more than 1px of clear space around the icon.
table of service logo and custom browse icon templates
The table below lists the sample service logo files in the Service Logo and Custom Browse Icon Templates file as well as the maximum logo and icon size and background size. Once extracted, the files will be in folders for Adobe Illustrator (EPS) or Photoshop (PSD). Use the Illustrator EPS files to generate SVG output files and the Photoshop PSD files to generate PNG output files.
The table lists the file name, format, the output format to use when it is saved or exported, the maximum logo size in pixels (px), and the background size. The sample files with “logo” in their names are examples of image-based logos. Files named “logotype” are examples of text-based logos.
| Logo background size (px) |
Maximum logo size (px) |
Export as SVG (image) |
Export as SVG (text) |
Export as PNG (image) |
Export as PNG (text) |
|---|---|---|---|---|---|
| 20x20 | logo-20x20.psd | logotype-20x20.eps | |||
| 40x40 | 30x30 | logo-40x40.eps | logotype-40x40.eps | logo-40x40.psd | logotype-40x40.psd |
| 80x80 | 48x48 | logo-80x80.psd | logotype-80x80.psd | ||
| 112x112 | 68x68 | logo-112x112.psd | logotype-112x112.psd | ||
| 200x200 | 120x120 | logo-200x200.psd | logotype-200x200.psd | ||
| 400x400 | 240x240 | logo-400x400.eps | logotype-400x400.eps | logo-400x400.psd | logotype-400x400.psd |
