Jump to content

Invision Community Blog


Our take on managing successful online communities


4.4: Application manifest and icon management

Who remembers the earlier days of the internet? Back when you popped your logo at the top left of your site and you were largely done?

Invision Community has continually developed to account for all the new services that have been built during our 16 years.

We now have social media sharing images, favicons and more to consider.

Invision Community 4.4 also adds mobile application icons, Safari mask icons and data for an application manifest. Handling of these logos and icons was a prime candidate for improvement in 4.4.

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.

Editing Default - Google Chrome 2018-10-10 10.01.17.png

Adding new options

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.

Multiple share logos

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.

Application icons

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.

Safari mask icon

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").

Application manifest

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.

Icons & Logos - Google Chrome 2018-10-10 10.39.53.png

icons and logos 2.png

icons and logos 3.png

The end result?

Your community can now better convey, automatically, certain details to the myriad of devices out there that may be accessing your site, and you now have much better control over those details. You can more easily fine-tune the "little things" that help paint a complete picture of your web presence, and the groundwork has been laid for bigger and better things in the future as standardization and adoption of PWA functionality improves.

This blog is part of our series introducing new features for Invision Community 4.4.


Comments

Recommended Comments

I like this.

An example of how the safari mask icon is active / hovered upon using #2af689 would be good though so I can see what effect that has. Same for theme / background colour.

Share this comment


Link to comment
Share on other sites
21 hours ago, marklcfc said:

I like this.

An example of how the safari mask icon is active / hovered upon using #2af689 would be good though so I can see what effect that has. Same for theme / background colour.

I didn't create this image, so it's probably not the exact color you're inquiring about, but this gives you an idea of how it works:

demo_silhouette.png

Here's an example of how the theme color may affect a device. Keep in mind that it is up to individual consumers (devices/user agents) how they will use these elements:

https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color

The background color is generally used as the background/splash screen color when launching your site from a saved home screen icon.

https://developers.google.com/web/fundamentals/web-app-manifest/#splash-screen

Remember that each device can decide which elements it will read and support from the manifest, and how it will use those elements.

5 minutes ago, ElliotHM said:

@bfarber

 

Will the SVG support be functional for multiple colours, transparency and animation and or even Windows based apps rather than just "apple" .

The Safari mask icon is a very specific element which requires an SVG. This image is not used anywhere else presently, except for the Safari mask icon. It's not so much about making it "Apple-only", but rather using an SVG here is a requirement of using the feature in general.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

As the Blog notes, we create Microsoft's special "browserconfig.xml" file to better support Windows-based devices as well.

https://technet.microsoft.com/en-us/windows/dn320426(v=vs.60)

It's interesting to note that we can build off of this functionality to better support Windows Live Tiles (where you get live updates of a site right in your start menu, or on your home screen for devices with more enhanced live tile support (XBox for instance).

Share this comment


Link to comment
Share on other sites
23 hours ago, bfarber said:

The Safari mask icon is a very specific element which requires an SVG. This image is not used anywhere else presently, except for the Safari mask icon. It's not so much about making it "Apple-only", but rather using an SVG here is a requirement of using the feature in general.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

As the Blog notes, we create Microsoft's special "browserconfig.xml" file to better support Windows-based devices as well.

https://technet.microsoft.com/en-us/windows/dn320426(v=vs.60)

It's interesting to note that we can build off of this functionality to better support Windows Live Tiles (where you get live updates of a site right in your start menu, or on your home screen for devices with more enhanced live tile support (XBox for instance).

Ahhh so unfortunately this doesn't sound like full SVG support just yet, however I imagine we can build around it? Is there still plans to support / enable SVG files as an alternative for .PNG/.GIF for true scalable quality as well as semi-transparent animations?

Share this comment


Link to comment
Share on other sites

Thanks for this improvement in 4.4, much appreciated. I currently use one of the 'favicon generator'-type sites https://realfavicongenerator.net/ to create the various sized device icons, manifest and browserconfig files etc. Then edit all the image links to cdn.mysite.com where I upload the icons to, and then for IPS I create a custom html template for the themes to add them all to the global template's head section.

Being able to utilise IPS to mange all this is a nice timesaver, as I imagine it will also link into the S3/CDN file settings.

What happens if you need to account for using a different homepage front end CMS like a Wordpress when used together with IPS for forums, gallery etc? Is there much to replicate?

Edited by The Old Man

Share this comment


Link to comment
Share on other sites
7 hours ago, The Old Man said:

Thanks for this improvement in 4.4, much appreciated. I currently use one of the 'favicon generator'-type sites https://realfavicongenerator.net/ to create the various sized device icons, manifest and browserconfig files etc. Then edit all the image links to cdn.mysite.com where I upload the icons to, and then for IPS I create a custom html template for the themes to add them all to the global template's head section.

Being able to utilise IPS to mange all this is a nice timesaver, as I imagine it will also link into the S3/CDN file settings.

What happens if you need to account for using a different homepage front end CMS like a Wordpress when used together with IPS for forums, gallery etc? Is there much to replicate?

I'm not sure I understand your last question. Your other software may (or may not) provide similar options, which it will "inform" browsers of as appropriate. Most of these details are output in the HTML page source for user agents to read and pick up on, and our software will do just that.

If you are using two different pieces of software, ultimately you may just need to add the information in two different places.

Share this comment


Link to comment
Share on other sites
23 hours ago, Steve Bullman said:

Will it be possible for a different web app icon to be used for different parts of the site, ie for a specific app?

No, but typically you use a "brand" icon to represent your site, and not individual pieces of your site.

Share this comment


Link to comment
Share on other sites
Quote

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.

For this to work the IPS will have to also create the Service Works.

I have this feature working for almost a year.

appEBR.thumb.png.d331a534a9d2a9ec1af6a3c3fb8d791e.pngappEBR2.thumb.png.81121548d3f79da8adc9e1ad7f38ca1c.png

Share this comment


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  Ask A Question ×