1045961 - Mozilla site is missing bigger icons for adding to homescreen on mobile devices

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Karl Dubost💡 :karlcow]

Step to reproduce
1. Open Firefox browser on Firefox OS
2. Go to http://www.mozilla.org/
3. Click on the star and choose add to homescreen.
4. Add to homescreen
5. Check the home screen.

Expected:
A quality icon on the home screen

Actual:
We displayed the favicon.

Suggestion to solve:
Add links to better resolution icons for mobile devices and tablets.

Example from http://webcompat.com/:


  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/favicon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/favicon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">

Comment 1

[Alex Gibson [:agibson]]

There's a very informative blog post here on optimizing for touch icons, although it does not touch Firefox OS specifically:

http://mathiasbynens.be/notes/touch-icons

Once I read it, I immediately thought of this: https://twitter.com/jegtnes/status/493750171524550657 ;)

I wonder if it would be better to condense this a bit? Unless we are looking to serve optimized versions of the icon at different sizes (which I doubt), we could combine all the `apple-touch-icon` images, and just serve the largest icon which can be automatically resized by the device. This would be a slightly larger download for older devices, but we can optimize the image file size pretty well I think.

Chrome on Android just requires a single 196x196 image:

<link rel="icon" sizes="196x196" href="icon.png">

For Firefox OS it might be better to have a few different variations of sizes, but it could probably also use the same 196x196 icon for the largest size.

Comment 2

[Karl Dubost💡 :karlcow]

(In reply to Alex Gibson [:agibson] from comment #1)
> Once I read it, I immediately thought of this:
> https://twitter.com/jegtnes/status/493750171524550657 ;)


Note that this is triggered by a couple of bugs this week.
1. Bug 958399 The current hack we are implementing for coping with Web sites.
2. Bug 1045974 Firefox OS doesn't choose the best icon, but the last one.

Which made me think that I need to write a companion blog post to
http://www.otsukare.info/2014/07/30/howto-custom-404-per-url

So iOS when it doesn't find any instructions for apple-touch-icon will request automatically
    /apple-touch-icon.png
    /apple-touch-icon-precomposed.png 
at the root of the site.

And here there is an easy win without cluttering the markup with a Rewrite rule

When 
   http://example.org/apple-touch-icon.png 
is requested, it is easy to tell the server to send the corresponding icon through the server.

Comment 3

[Alex Gibson [:agibson]]

Thanks for the info!

So for at least it might be best just to serve a single large 196x196 icon that both Firefox OS and Chrome can use (seeing as Firefox OS currently only chooses the last one available anyway). I think we should be able to optimize the image well so that the file size is small still. 

Once Bug 1045974 is resolved, we could look to add some more size variations if it's worth doing so.

Comment 4

[Alex Gibson [:agibson]]

I've done a quick test and it seems I am not able to get my Flame device (running 2.1) to recognize any additional icons, all it picks up is the default favicon. I've tried various sizes of icon, such as:

<link rel="icon" type="image/png" href="/media/img/mozorg/mozilla-60.png" sizes="60x60">

and none of them seem to work. I get the same results when testing in the simulator. I'm not sure if this is a bug, error on my part, or I'm not running the correct version of Firefox OS.

Comment 5

[Alex Gibson [:agibson]]

Useful forum discussion thread here to track history & progress on this: https://groups.google.com/forum/#!topic/mozilla.dev.gaia/m6ziJo8AOBE

Comment 6

[Kevin Grandon :kgrandon]

For FirefoxOS specifically, we should now have support for this in our 2.1 release since the bugs under meta bug 1041482 have been resolved. We now support various sizes of <link rel="icon">, along with the apple touch icon as a fallback.

This is only supported in the current 2.1 development branch though, and not yet present in development builds.

I'd recommend marking this as a duplicate of bug 1041482.

Comment 7

[Kevin Grandon :kgrandon]

Sorry, I meant to say that this is not currently present in production/user builds.

Comment 8

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Marking as duplicate. The opening of this bug is specific to FireFox OS, which is described in Kevin's note/the dupe bug.

Comment 9

[Karl Dubost💡 :karlcow]

Cory. No.
This is about the Web site markup. The firefox OS is just an example. You will trigger the same issue with any Android or iOS devices

See:

→ http -b GET https://www.mozilla.org/en-US/ | egrep -i '<link' | egrep -i icon
    <link rel="shortcut icon" href="//mozorg.cdn.mozilla.net/media/img/favicon.ico">
    <link rel="shortcut icon" href="//mozorg.cdn.mozilla.net/media/img/favicon.ico">

Comment 10

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: iOS 7.1.2

Thanks Karl.

Per kgrandon, FxOS browser will only pull the favicon.

Attached is my experience with iOS. I have not tested Android.

agibson, are there still concerns over adding the apple touch icon markup? Or can we move forward here?

Comment 11

[Karl Dubost💡 :karlcow]

Note that it is not about adding specifically "apple touch icon" :)
but about having these

  <link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/favicon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/favicon/favicon-196x196.png" sizes="196x196">

These are the standard ones. 
The apple touch ones are for compat with iOS devices.

For Firefox OS, nope. It pulls the last icon in the stream. It doesn't try to infer the quality. So if the favicon (16x16) is put last indeed this is the one that FxOS will download. It's quite unfortunate, but it's the way it is. See Bug #1045974 :) Life choices ;)

Comment 12

[Karl Dubost💡 :karlcow]

Currently our favicon on Mozilla.org
https://mozorg.cdn.mozilla.net/media/img/favicon.ico
There is no big icon available.

What you get in the case of iOS7 is the device make a screenshot of the page and making it an icon because it can't find a suitable icons for displaying on the home screen.

Comment 13

[Alex Gibson [:agibson]]

Hi Cory,

There is no concern over adding apple-touch icons, but the one thing we need to get right is that we provide suitable standardised icons for other devices, including Firefox OS. As per comment 4, the last time I tested my Flame device (running 2.1 nightly builds), I was unable to get it to recognise any icons other than the default favicon. This is the reason why this bug has not been completed yet. I'll do another test on a more recent build, (or perhaps it's a caching issue?).

Either way, if you would like to work on this bug then feel free to pick it up and investigate! :)

Comment 14

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: Mozilla_favicon_32x32.ico

Comment 15

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: Mozilla_favicon_96x96.ico

Comment 16

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: Mozilla_favicon_160x160.ico

Comment 17

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: Mozilla_favicon_196x196.ico

Comment 18

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

The icons for the larger sizes have been generated.

Please attempt to update the markup per Karl's comment 11.

Per comment 6 FireFoxOS may not recognize larger sizes regardless of where it appears in the markup, but iOS and Android should work as expected.

Thanks

Comment 19

[Alex Gibson [:agibson]]

(In reply to Cory Price [:ckprice] from comment #18)
> The icons for the larger sizes have been generated.
> 
> Please attempt to update the markup per Karl's comment 11.
> 
> Per comment 6 FireFoxOS may not recognize larger sizes regardless of where
> it appears in the markup, but iOS and Android should work as expected.
> 
> Thanks

Hi Cory,

I think these need to be in .png format, but I should be able to convert them ok. If not, I'll ask in the original assets bug.

I'll see to picking this up again shortly, thanks!

Comment 20

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hi Alex,

I've gone ahead and asked for PNG files from Matt: https://bugzilla.mozilla.org/show_bug.cgi?id=1063679

Thanks

Comment 21

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

I received the PNG's from creative and made some minor modifications to them.

Here is the PR for this: https://github.com/mozilla/bedrock/pull/2331

Comment 22

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hi :karlcow,

We have a PR created for this: https://github.com/mozilla/bedrock/pull/2331

A couple of points/questions

1. FirefoxOS: Comment 11 seems to imply that if we put a high-res icon lower in the order, it would use this icon instead of the 16x16 favicon. However, my testing with the Flame has not shown this. Regardless of where in the markup I declare the icons, or how many different icons I include, it always uses the favicon. :agibson's testing in Comment 4 came to the same results.

2. Icon sizes: What are your thoughts on including a single for both the rel="apple-touch-icon" and rel="icon", and allow the device to resize as needed? This is currently in the PR and has tested well for iOS and Android.

Thanks

Comment 23

[Karl Dubost💡 :karlcow]

@Cory

# Question 1 - Firefox OS

Which page did you use for testing?
For example in the commit, the icons finish by the low resolution ones 16x16 and 32x32
https://github.com/ckprice/bedrock/commit/2f702defcf846320f01eab32d777251650da040e
Then there seems to be a fix in the subsequent commit
https://github.com/ckprice/bedrock/commit/fa988fbecf5aed8551767617fdb394015c22a42b

Did you use a specific test page for Firefox OS? Let me set up a test page

## Test page
http://www.la-grange.net/2014/10/06/icons/test-res-order
HTML file with icons by resolution order:
16px  red
180px green
196px yellow

## Test Results
On Firefox OS 2.2.0, Firefox 35.0
Add to HomeScreen: add the 180px icon (apple touch) instead of the 196px. This I consider it being a bug. The apple icon touch should be a fallback only.

On Android 4.4, Firefox 32.0 
The favicon is 196px. Add to HomeScreen is 196px. (correct behavior)

On iOS 6.1.6, Safari/8536.25
Add to HomeScreen is 180px. (correct behavior given this version of Safari).

# Question 2 - Icon sizes

According to mathias Bynens
https://mathiasbynens.be/notes/touch-icons

> It’s perfectly possible to just create one high-resolution icon 
> and use that for all devices. In fact, this is how Apple does it. 
> Devices with smaller screens or lower display resolutions 
> automatically resize the icon.

More sizes would make sense but I think this is another bug of Firefox which seems to download all sizes.
These are the requests for each browser. None does the right thing. :/
(I kept the request orders from the log)

## Firefox OS 

Web page:
  22:14:09 "GET /2014/10/06/icons/test-res-order HTTP/1.1" 200 629
  22:14:09 "GET /2014/10/06/icons/196px.png HTTP/1.1" 200 2905
  22:14:11 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353
Add to Home Screen:
  22:14:22 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353

Bugs: 1. Download all icons
      2. Download again the 180px when it's in the cache.
      3. Use 180px instead of 196px


## Firefox Android

Web page:
  22:17:45 "GET /2014/10/06/icons/test-res-order HTTP/1.1" 200 629
  22:17:46 "GET /2014/10/06/icons/196px.png HTTP/1.1" 200 2905
  22:19:44 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353

Add to Home Screen:
  22:19:51 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353
  22:19:53 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353

Bugs: 1. Download all icons
      2. Download again the 180px when it's in the cache.
      3. Use 180px instead of 196px
      4. Download twice the 180px for Add to Home Screen??


## iOS Safari
I kept the user agent for Safari, because the requests are handled by different parts. Note that Safari doesn't predownload on iOS 6 any icons. (To be tested on Safari iOS 8). It uses the apple-touch-icon but this is expected for this version of Safari.


Web page:
  22:21:51 "GET /2014/10/06/icons/test-res-order HTTP/1.1" 200 629
           "Mozilla/5.0 (iPod; CPU iPhone OS 6_1_6 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B500 Safari/8536.25"

Add to Home Screen:
  22:22:18 "GET /2014/10/06/icons/180px.png HTTP/1.1" 200 3353
           "MobileSafari/8536.25 CFNetwork/609.1.4 Darwin/13.0.0"

Comment 24

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

:karlcow

Thank you for your in-depth feedback and testing! I also cloned your test, and played around with some different cases yielding the same results as you (http://ckprice.github.io/icons/).

Based on your comments, we will be executing the following:

1. Merge the existing PR (https://github.com/mozilla/bedrock/pull/2331) as is

2. Search for an existing/file new Firefox OS bug
- Download all icons
- Download again the 180px when it's in the cache.
- Use 180px instead of 196px

3. Search for an existing/file new Firefox Android bug
- Download all icons
- Download again the 180px when it's in the cache.
- Use 180px instead of 196px
- Download twice the 180px for Add to Home Screen??

4. Close this bug

Thanks again.

Comment 25

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/4a2a2a4efd6c814c23b6688acc9f7ddc0a44b73d
[fix bug 1045961] Add larger icons to homepage

https://github.com/mozilla/bedrock/commit/154bcfd9dea15c6f4fb7841a930a8b0d48bb1a88
Merge pull request #2331 from ckprice/bug-1045961-homescreen-icons

[fix bug 1045961] Add larger icons to homepage