Consolidating replies...

> On Jun 17, 2015, at 7:03 AM, Benjamin Francis <bfran...@mozilla.com> wrote:

> 

> Personally I would recommend using the web manifest for your use case,
> something like this:


We can look into that in the future, but even if we had it right now, I’m not 
sure that’s a reason to not have the rel value. Either way, some syntax has to 
be invented. Note also that, while the pinned tabs feature is kind of 
install-ish in the way manifests are meant to be used, in the future we may use 
the mask icon for other purposes too. So I don’t think it should be excessively 
tied to manifests.

[…]

> How about something like:
> 
> <link rel="icon" sizes="any" mask="/mask.svg" foreground-color="#ff0000">


Using a mask attribute in place of href would solve the compat problem about as 
well as using rel=“mask-icon”, but it seems kind of weird to me. It doesn’t 
make sense for an icon link to have both a mask and an href. And if we’re 
changing the intended use, that’s really more like changing the relation type 
than like making it not be a link at all.

Putting the color as an attribute on the <link> element seems like a reasonable 
option to consider though.

> Out of curiosity, I understand that flat design is fashionable right now
> and you might want single colour icons to represent web sites in Safari,
> but what is your fallback for the billion or so web sites which currently
> only provide a multi-coloured icon? I assume you just display the icon they
> provide?

Details of the UI of the pinned tabs feature are a bit out of scope for this 
mailing list, but since it might provide useful context to people, here are 
some facts:

- We sometimes display the mask icon in the specified color, and sometimes in a 
medium grey.
- We



> On Jun 17, 2015, at 3:19 AM, Kornel Lesiński <kor...@geekhood.net> wrote:
> 
>> 
>> - Change <link rel=icon mask> to <link rel=mask-icon>, but keep using the 
>> theme-color meta for the color
> 
> Please don't use meta theme-color. 
> 
> Financial Times' theme color is "salmon pink" (#fff1e0), but FT's logo must 
> use black letters. 

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.

So let’s assume we are starting with <link rel=mask-icon href=whatever.svg>. 
(We can consider alternate names for the rel value but I haven’t seen any other 
specific suggestions).

There are four basic ways the color could be specified based on discussion here:

(A.1) Make up a different meta key that could apply to icons, such as 
theme-foreground-color or theme-icon-color.

(A.2) Add an attribute to <link> specifically for use in specifying the color 
for that icon, e.g. <link rel=mask-icon href=whatever.svg color=lightred>.

(A.3) Specify the color inside the icon SVG using an SVG ‘<metadata>’ element.

(A.4) Specify the color inside the icon SVG by actually using that color for 
its graphics. (Though most likely the way to extract it would be dominant color 
or first-used color rather than average color, for predictability).


Then there’s the choice of fallback:

(B.1) If the the color isn’t specified using the A method, use the theme color.

(B.2) No fallback color.


My current preference out of these is (A.2)/(B.1). If there’s a new way to 
specify the color, it may as well be specified along with the icon. (A.3) seems 
too complicated (would probably require inventing an RDF vocabulary or 
something). It also could not extend to non-SVG vector formats. (A.4) seems 
reasonable, but not obviously a lot better, and it would seem weird that 
sometimes we render the shape without the color it’s drawn with inside the file.

Regards,
Maciej


Reply via email to