1241904 - BMO needs high res favicons

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: General, enhancement)

Description

[James Hugman [:jhugman] [@jhugman]]

Attachment: Simulator Screen Shot Jan 21, 2016, 2.30.47 PM.png

Bugzilla needs to have one or more high res png favicons. 

In several places in the iOS and Android product bugzilla pages have a <link rel="icon"> tag pointing to .ico files. These are extremely low definition icons.

Please see screenshot from Firefox for iOS.

The iOS product /does/ use Apple precomposed icons, but this isn't sufficient for this bug.

Comment 1

[Ryan Feeley [:rfeeley]]

I don't think a high-resolution version of the green part (the insect) exists (or ever existed), though the red part is the Mozilla dino head.

I would like to propose that we create a new illustration that uses a green bug sporting a red dot (and no longer use an 8 x 8 pixel dino head).

One suggestion is the Southern Green Shieldbug - Nezara viridula (Final instar nymph)
http://www.britishbugs.org.uk/heteroptera/Pentatomidae/nezara_viridula.html

Another is the Red-shouldered Stink Bug - Thyanta custator
http://bugguide.net/node/view/643174/bgimage

I'm not an illustrator, but have CC:ed some who are, and included dolske who photoshopped (or GIMPed) the original! He may know if a high res of the original ever existed.

Comment 2

[Dylan Hardison [:dylan] (he/him)]

A high res version never existed. 

For a new icon for BMO, I think it would be hard to go wrong with a lady bug in a firefox-logo color scheme.

Comment 3

[Justin Dolske [:Dolske]]

I'm not actually sure who did the original, I remember :vladv adding the tiny red dino to some existing icons to make them less generic, and I did bug 427863.

The bugzilla bug base-favicon is just a stock icon from the Famfamfam "Silk" collection: http://www.famfamfam.com/lab/icons/silk/, nothing higher res is available.

I like the stink-bug on principle. The Twice-Stabbed Stink Bug - Cosmopepla lintneriana - seems particularly fitting. http://www.cirrusimage.com/bugs_stink_cosmopepla_lintneriana.htm (Color scheme wise, what did you think I meant?!) But really, +1 on any improvement, I don't feel the need to bike, err, bugshed here.

Comment 4

[Justin Dolske [:Dolske]]

(Yeah, I think the icon was Vlad's by way of bug 364355. /history)

Comment 7

[Mark Côté [:mcote]]

A graphics-savvy contributor has some ideas.

Comment 8

[Mark Côté [:mcote]]

Attachment: Proposed icon

Open questions:

* Leave the eyes white?
* Black outline?
* Shading?

Comment 9

[Tim Nguyen :ntim]

Coincidentally, just before comment 7, I had worked on this one: http://ntim.altervista.org/design/icons/bugzilla.svg

Comment 10

[Mark Côté [:mcote]]

Clarifying the subject to indicate that we're talking about BMO (which is apparent in the product, but that can be easily missed).

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

The icon in comment #8 doesn't look like it would scale well down to 16x16 and would still probably need some tweaking for 32x32.

I like the design in comment #9 as it looks like it will scale better to small sizes, and continues the green bug trend that BMO is already using.

Comment 12

[Tim Nguyen :ntim]

Attachment: Concepts

Stuff I've been concepting.
I'm having a bit of trouble of integrating the mozilla branding, so the logo fits specifically bugzilla.mozilla.org and not just bugzilla.

Comment 13

[Tim Nguyen :ntim]

To play with the size: http://ntim.altervista.org/design/bugzilla/#32

Comment 14

[Ryan Feeley [:rfeeley]]

Nice work Tim! I like the tool to play with the size. Would be cool to be able to view them in context (on a tab). And also for lo-dpi screens (16 x 16). The icon has to work at 16 x 16 too.

A lot of designers here even "pixel snap" their icons, using a 16 x 16 grid, so any 90° angles are exactly on the line.

Comment 15

[Dylan Hardison [:dylan] (he/him)]

Okay, it's been a long time coming to this because all of the options are good.

1) the blue/red ladybug is really nice looking on our development blog and looks good as a github org icon,
so I'm keeping that as the b-team avatar. 

2) The favicon proposals by ntim are really good and a nice evolution of the current pixelated thing.

However there are a lot of variations in ntim's upload as well!
Off the top, I'm rejecting the bmo ones as I suspect that officially using that is a trademark violation waiting to happen because of the character in Adventure Time (despite the fact that we're been BMO longer).
I'll narrow it down to the eye of sauron one and the one labeled Artboard 1 Copy.

Emma: Eye of sauron or bug-with-M-and-red-border?

Comment 16

[Tim Nguyen :ntim]

Attachment: Updated concepts

With new mozilla logo

Comment 17

[Tim Nguyen :ntim]

Attachment: Corresponding SVGs

Comment 18

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

I vote Artboard 1 Copy 

We'll need to ask if we can use the new font as our wordmark.

-- Emma

Comment 19

[Ryan Feeley [:rfeeley]]

Good icons for a sticker or t-shirt, but one has to be optimized to work at 16 x 16 pixels that typically appears inside a tab or history/bookmark menus, which it does not appear to be.

Comment 20

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

(In reply to Ryan Feeley [:rfeeley] from comment #19)
> Good icons for a sticker or t-shirt, but one has to be optimized to work at
> 16 x 16 pixels that typically appears inside a tab or history/bookmark
> menus, which it does not appear to be.

If we remove the "m" and the outlining, will that work at 16x16?

Comment 21

[Tim Nguyen :ntim]

(In reply to Ryan Feeley [:rfeeley] from comment #19)
> Good icons for a sticker or t-shirt, but one has to be optimized to work at
> 16 x 16 pixels that typically appears inside a tab or history/bookmark
> menus, which it does not appear to be.

I can optimize them for 16px once one icon is picked.

Comment 22

[Tim Nguyen :ntim]

Attachment: Possible 16px icons

Here are some possible 16px icons.

Comment 23

[Tim Nguyen :ntim]

Attachment: Possible 16px icons (retina screenshot)

Comment 24

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

4th from the left or the one on the right.

Comment 25

[Ryan Feeley [:rfeeley]]

Attachment: smaller.png

Much improved, but still has to be crisp at 16 x 16 because the vast majority of users are going to be seeing it on a non-retina screen at that size.

I took a quick stab at it (attached) to give you an idea. I still don't think it's there yet.

Comment 26

[Ryan Feeley [:rfeeley]]

Attachment: bug-greener.png

Improved again. Am trying to stick with the green pentatomidae (stink bug) theme. Would need to spend time making hidpi versions.

Comment 27

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

*sigh* it's good, but after the stinkbug plague that hit San José last summer, a little triggery. :)

Comment 28

[Dylan Hardison [:dylan] (he/him)]

Attachment: Screen Shot 2017-04-03 at 17.23.25.png

My choice is for this one, and possibly removing the M for 16x16

Comment 29

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

I prefer the friendlier, rounded bug too.

Comment 30

[Ryan Feeley [:rfeeley]]

Attachment: 16x16.png

Truthfully, I’d prefer a friendlier one too.

Definitely avoid compounding the icon with an "m". Icons on top of icons don't work at a small size. And our branding team will flag it as a violation anyway.

The hard requirement though is that, like a "mobile first" design strategy, it absolutely has to be perfect at 16 x 16 pixels. Any right angles must be on the pixel (aka pixel snapped) and not blurry. The same for 32 x 32 and so on. Until more users are on HiDPI displays (and even our UX team still gets new non-HiDPI displays) this requirement will remain.

A good resource that includes an illustrator template:
https://github.com/audreyr/favicon-cheat-sheet

Comment 31

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

What about showing just half of the bug? That'd give you more pixels and it wouldn't be as stink-bugish?

Comment 32

[Ryan Feeley [:rfeeley]]

At this size, slicing anything in half (even a coffee cup like your emoji) would make it too difficult to identify.

For example, very few people can identify the red blob on the current favicon.

Comment 33

[bbell]

Attachment: bugzillaOption.png

you seem to be looking for a bug?

Comment 34

[Tim Nguyen :ntim]

Attachment: bugzilla.sketch

Here's the sketch file in case anyone wants to play with it.

Comment 35

[Tobias B. Besemer [:BesTo] (QA)]

As activity stream lands: Anything new to this bug?

Comment 36

[Tobias B. Besemer [:BesTo] (QA)]

Attachment: BMO in activity stream

Comment 37

[Dylan Hardison [:dylan] (he/him)]

it's not using the opengraph tag?

Comment 38

[Albert Scheiner [:alberts]]

Attachment: bugzilla-favicon-sample-on-tabs.png

Ryan, is techmessiah actually still working on this? 

In the meantime adding my two cents using my favourite of Tim's bugs without the "m" character ;)

Comment 39

[Ryan Feeley [:rfeeley]]

I'm not sure if techmessiah is still following this bug, nor am I sure who has authority to make this change. It has a small impact on a large number of people (and able to upset many).

I have set some very clear criteria for what our UX team will endorse. It has to be designed for 16x16 first with larger versions following. This is pixel art; there is no doubt about that.

It should not veer too far from the current icon design, and unlike the current icon, it should work at larger sizes.

If we can get something that fits this, I will do what I can to move this forward, as the current icon is undecipherable.

Comment 40

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Ryan, so we can get this done as Activity Streams needs it, it appeared that the "red shouldered stink bug" based icon without the "M" was something that would work with the constraints you set. If Dylan agrees, let's move forward.

Comment 41

[Tim Nguyen :ntim]

Attachment: Another stab at the favicon

I took another stab at the favicon to address Ryan's concerns.

Comment 42

[Ryan Feeley [:rfeeley]]

Attachment: non-retina.png

Better! Looks optimized for 32 x 32. Here is what it looks like for a non-retina screen (although the browser screenshot is retina resolution).

It's definitely possible with a favicon to have different versions for different sizes. For example, you might want hard dot eyes instead of how they look now.

See attached.

Comment 43

[Tim Nguyen :ntim]

Attachment: bugzilla-favicon.svg

Ryan, thanks for the feedback! I made the eye cut-out square instead of round, which should help.

Let me know if it looks ok for you. Everything should be snapped to the pixel grid :)

Comment 44

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

When this is ready, please prepare the .ico file we'll need to support icons at various densities and attach to this bug.

If we need a separate image file for open graph tags and/or activity streams, please attach that as well. 

If you wish, you can submit a pull request to replace https://github.com/mozilla-bteam/bmo/blob/master/extensions/BMO/web/images/favicon.ico with the updated file.

Comment 45

[Ryan Feeley [:rfeeley]]

Comment on attachment 8899980 [details]
bugzilla-favicon.svg

Still needs work at the small and large size. I may be able to get the same designer who worked on the new Nightly icon to take it over the finish line. Stay tuned!

Comment 46

[Dylan Hardison [:dylan] (he/him)]

I like the green bug. I'll wait for :rfeeley to report back about comment #45

Comment 47

[Armen [:armenzg]]

Is this something someone could pick up again? Please :)

I'm using the original png as icon/link to Bugzilla. I would like something a bit higher def. Thanks!

Comment 49

[Tim Nguyen :ntim]

Attachment: bugzilla-favicon-final.svg

Fixed the issues rfeeley mentioned in person.

Comment 50

[Tim Nguyen :ntim]

Attachment: Final icon at different sizes

Note that 16x16 is different than the other icons.

Comment 51

[Tim Nguyen :ntim]

Attachment: large-bugzilla-icon.svg

This is the SVG for sizes larger than 16px

Comment 52

[Tim Nguyen :ntim]

The eyes are square on the 16px version and are round on bigger sizes, that's the only difference.

Comment 54

[Nicolas Chevobbe [:nchevobbe]]

Attachment: image.png

I love ntim's icon :)
Wonder if we could still have the same vide as the current one by having a red part and 45deg the bug.

Comment 55

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Sorry! not on my radar nowadays. So, clearing my NI.

Comment 57

[:Atoll]

Attachment: Firefox iOS latest screenshot of BMO icon display

The issue with BMO's favicon has worsened, at least in Firefox iOS, since the original image was posted to this bug.

Comment 58

[Ryan Feeley [:rfeeley]]

Attachment: bug.png

64×64 of the status quo. At least some people will finally know what the red dot is.

Comment 59

[Jay Michalska [:hellcp]]

Attachment: 3 proposals for favicons, with an upscaled bug from the current favicon, and various versions of Mozilla logo

I found out about this bug while working on updating the Bugzilla upstream favicon, since that's 14 years old. I quickly recreated the current bug from the favicon as a vector image, and tried putting the old dino, the current logo, and the current logo, but mirrored and rotated, just because it looks like a B for Bugzilla a little bit. It wouldn't change how it looks now at 16px at all, but it would be an improvement at higher resolutions.

Comment 60

[David Lawrence [:dkl]]

(In reply to Jacob Michalskie [:hellcp] from comment #59)

Created attachment 9293468 [details]
3 proposals for favicons, with an upscaled bug from the current favicon, and various versions of Mozilla logo

I found out about this bug while working on updating the Bugzilla upstream favicon, since that's 14 years old. I quickly recreated the current bug from the favicon as a vector image, and tried putting the old dino, the current logo, and the current logo, but mirrored and rotated, just because it looks like a B for Bugzilla a little bit. It wouldn't change how it looks now at 16px at all, but it would be an improvement at higher resolutions.

I really like the middle row personally. Would be happy to include the update favicons.

Comment 61

[Jay Michalska [:hellcp]]

Attachment: bmo-favicons.tar.xz

Oops, missed the last comment for a while, I exported the middle row in various sizes that may be useful for favicon purposes, and included the source svg file, maybe it will come in handy

Comment 63

[:glob ✱]

Note for the favicon to appear on Google search results it needs to be a multiple of 48px:

https://developers.google.com/search/docs/appearance/favicon-in-search

Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files don't have a specific size.

Comment 64

[:glob ✱]

Thanks for the icons Jacob, and sorry this sat here for so long.

I'll put up a PR for this soon.

Comment 65

[BMO Github Automation]

Attachment: [mozilla-bteam/bmo] Bug 1241904 - Use a high resolution favicon (#2125)

Comment 66

[David Lawrence [:dkl]]

Merged
https://github.com/mozilla-bteam/bmo/commit/180230c2098935df5621ffab29e3eb85b8434ed1