1008563 - [UX] Generate fallback icon for icon-less pinned tabs

Status: RESOLVED WONTFIX

(Firefox :: Tabbed Browser, defect)

Description

[Florens Verschelde :fvsch]

Attachment: Screenshot and quick mock-up.

For all pinned tabs which don’t have a usable icon (favicon.ico or other declared site icon), Firefox uses the same “blank icon” icon. If a user pins several favicon-less tabs, it gets hard to distinguish which pinned tab is what.

This is not a big issue when users use pinned tabs strictly for web apps, which often have a favicon. But it can be a problem with:

- Web applications that did not receive careful branding and design work and thus often lack any favicon. Especially enterprise web applications, old and newer, intranets and purpose-built forms used by employees.
- Pages and articles from blogs, organizations’ websites, administration (likewise, they often lack any favicon), which the used pinned for reference or in order to “deal with it later” while freeing up tab space (that use case is an alternative to bookmarking that seems fairly common).

Proposed solution: use the first letter of the domain to generate more specific icons (only for pinned tabs, where strictly no other information—such as the page’s title—can be shown).

Some considerations:
- Many websites use a brand that matches their domain name, with the first letter of both being the same.
- There might be duplicates (e.g. domain1.tld and domain2.tld would both show a "D"), but that would still help 90 percent of the time.
- I’m not sure how it would work for internationalization. Latin letters might not bring a lot of meaning for Arabic websites whose brand is in Arabic while the domain name uses latin letters. Or if digit-based Chinese domain/brands (http://www.newrepublic.com/article/117608/chinese-number-websites-secret-meaning-urls) can be adequately hinted at just using the first digit.

A different design solution might prove more efficient.

The attached mock-up shows: an example with three pinned web pages (two are favicon-less) and a pinned “new tab”; that same example using the first letter of each pinned page as a fallback icon (except for the pinned new tab).

Comment 1

[:Gijs (away/busy until Mar 10)]

Blake, I think this is an interesting idea and we should consider doing /something/. Maybe colors, too? Don't know. Is this on UX's radar at all, and/or do you think it should/could be? :-)

Comment 2

[Anthony Ricaud (:rik)]

Maybe we could generate a unique icon based on the domain name, like https://addons.mozilla.org/en-US/firefox/addon/identfavicon/ ?

Comment 3

[Blake Winton (:bwinton) (:☕️)]

I haven't heard of this before, so it's probably not on the UX team's radar.  But I'm cc-ing Philipp, since this seems like the kind of thing he'ld be interested in.

If it's a pinned tab, I'm going to assume that the user means to keep it open for a while, and go to it more frequently than an un-pinned tab, and so we don't need to have the favicon show part of the domain name or title, because they'll come to recognize the site through usage.  Therefore, I think going with Anthony's idea would make the most sense, since it avoids the multi-lingual problems of using letters, while still being recognizable.  :)

Comment 4

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

I love the idea of doing something here and identfavicons seem to be a good start.
This might be overkill, but we could even analyze the page content and then extract the dominant color for the icon like iTunes does (http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work).

Comment 5

[:Margaret Leibovic]

bwinton pointed me at this bug because I've done some dominant color research in the past. There's toolkit code that does this for you, if you wanted to go that route:
http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/mozIColorAnalyzer.idl

Comment 6

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to :Margaret Leibovic from comment #5)
> bwinton pointed me at this bug because I've done some dominant color
> research in the past. There's toolkit code that does this for you, if you
> wanted to go that route:
> http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/
> mozIColorAnalyzer.idl

Oh, well then that's even better!
So let's combine the shape-based approach of identfavicons with the color extracted from the website.

Comment 7

[Tim Nguyen :ntim]

It'd be nice to experiment something like this : http://www.omgchrome.com/chrome-web-app-shortcuts-appearance/

Comment 8

[Tim Nguyen :ntim]

Something that is important to consider if we're using the page title : pages like "The New York times" shouldn't use the "T" letter, but the "N" letter (or even "NY")

Comment 9

[:Gavin Sharp [email: [e-mail]]]

Morphing this into a UX bug, once we settle on a design we can spin off an implementation bug.

Comment 10

[:Gijs (away/busy until Mar 10)]

Per discussion with UX and product, we won't be investing time into this - it's a complex area and the cost/reward just doesn't seem worth it.