Re: [whatwg] Icon mask and theme color

[Anne van Kesteren]

On Mon, Sep 14, 2015 at 12:11 AM, Karl Dubost  wrote:
> Nicolas Hoizey spotted on Apple forums and added a comment on the bug
>
>> The markup changed in Developer Seed 3 and Public Beta 1
>> to simplify and have better backwards compatibility.
>> Use the following markup instead:
>> 

This is now https://github.com/whatwg/html/issues/110.


-- 
https://annevankesteren.nl/

Re: [whatwg] Icon mask and theme color

[Karl Dubost]

Followup on this.

Le 16 juin 2015 à 02:33, Edward O'Connor  a écrit :
> That is why we recommend authors put  rel=icon mask> first—so that the existing tie-breaking behavior results
> in the legacy favicon being chosen.

Nicolas Hoizey spotted on Apple forums and added a comment on the bug

> The markup changed in Developer Seed 3 and Public Beta 1
> to simplify and have better backwards compatibility.
> Use the following markup instead:
> 


[1]: https://forums.developer.apple.com/thread/4615
[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1174589#c7


--
Karl Dubost 🐄
http://www.la-grange.net/karl/

Re: [whatwg] Icon mask and theme color

[Tobie Langel]

On Thu, Jun 18, 2015, at 19:19, Edward O'Connor wrote:
> Maciej replied:
> > I find this use case pretty compelling. There’s no reasonable set of
> > processing steps that could get you salmon pink for use as a
> > background, but black for use as a foreground. I think this is
> > compelling evidence that it needs to be at least possible to specify a
> > mask icon color relative to the theme color.
> 
> Yeah, I agree. I wish we had a time machine to rename theme-color to
> theme-background-color! :)

Allow me to toot my own horn:
https://lists.w3.org/Archives/Public/public-whatwg-archive/2014Jun/0144.html

--tobie

Re: [whatwg] Icon mask and theme color

[Anne van Kesteren]

On Thu, Jun 18, 2015 at 7:19 PM, Edward O'Connor  wrote:
> On the other hand,  seems like
> it should Just Work™.

I guess we could add support for named colors to  too.


-- 
https://annevankesteren.nl/

Re: [whatwg] Icon mask and theme color

[Edward O'Connor]

Hi,

Kornel wrote:
 Safari[…] uses `theme-color` for foreground color of favicons of
 pinned tabs, but other browsers use `theme-color` for background
 colors.

I replied:
>>> Well,  is not specced as speficially a
>>> foreground or background color; it's a color that user agents may
>>> use in any number of ways to customize their UI when displaying a
>>> web page. Safari's use of theme-color for pinned tabs is consistent
>>> with its definition. [1]

Kornel raised the FT's use of theme-color:
>> Financial Times' theme color is "salmon pink" (#fff1e0), but FT's
>> logo must use black letters.

Maciej replied:
> I find this use case pretty compelling. There’s no reasonable set of
> processing steps that could get you salmon pink for use as a
> background, but black for use as a foreground. I think this is
> compelling evidence that it needs to be at least possible to specify a
> mask icon color relative to the theme color.

Yeah, I agree. I wish we had a time machine to rename theme-color to
theme-background-color! :)

> (A.2) Add an attribute to  specifically for use in specifying
> the color for that icon, e.g.  color=lightred>.

I like this option. I suspect it's better than specifying the color in
the SVG file itself. Consider the top-level tabs of bbc.co.uk (News,
Sport, Weather, etc.) They each have a different dominant theme color
(red for news, yellow for sport, etc.) but you can easily imagine them
wanting to share the same mask icon.

Anne wrote:
> This seems reasonable to me too. Though perhaps color="" should share
> parsing with ? More restrictive, but does not allow
> transparency either, which CSS/-like parsing would allow for.

There are three options I can see for parsing the color:

* rules for parsing simple colour values (like )
* rules for parsing a legacy colour value (like )
* parsed as a CSS  value (like in the canvas API)

I generally don't like the idea of adding new features that use weird
legacy parsing rules, so I'm inclined to agree that we should use the
rules for parsing simple colour values.

On the other hand,  seems like
it should Just Work™.

IIRC we don't currently have any cases in HTML where attribute values
get parsed as CSS s do, so I'm reluctant to go that route here.


Ted

Re: [whatwg] Icon mask and theme color

[Tab Atkins Jr.]

On Wed, Jun 17, 2015 at 5:16 PM, Karl Dubost  wrote:
> Tab,
>
> (summary: let's put the information inside the SVG file, more below)
>
> Le 18 juin 2015 à 08:41, Tab Atkins Jr.  a écrit :
>> better than color averaging.  Averaging seems like it would
>> rarely produce a reasonable color in any multi-color icon,
>
> And we will certainly create rage into Marketing/Communications departments.
>
>> Dominant/first color would at least give you one of the brand colors.
>
> Better, not necessary the best.
> Because of the following reasons:
>
> 1. these icons are specific to the "mask" system.
> 2. SVG format is mandatory [1]
>
> Why not
> * giving more power to the designers,
> * respecting the people in charge of branding,
> * and reducing the source of confusions (people managing the markup != people 
> designing icons)
>
> by including **inside the SVG** the color requirements.

Because having it be determined automatically is simpler and more
likely to give good results broadly.  (This isn't an argument against
having it optionally determined by a specific metadata, of course,
just an argument that *in the absence of more specific information* we
should default to something reasonable from the outside.)

> 
>   http://www.w3.org/ns/@@@something@@";>
>   
>   
>   
> 
>
> (better syntax, naming, unicorns are welcome, but that's not currently the 
> point)
>
> [1]: 
> https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20

SVGWG isn't adding any new namespaces to SVG.  We've discussed in the
WG just adding a  element to SVG; that would be
sufficient for this kind of thing.

~TJ

Re: [whatwg] Icon mask and theme color

[Karl Dubost]

Tab,

(summary: let's put the information inside the SVG file, more below)

Le 18 juin 2015 à 08:41, Tab Atkins Jr.  a écrit :
> better than color averaging.  Averaging seems like it would
> rarely produce a reasonable color in any multi-color icon,

And we will certainly create rage into Marketing/Communications departments.

> Dominant/first color would at least give you one of the brand colors.

Better, not necessary the best.
Because of the following reasons:

1. these icons are specific to the "mask" system.
2. SVG format is mandatory [1]

Why not
* giving more power to the designers,
* respecting the people in charge of branding,
* and reducing the source of confusions (people managing the markup != people 
designing icons)

by including **inside the SVG** the color requirements.


  http://www.w3.org/ns/@@@something@@";>
  
  
  


(better syntax, naming, unicorns are welcome, but that's not currently the 
point)

[1]: 
https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20

--
Karl Dubost 🐄
http://www.la-grange.net/karl/

Re: [whatwg] Icon mask and theme color

[Tab Atkins Jr.]

On Tue, Jun 16, 2015 at 11:51 PM, Smylers  wrote:
> Maciej Stachowiak writes:
>> 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.
>
> No, but colour-averaging would only be a fallback to get _some_ colour
> in the situation where the developer failed to follow guidelines and put
> multiple colours in their mask image.
>
> Again, consider Twitter: if they have an icon which already is a solid
> shape of the correct colour (so it can be used as a colour icon, too),
> why should they have to specify that colour a second time in their HTML?
> You already know what the colour is, from the icon itself.

*If* we detect the color from the icon (which I don't think is a bad
idea), using dominant color or first color (as Maciej argued) does
seem better than color averaging.  Averaging seems like it would
rarely produce a reasonable color in any multi-color icon, as it won't
produce any of the actual brand colors (and "how to average" is an
open question; many answers, like the obvious naive RGB averaging,
give terrible results in lots of cases).  Dominant/first color would
at least give you one of the brand colors.

And for single-color icons, dominant/first gives the same results as
averaging, so it's fine there.

~TJ

Re: [whatwg] Icon mask and theme color

[Smylers]

Maciej Stachowiak writes:

> > On Jun 16, 2015, at 4:37 AM, Nils Dagsson Moskopp
> >  wrote:
> > 
> > (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. ... 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.

Sure — for the best results a site may want separate icons. But the
recent threads have been largely prompted by sites inadvertently serving
suboptimal icons, so we also need to consider the behaviour when they
make a mistake, not just the ideal case.

And even for the ideal case, a single icon may suffice for some sites.
Twitter, for example, with a solid blue bird shape as the colour icon,
which could also work as a mask. That _some_ sites would require two
icons doesn't seem like a reason to impose that burden on _all_ sites.

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

Yep, the ideal colour version wouldn't work as a mask. But t'other way
round, the mask could work as an acceptable (albeit not ideal) colour
icon. Currently when the mask is inadvertently used as the ‘colour’
icon, it has to be all black. But with Nils's suggested change above,
the mask could use Facebook blue instead of black; the masking effect
would be the same, but if the mask ends up being interpreted as as a
colour icon, it then at least has some colour in it.

> > On Jun 15, 2015, at 12:53 PM, Kornel Lesiński 
> > wrote:
> > 
> > (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.

No, but colour-averaging would only be a fallback to get _some_ colour
in the situation where the developer failed to follow guidelines and put
multiple colours in their mask image.

Again, consider Twitter: if they have an icon which already is a solid
shape of the correct colour (so it can be used as a colour icon, too),
why should they have to specify that colour a second time in their HTML?
You already know what the colour is, from the icon itself.

Smylers
-- 
http://twitter.com/Smylers2

Re: [whatwg] Icon mask and theme color

[Maciej Stachowiak]

Consolidating replies to limit spam.
> On Jun 16, 2015, at 4:37 AM, Nils Dagsson Moskopp 
>  wrote:
> 
> Maciej Stachowiak  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 , 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  wrote:

> On Mon, Jun 15, 2015 at 8:00 PM, Maciej Stachowiak  > 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 
> 

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  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  tag inside the SVG or something, but 
I’m not sure that’s a huge improvement either.

Regards,
Maciej

Re: [whatwg] Icon mask and theme color

[Tab Atkins Jr.]

On Mon, Jun 15, 2015 at 12:00 PM, Maciej Stachowiak  wrote:
> For similar reasons, it seemed better to reuse the existing theme-color meta 
> (which gives license to darken or lighten the color as needed).

Agreed; along with Ted's observation that theme-color hits at least
the 80/20 use-case, I don't think we need anything new for colors
here.  UAs SHOULD look at the lightness of the theme-color and make
adjustments as appropriate.  (Tho only if necessary - Twitter blue,
for example, should stay unless it's really bad. Icons don't need to
meet the same a11y contrast guidelines as text, I wouldn't think,
giving you a lot of latitude to keep the specified color exactly in
most circumstances.)

Re: [whatwg] Icon mask and theme color

[Jasper St. Pierre]

On Tue, Jun 16, 2015 at 4:37 AM, Nils Dagsson Moskopp
 wrote:

[...]

> (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.

Because colorful icons tend to be mostly squares with the color
defining the outline. GMail would want a stylized "M", not a white
rectangle. YouTube would probably want a play button, not a rounded
rectangle. Going through your bookmarks, I imagine you can come up
with other examples.

> --
> Nils Dagsson Moskopp // erlehmann
> 



-- 
  Jasper

Re: [whatwg] Icon mask and theme color

[Nils Dagsson Moskopp]

Maciej Stachowiak  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.
>
>
> We don’t have a strong principle on this, and it’s not too late to change 
> before shipping the release version of Safari 9. We welcome input on which of 
> these would be best, or whether something else entirely is better.

(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.

(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.

-- 
Nils Dagsson Moskopp // erlehmann

Re: [whatwg] Icon mask and theme color

[Maciej Stachowiak]

> On Jun 15, 2015, at 3:27 AM, Anne van Kesteren  wrote:
> 
> On Mon, Jun 15, 2015 at 12:18 PM, Kornel Lesiński  wrote:
>> The new Safari is still only a preview, so I hope Apple will switch to a 
>> better solution.
> 
> It would be great if we could get some feedback from Ted & colleagues
> on what the thinking here was.

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.

Our original thinking on this: rel=icon is intended to support selection from 
multiple formats and sizes. It seemed natural to extend this to the notion of a 
monochrome icon that’s intended to be recolored. Before deploying the feature, 
we thought it would be cleaner to extend rel=icon than to invent a new rel 
value. (There’s already the legacy -apple-touch-icon value with in theory could 
be obsoleted by rel=icon with the appropriate size). For similar reasons, it 
seemed better to reuse the existing theme-color meta (which gives license to 
darken or lighten the color as needed).

The nature of the problem: to avoid breaking the regular favicon, both in 
Safari and in other browsers, sites need to make their regular favicon explicit 
with a rel=icon link (instead of relying on favicon.ico), and need to put the 
mask icon first instead of last in the list of icon links. We thought clear 
advice to do this, plus the fact that breakage should be obvious, would limit 
the scope of the error and would lead sites to fix it promptly. That doesn’t 
seem to be happening, at least yet. We noticed this problem internally even 
before shipping (working with some sites to get mask icons up before release), 
but there was internal debate about whether the problem would shrink or grow 
over time.


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.


We don’t have a strong principle on this, and it’s not too late to change 
before shipping the release version of Safari 9. We welcome input on which of 
these would be best, or whether something else entirely is better.

Sorry again for not bringing this up before the preview release that included 
this feature.


Regards,
Maciej

Re: [whatwg] Icon mask and theme color

[Edward O'Connor]

Hi Anne,

You wrote:

>> Our proposal is simply to add mask="" to this list of advisory
>> attributes that are used to determine an icon's appropriateness here.
>> User agents that don't understand mask="" should continue to pick the
>> most appropriate icon given the other attributes. If there is a tie,
>> the last  wins. That is why we recommend authors put
>>  first—so that the existing tie-breaking behavior
>> results in the legacy favicon being chosen.
>
> I think the only problem with this advice is that it lacks the bit
> where you need to list  explicitly
> (and last) once you add a  entry.

Fair point. Even though we've all been trying to move people away from
the well-known /favicon.ico URL to  for years, I guess we
need to keep saying it. :)

Re: [whatwg] Icon mask and theme color

[Anne van Kesteren]

On Mon, Jun 15, 2015 at 7:33 PM, Edward O'Connor  wrote:
> Our proposal is simply to add mask="" to this list of advisory
> attributes that are used to determine an icon's appropriateness here.
> User agents that don't understand mask="" should continue to pick the
> most appropriate icon given the other attributes. If there is a tie, the
> last  wins. That is why we recommend authors put  rel=icon mask> first—so that the existing tie-breaking behavior results
> in the legacy favicon being chosen.

I think the only problem with this advice is that it lacks the bit
where you need to list  explicitly
(and last) once you add a  entry. That seems to be
the reason why Twitter is now black rather than light blue in Firefox.


-- 
https://annevankesteren.nl/

Re: [whatwg] Icon mask and theme color

[Edward O'Connor]

Hi all,

Kornel wrote:

> Safari[…] uses `theme-color` for foreground color of favicons of
> pinned tabs, but other browsers use `theme-color` for background
> colors.

Well,  is not specced as speficially a foreground
or background color; it's a color that user agents may use in any number
of ways to customize their UI when displaying a web page. Safari's use
of theme-color for pinned tabs is consistent with its definition. [1]

> This makes it impossible to have a light theme color that fits
> Chrome's background and a dark pinned icon color that suits Safari[…]

UAs are allowed to automatically adjust the theme color for different
uses, which is intended to address this issue (again, [1]):

>> When using the page's "theme color", user agents MAY adjust the color
>> in UA-defined ways to make it more suitable for particular uses. For
>> example, if a UA intends to use the "theme color" as a background and
>> display white text over it, it may use a darker variant of the "theme
>> color" for that purpose, to ensure adequate contrast.

I think I agree with you that sites should be able to provide more than
one color. That said, I suspect one color hits the 80/20 point and maybe
we shouldn't overthink it.

> Additionally Apple introduced a `mask` attribute on the link element
> that is merely modifying the link relationship, but in a way that is
> incompatible with other browsers.

It's compatble with other browsers and the spec of . I'll
start a new thread with our proposal in a sec. More on compat below.

Daniel wrote:

> Apple suggests that these new elements 'should be placed before other
>  elements to avoid compatibility issues' -- if sites
> follow this guideline, it should make other browsers ignore the markup
> and honor the final "real" favicon.

When there are multiple s specified, here's what the spec
currently says user agents must do [2]:

>> If multiple icons are provided, the user agent must select the most
>> appropriate icon according to the type, media, and sizes attributes.
>> If there are multiple equally appropriate icons, user agents must use
>> the last one declared in tree order at the time that the user agent
>> collected the list of icons.

Our proposal is simply to add mask="" to this list of advisory
attributes that are used to determine an icon's appropriateness here.
User agents that don't understand mask="" should continue to pick the
most appropriate icon given the other attributes. If there is a tie, the
last  wins. That is why we recommend authors put  first—so that the existing tie-breaking behavior results
in the legacy favicon being chosen.


Ted

1. https://github.com/whatwg/meta-theme-color
2. https://html.spec.whatwg.org/#rel-icon

Re: [whatwg] Icon mask and theme color

[Anne van Kesteren]

On Mon, Jun 15, 2015 at 12:18 PM, Kornel Lesiński  wrote:
> The new Safari is still only a preview, so I hope Apple will switch to a 
> better solution.

It would be great if we could get some feedback from Ted & colleagues
on what the thinking here was.


-- 
https://annevankesteren.nl/