Re: [whatwg] A mask="" advisory flag for <link rel=icon>

Consolidating replies...

> On Jun 17, 2015, at 7:03 AM, Benjamin Francis <bfrancis@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 <kornel@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

Received on Wednesday, 17 June 2015 19:24:24 UTC