Re: [whatwg] Icon mask and theme color

Consolidating replies to limit spam.
> On Jun 16, 2015, at 4:37 AM, Nils Dagsson Moskopp <nils@dieweltistgarnichtso.net> wrote:
> 
> Maciej Stachowiak <mjs@apple.com> writes:
> 
>> […]
>> 
>> Where do we go from here:
>> (1) We could add "mask" or something like it to the standard, and change browsers to ignore mask icons in contexts where they are looking for a regular icon.
>> 
>> (2) We could change to a new rel type for mask icons, such as rel=mask-icon, but keep theme-color as the source of the color, with the possibility of darkening light colors used to make light colors viable.
>> 
>> (3) We could change to a new rel type for mask icons, such as rel=mask-icon, and give it a color attribute to be used specifically for the icon.
[…]

> 
> (4) Set a MIME type like application/vnd.apple.svg-mask+xml. This might
> prevent breakage in other browsers and allow opt-in without introducing
> new attributes. The source of the theme color could then be in the file
> or in the theme color meta value.

I think inventing a new MIME type or a new file format would be less elegant than a new rel value, and it would be harder for authors to adopt correctly, so I think this is dominated by (2)/(3). At least, I can’t think of a way in which it would be better.

> 
> (5) Use the shape of the path in the SVG icon as a mask and retain the
> theme color meta value. Why isn't this done? One could have a properly
> colored icon for one purpose and use the outline of the same icon for
> the flat design staff.

We could change to considering only the alpha channel of the mask icon instead of both mask and luminance. We did it this way because we already had code to treat SVG as a mask for the <mask>, and it seemed better to be consistent. Note though, that even if we went alpha-only, it might not be possible to use the same file for a mask icon and a full-color icon and get good results, for certain effects. I believe others on the thread have explained this already, but another obvious example is Facebook’s normal favicon, which is a white lowercase f on a blue rounded rectangle. It’s important in the color version for the white to be white, not transparent, but if both the white and blue are solid, the mask version is just a roundrect.


On Jun 16, 2015, at 1:48 PM, Ben Francis <bfrancis@mozilla.com> wrote:

> On Mon, Jun 15, 2015 at 8:00 PM, Maciej Stachowiak <mjs@apple.com <mailto:mjs@apple.com>> wrote:
> First: it looks like we neglected to send our proposal for this ahead of our preview release. It’s now been sent belatedly. We regret the error.
> 
> Second: we’re definitely open to changing this if there’s consensus for a different syntax.
> 
> Just putting this out there, did you consider using the W3C web manifest [1] for the pinned sites feature?

We looked at it, but we didn’t want to require a whole new format for the feature to work at all. I wouldn’t rule out using it in the future as a possible alternate source of metadata for pinned tabs (or for websites saved to the home screen on iOS), but I can’t make any commitments on this.

In any case, web manifest would still require us to figure out a way to specify mask icons, and source of color for the mask icon.

[…]

> We are still discussing the properties of an "icon" object in that spec and it already has a background_color member. We could explore adding something there that fits Apple's requirements? Perhaps this could be used to deprecate the proprietary apple-touch-icon as well?
> 
> If that sounds interesting to you then please feel free to file an issue on GitHub https://github.com/w3c/manifest/issues <https://github.com/w3c/manifest/issues>

The color for the mask icon is a foreground color, not a background color. I’m not yet sure whether it mask icons need a dedicated color or could just use the theme color.


> On Jun 15, 2015, at 12:53 PM, Kornel Lesiński <kornel@geekhood.net> wrote:
> 
> Another suggestion:
> 
> (4) Don't require the mask icon to be 100% black and read the color from the icon itself. 
> 
> The mask flag would indicate that shape of the icon is distinctive enough, i.e. alpha channel of the icon can be used without the color channels, but wouldn't forbid use of color channels.
> 
> If in Safari you'd like to enforce use of only a single solid theme color for the icon, then you can compute the theme color by averaging colors of all non-transparent pixels of the mask icon, and use that as the icon's theme color.

We do have a requirement to have the mask icons render with a single color. I don’t think the approach suggested here is very good. Color averaging would not be very predictable in its results and could be unstable to changes in the icon if it’s actually multi-color. One thing we could do is move the color specification from the webpage to a <meta> tag inside the SVG or something, but I’m not sure that’s a huge improvement either.

Regards,
Maciej

Received on Wednesday, 17 June 2015 06:22:17 UTC