4.4: Application manifest and icon management

Moving our current options

Step one for improving our handling of these images was to move our current options out of themes and to allow them to be managed suite-wide from a single area. You can still upload a logo image per-theme (which shows in the header area), but the rest of the options have now been relocated to a new area: Customization > Appearance > Icons & Logos.

After giving favicon and share logo management its own dedicated area, we took a look at enhancing the configuration options made available through the interface without requiring theme template edits.

You can now upload multiple share logos. If you elect to upload more than one share logo, Facebook and similar sites will generally either show a carousel to allow you to choose which logo to use when sharing, or simply use the first image referenced.

You can now upload an image to represent your website which will be used to generate the "home screen" icons for iPhones and Androids automatically. Uploading a single image will result in several different copies of the image (in different dimensions) being generated, and mobile devices will automatically choose the best option from the list as needed.

You can also now upload a Safari Mask icon, which is used to represent your website in certain areas on Apple computers (such as on the "touchbar" of certain keyboards). This image must be an SVG image with a transparent background, and all vectors must be 100% black.

Additionally, you can specify the mask color which is used to offset your image when necessary (e.g. to represent it as "selected" or "active").

In order for devices to support the application icons that you upload, a file known as a web manifest must be generated and delivered to the browser. This now happens automatically, using details and icons specified in the AdminCP. Certain details, however, can be configured explicitly from the Icons & Logos page:

• Short name
  This is a short name to represent your site in areas with limited screen space, such as below your application icon on a mobile phone home screen.
• Site name
  This is the name of the site. The "Website name" setting is automatically used if you do not explicitly override it when configuring the manifest.
• Description
  A short description of your site
• Theme color
  You can choose a (single) color to represent the general theme of the site. This color may be used by devices in areas such as the address bar background.
• Background color
  You can also choose a (single) color to use as the background color for your site when the application is launched from a shortcut saved to the user's device home screen.
• Display mode
  Finally, you can specify the display mode your site should launch in.

For our more astute designers and developers, you may have already realized that generating the manifest file lays the groundwork for future PWA (Progressive Web App) development and support. Additionally, some Android devices will automatically prompt users to add your website to their home screen now that a manifest file is generated by the site.

Oh, and for the sake of completeness, we also generate the special browserconfig.xml file that Microsoft products (including Microsoft Edge, Internet Explorer, X-Box, and Microsoft-based mobile devices) look for when pinning sites and generating live tiles. There are no additional configuration options for this file - everything is automatically generated from the aforementioned options.

The end result?