Last modified: 2014-06-18 10:37:24 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T29911, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 27911 - Overhaul and standardize apple-touch-icons (tracking)
Overhaul and standardize apple-touch-icons (tracking)
Status: NEW
Product: Wikimedia
Classification: Unclassified
Site requests (Other open bugs)
unspecified
All All
: Normal enhancement with 2 votes (vote)
: ---
Assigned To: Krinkle
http://www.mediawiki.org/Apple-touch-...
: tracking
Depends on: 19392 hidpi 44680
Blocks: tracking
  Show dependency treegraph
 
Reported: 2011-03-07 09:37 UTC by Krinkle
Modified: 2014-06-18 10:37 UTC (History)
8 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Current icon for mediawiki.org from http://www.mediawiki.org/Apple-touch-icon.png (25.67 KB, image/png)
2011-03-07 09:37 UTC, Krinkle
Details
Screenshot of a scaled-down icon on iOS (1.08 MB, image/png)
2013-04-25 15:33 UTC, Tomasz W. Kozlowski
Details

Description Krinkle 2011-03-07 09:37:41 UTC
Created attachment 8257 [details]
Current icon for mediawiki.org from http://www.mediawiki.org/Apple-touch-icon.png
Comment 1 Krinkle 2011-03-07 09:38:07 UTC
While at it, also move it to Commons.
Comment 2 p858snake 2011-03-07 09:41:34 UTC
(In reply to comment #1)
> While at it, also move it to Commons.
[[mw:Manual:$wgAppleTouchIcon]], That is a seperate issue that you should file a seperate bug about.
Comment 3 Krinkle 2011-03-07 10:00:08 UTC
Making bug more general, there's much ugly stuff and/or inconsistant behaviour.

InitialiseSettings.php [1]
'wgAppleTouchIcon' => array(
    'default' => false, // default iPhone/iPod Touch bookmark icon
    
    // Let the secure versions shine through with their own icons as well, set it explicitly
    'wiki' => 'http://$lang.$site.org/apple-touch-icon.png',
    'wiktionary' => 'http://$lang.$site.org/apple-touch-icon.png', // http://upload.wikimedia.org/wiktionary/en/4/48/Wiktionary-iphone_logo.png

    'testwiki' => 'http://upload.wikimedia.org/wikipedia/test/apple-touch-icon.png',
    'enwikinews' => 'http://upload.wikimedia.org/wikipedia/commons/4/43/Apple-touch-icon.png',
    'mediawikiwiki' => 'http://www.mediawiki.org/Apple-touch-icon.png',
    'usabilitywiki' => 'http://usability.wikimedia.org/UsabilityWiki-AppleTouch-Icon.png',
),

Example urls:
http://en.wikipedia.org/apple-touch-icon.png
http://nl.wikipedia.org/apple-touch-icon.png
http://commons.wikimedia.org/apple-touch-icon.png
http://meta.wikimedia.org/apple-touch-icon.png
http://strategy.wikimedia.org/apple-touch-icon.png
http://usability.wikimedia.org/UsabilityWiki-AppleTouch-Icon.png
http://nl.wikibooks.org/apple-touch-icon.png
http://en.wiktionary.org/apple-touch-icon.png
 -> http://upload.wikimedia.org/wiktionary/en/4/48/Wiktionary-iphone_logo.png
http://upload.wikimedia.org/wikipedia/test/apple-touch-icon.png
http://upload.wikimedia.org/wikipedia/commons/4/43/Apple-touch-icon.png
http://www.mediawiki.org/Apple-touch-icon.png

Todo:
- Create a photoshop template (probably take the UsabilityWIki's as example) and attach to bug
- Input: Logo
- Output: 200x200px alpha PNG
- Upload to Commons, (create/use seperate category and sysop-protect).
-- Depending on the technical possiblities either link them directly from Commons, or re-upload to the root apple-touch-icon.png. The latter is nice, but not sure if that allows the ability to upload once for an entire familiy (eg. wikinews) and use local $lang.wikinews.org as link (if it has to be uploaded to each wikiines then it's better to link directly from commons to avoid problems when new wikinews projects are added)
-- If linking from commons, link everything from commons, not just a few. Upload/Rename to get consistent file-naming.

Problem:
- The one for the foundationwiki is broken: http://wikimediafoundation.org/
<link rel="apple-touch-icon" href="http://foundation.wikipedia.org/apple-touch-icon.png" />
Are there more cases like these ?



--
Krinkle

[1] http://noc.wikimedia.org/conf/highlight.php?file=InitialiseSettings.php
Comment 4 MZMcBride 2011-09-01 05:23:41 UTC
Adding Roan to the CC list. I noticed the foundationwiki issue today after https was deployed there. I'm not sure if it's the reason that the page doesn't have a pretty green lock icon in Google Chrome, but it's probably not helping.
Comment 5 Roan Kattouw 2011-09-02 14:07:11 UTC
(In reply to comment #4)
> Adding Roan to the CC list. I noticed the foundationwiki issue today after
> https was deployed there. I'm not sure if it's the reason that the page doesn't
> have a pretty green lock icon in Google Chrome, but it's probably not helping.
That was because of the logo, fixed that just now.
Comment 6 Nemo 2013-02-05 14:52:51 UTC
Just the other day I read someone complaining about the (English) Wiktionary favicon being horrible due to low resolution on iPhone or something.
Comment 7 Michael Zajac 2013-03-21 19:02:39 UTC
Apple touch icons should be placed in the root directory with filename apple-touch-icon.png. The default size is 57px square for iPhone & iPod Touch, but some devices will benefit from up to 144px square.

Multiple sizes can be linked thusly:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Reference: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Comment 8 Faidon Liambotis 2013-04-23 18:24:45 UTC
foundationwiki's apple-touch-icon still refers to the non-existent foundation.wikipedia.org. Most of the other issues referred to this ticket related to those (like mediawiki's having a capital A on Apple-touch-icon) still exist. Maybe this should be revived with the mobile team taking point? ;)
Comment 9 Nemo 2013-04-23 18:30:18 UTC
(In reply to comment #8)
> foundationwiki's apple-touch-icon still refers to the non-existent
> foundation.wikipedia.org.

That's bug 44680 btw.
Comment 10 Gerrit Notification Bot 2013-04-24 15:45:03 UTC
Related URL: https://gerrit.wikimedia.org/r/60670 (Gerrit Change Ib5554c547295d9b53b4f554e2773a4d7c14f8c6a)
Comment 11 Gerrit Notification Bot 2013-04-24 22:22:49 UTC
https://gerrit.wikimedia.org/r/60670 (Gerrit Change Ib5554c547295d9b53b4f554e2773a4d7c14f8c6a) | change APPROVED and MERGED [by jenkins-bot]
Comment 12 Gerrit Notification Bot 2013-04-24 23:07:12 UTC
Related URL: https://gerrit.wikimedia.org/r/60773 (Gerrit Change I584719e8e909974f4181b550e3df38816bab21db)
Comment 13 Krinkle 2013-04-24 23:08:21 UTC
Tasks:

[x] Fix broken urls (meta.wikipedia.org, foundation.wikipedia.org)
    bug 44680, Ib5554c5472
[x] Move to standard location on bits.wikimedia
    Ib5554c5472
[ ] Standardise the design of the touch icons (size of image and general looks, e.g. like the Wikipedia one with the gradient in the back for example), ideally by making a Vector file public for others to use
Comment 14 Gerrit Notification Bot 2013-04-25 00:16:47 UTC
Related URL: https://gerrit.wikimedia.org/r/60777 (Gerrit Change I2f0990fa087a7b2969c982d05187331e7005b64a)
Comment 15 Gerrit Notification Bot 2013-04-25 00:17:37 UTC
https://gerrit.wikimedia.org/r/60773 (Gerrit Change I584719e8e909974f4181b550e3df38816bab21db) | change ABANDONED [by Odder]
Comment 16 Tomasz W. Kozlowski 2013-04-25 01:07:40 UTC
(In reply to comment #13)

Also possible other tasks:

[x] Create new touch icons for other wiki families:
    [x] Create icons for wikidatawiki, foundationwiki, metawiki

Subtask for Task 3:
[x] Since there is currently no easy way to serve different versions of the icons, make sure that those two icons are (1) 144 x 144 pixels so that iOS can scale them down and (2) they are small in size. 

Using pngcrush with the -brute option and reducing colour depth (in GIMP, that's Image --> Mode --> Indexed, with the number of colours set to 64 or a bit less) generally helps a lot.
Comment 17 Tomasz W. Kozlowski 2013-04-25 01:09:18 UTC
's/those two//' => there should only be one icon; let iOS scale it down.
Comment 18 Michael Zajac 2013-04-25 13:47:23 UTC
A better goal would be to provide icons in all the standard sizes. There’s no reason to require 10 million readers’ mobile devices to download and resize too-large images, slightly compromising image sharpness, when we can simply resize them once. Nothing is gained by being lazy about this.
Comment 19 Krinkle 2013-04-25 14:04:38 UTC
We're not talking about photographs in articles but the launch icon of a website shortcut saved to the home screen.

The bandwidth isn't an issue on this small scale.

Image sharpness is doubtful, I'd be open to some comparisons, but I think it doesn't matter whether we resize it and save that or have the device resize. Unless of course we're hand-crafting each version manually. That's where maintainability comes in. There's a whole bunch of these.

If it does matter, we could have a apple-touch.php entry point like we do for favicon.php and have it serve a resized version (rewrite apple-touch.png and variations to apple-touch.php and it will serve a resized version based on the incoming file name).
Comment 20 Tomasz W. Kozlowski 2013-04-25 15:33:55 UTC
Created attachment 12178 [details]
Screenshot of a scaled-down icon on iOS

Here's an example screenshot of how the current Wikipedia Apple Touch icon looks like when scaled down from 144x144 pixels — that's what we currently provide — into a 114x114 pixels version on an iPhone with Retina display.

The file, located at https://en.wikipedia.org/apple-touch-icon.png is just 5985 bytes in size, so I'd agree with Krinkle here that there's no need to worry about bandwidth issues. In terms of image sharpness, this particular example looks good to me.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links