698912 - Update favicon and mobile icons

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Stephen Donner [:stephend] Not actively reading bugmail]

<link rel="apple-touch-icon" href="/media/apple-touch-icon.png">

That image isn't being used anywhere, and doesn't exist:

https://mozillians-dev.allizom.org/en-US/
	https://mozillians-dev.allizom.org/media/apple-touch-icon.png
	  \_____ error code: 404 (not found)

https://mozillians-dev.allizom.org/en-US/about
	https://mozillians-dev.allizom.org/media/apple-touch-icon.png
	  \_____ error code: 404 (not found)
	http://groups.google.com/group/mozilla.mozillians/topics
	  \_____ error code: 403 (forbidden request)

https://mozillians-dev.allizom.org/en-US/login
	https://mozillians-dev.allizom.org/media/apple-touch-icon.png
	  \_____ error code: 404 (not found)

https://mozillians-dev.allizom.org/en-US/password_reset
	https://mozillians-dev.allizom.org/media/apple-touch-icon.png
	  \_____ error code: 404 (not found)

https://mozillians-dev.allizom.org/en-US/register
	https://mozillians-dev.allizom.org/media/apple-touch-icon.png
	  \_____ error code: 404 (not found)

Comment 1

[Ben (:bensternthal)]

OK clarifying this... the link to the apple touch icon (used when added to ios home screen) is in the code but there is no image.

Do we need to make one or should we remove from the code?

Poking around mozilla.org does not have one, and I do not see guidelines one way or the other. If we remove, ios just uses a screenshot.

Comment 2

[Ben (:bensternthal)]

Suggest we just remove, folks in webprod objected to adding this because the ios icon is proprietary.

Will look into what ff os uses and see if that's applicable.

Comment 3

[William Reynolds [:williamr]]

(In reply to Ben (:bensternthal) from comment #2)
> Suggest we just remove, folks in webprod objected to adding this because the
> ios icon is proprietary.
I understand the proprietary concern. I also think it would be useful to include an icon for platforms where the app can appear on the homescreen, since it does make the user experience better.

It looks like 


> Will look into what ff os uses and see if that's applicable.
Thanks Ben - please share anything you find on this.

Comment 4

[William Reynolds [:williamr]]

(In reply to Ben (:bensternthal) from comment #2)
> Suggest we just remove, folks in webprod objected to adding this because the
> ios icon is proprietary.
I understand the proprietary concern. I also think it would be useful to include an icon for platforms where the app can appear on the homescreen, since it does make the user experience better and provides branding. Happy to discuss more.

It looks like the apple-touch-icon should be available in different sizes depending on the device's screen resolution [1]. Ben, could you confirm the sizes we would need (looks like there are up to 4) if we include this image?

[1] http://stackoverflow.com/questions/2997437/what-size-should-apple-touch-icon-png-be-for-ipad-and-iphone-4

Comment 5

[Ben (:bensternthal)]

Official Docs:
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14

A glance of some websites shows most folks using 114x114, this size would be scaled by devices.

I think we can use a single 114x114 image and be fine.

Asking Craig to confirm.

Comment 6

[Craig Cook (:craigcook)]

Yeah, a single 114x114 would work. We could go up to 144x144 for the retina iPad but I'm not sure it's all that necessary.

However, the bigger question is what will the image be. We shouldn't use the Firefox logo because it would look as if Firefox is installed on iOS, but it's just a bookmark to a web page. 

Since we're retiring the dino-head the Mozilla wordmark is our main logo, which doesn't lend itself easily to an icon. The plain "m" works well as a favicon but I don't know if it would work at larger sizes, and isn't necessarily distinct on its own as a brand.

So even aside from the whole proprietary argument I'd be in favor of sticking with the default screenshot behavior since I don't know what icon we'd use in its place. This is a question for John Slater's team.

Comment 7

[Craig Cook (:craigcook)]

Though on second thought, maybe we can use the dino-head after all. Mozillians is a community site rather than a consumer site, and I think we still use the dinosaur for community stuff. We should still talk to jslater and see what he thinks.

Comment 8

[Ben (:bensternthal)]

OK.

William, thoughts on branding?

If we are planning a redesign for Q1 we could tackle this as part of that (this is low impact). However if you have an icon idea that would work regardless, we can move forward and get this done.

Comment 9

[William Reynolds [:williamr]]

(In reply to Ben (:bensternthal) from comment #8)
> William, thoughts on branding?

I filed bug 821471 for our brand team to create an icon, and the design should be completed by January 3rd. We can move forward once that's ready.

Comment 10

[William Reynolds [:williamr]]

This is ready to work on, thanks to the help of the creative team.

The four icon sizes can be found starting in bug 821471 comment 10.

Comment 11

[[github robot]]

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

https://github.com/mozilla/mozillians/commit/87df4d08b0c6405cd472951e6e1b61804aee908f
[Fix Bug 698912] Add Apple Touch icons for all iOS devices

https://github.com/mozilla/mozillians/commit/b2d0e7b1859792ee23e5fd4e7032aa6c96bed15d
Merge pull request #383 from Sancus/iosicons

[Fix Bug 698912] Add Apple Touch icons for all iOS devices

Comment 12

[Matt Brandt [:mbrandt]]

I can verify the image exists - captain stephend would you mind using your iPhone to verify that bookmarking the page places the icon on your home page?

https://mozillians.allizom.org/media/apple-touch-icon.png

Comment 13

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Add to homescreen dialog w/preview

Comment 14

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Mozillians icon on iPhone homescreen

Comment 15

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; can confirm the icon launched mozillians.allizom.org, which is from where I bookmarked it.

Comment 16

[Giorgos Logiotatidis [:giorgos]]

Let's update favicon too.

Comment 17

[Matt Brandt [:mbrandt]]

Bumping to verified - side note, favicons are being revamped in bug 875931