search

mozilla / page-metadata-parser

DEPRECATED - A Javascript library for parsing metadata on a web page.
https://www.npmjs.com/package/page-metadata-parser
Mozilla Public License 2.0
270 stars 42 forks source link

Icon scoring lacks support for vector icons #98

Closed da2x closed 2 years ago

da2x commented 6 years ago

Size matching in the icon scoring handling only works for bitmap images. Vector images should work just fine but require special handling for the sizes="any" property.

<link href="/icon.svg"
      rel="icon"
      sizes="any"
      type="image/svg">

https://github.com/mozilla/page-metadata-parser/blob/fef64a5d1d906328307215891b483451c133d07e/parser.js#L89-L95

Mardak commented 6 years ago

@da2x Firefox 57's implementation of getting rich icons does prefer svg. It was implemented here: https://bugzilla.mozilla.org/show_bug.cgi?id=1352459

On this test page, it just has 2 <link>s: https://ed.agadak.net/icon.html

<link rel="icon" href="https://hg.mozilla.org/mozilla-central/raw-file/tip/browser/base/content/abouthome/mozilla.svg" sizes="any" type="image/svg"/>
<link rel="apple-touch-icon" href="https://www.mozilla.org/media/img/favicon/favicon-196x196.c80e6abe0767.png" sizes="196x196" type="image/png"/>

As you can see, Top Sites uses the highest resolution icon available. In this case svg over the "m" 196px png:

image

Firefox ends up treating "icon" and "apple-touch-icon" both as fallbacks if there are no svg icons. And most pages on the web don't use svg as their "icon". I believe Firefox is already implementing your requested <link rel="icon" sizes="any" href="/icon.svg"> reign supreme