Add larger logo assets

[alexgibson]

Currently browser icons are bundled as 200x200px (high-res) and 100x100px (low-res) variants, but it would be good to also provide an additional larger variation that web pages can use. Something along the lines of:

• browser.png (100x100px)
• browser-high-res.png (200x200px)
• browser-large.png (300x300px)
• browser-large-high-res.png (600x600px)

[stephaniehobson]

Add to the list, format & sizes needed for favicons:

• ICO 16px & 32px
• PNG 16px
• PNG 32px
• PNG 180px
• PNG 196px

References https://realfavicongenerator.net/ https://stackoverflow.com/a/48969053/462195 https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons/

[stephaniehobson]

Here is a list of sizes already in use on bedrock, rounded to be divisible by 16 (this matches the grid we use in Protocol currently).

96 128 160 196 256 320

** these are the low-res versions, there are high-res versions of some of these

[stephaniehobson]

I suggest the largest PNG we include is 256px and after that people should use the SVG.

(PNG versions are needed at smaller sizes to support search results, favicons, and social media. Also, 256px seems to be about the tipping point where the SVG starts to be smaller than the PNG)

[stephaniehobson]

So I guess I'm suggesting:

ICO

• 16px & 32px

PNG

• 16px
• 32px
• 48px
• 64px
• 96px
• 128px
• 160px
• 180px
• 196px
• 256px

SVG

• for use over 256px, need to set a default size in the SVG to avoid it taking over the whole screen when there's no size declared. Maybe.... 256px?

Edited to add 64px, there's no use case but the gap was bothering me Edited to add 48px, based on logo sizes in recent designs (homepage banners, firefox pages)

[stephaniehobson]

This is complicated by the vertically stacked logos with wordmarks:

I think the path I want to go with this is that the Firefox logo will be 256px but the image height will be more than this to accommodate the wordmark.

[stephaniehobson]

The team discussed it and we would rather people use the assets to generate their own favicons, than to provide them as part of this repo.

Also, the high res version of 256px is just stupid big so I've revised the point where I suggest people switch to SVG.

That makes the new suggested sizes:

PNG

• 48px
• 64px
• 96px
• 128px
• 160px
• 196px

SVG

• for use above 196px. Need to set a default size in the SVG to avoid it taking over the whole screen when there's no size declared. I suggest 256px?