Page MenuHomePhabricator

Overhaul and standardize apple-touch-icons
Open, MediumPublicFeature

Description

Current icon for mediawiki.org from http://www.mediawiki.org/Apple-touch-icon.png


Version: unspecified
Severity: enhancement
URL: http://www.mediawiki.org/Apple-touch-icon.png

Attached:

Apple-touch-icon.png (150×150 px, 25 KB)

Details

Reference
bz27911

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:37 PM
bzimport set Reference to bz27911.

While at it, also move it to Commons.

(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.

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:

<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

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.

(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.

Just the other day I read someone complaining about the (English) Wiktionary favicon being horrible due to low resolution on iPhone or something.

michael wrote:

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

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? ;)

(In reply to comment #8)

foundationwiki's apple-touch-icon still refers to the non-existent
foundation.wikipedia.org.

That's bug 44680 btw.

Related URL: https://gerrit.wikimedia.org/r/60670 (Gerrit Change Ib5554c547295d9b53b4f554e2773a4d7c14f8c6a)

https://gerrit.wikimedia.org/r/60670 (Gerrit Change Ib5554c547295d9b53b4f554e2773a4d7c14f8c6a) | change APPROVED and MERGED [by jenkins-bot]

Related URL: https://gerrit.wikimedia.org/r/60773 (Gerrit Change I584719e8e909974f4181b550e3df38816bab21db)

Tasks:

  • Fix broken urls (meta.wikipedia.org, foundation.wikipedia.org) bug 44680, Ib5554c5472
  • 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

Related URL: https://gerrit.wikimedia.org/r/60777 (Gerrit Change I2f0990fa087a7b2969c982d05187331e7005b64a)

https://gerrit.wikimedia.org/r/60773 (Gerrit Change I584719e8e909974f4181b550e3df38816bab21db) | change ABANDONED [by Odder]

(In reply to comment #13)

Also possible other tasks:

  • Create new touch icons for other wiki families:
    • Create icons for wikidatawiki, foundationwiki, metawiki

Subtask for Task 3:

  • 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.

's/those two//' => there should only be one icon; let iOS scale it down.

michael wrote:

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.

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).

Created attachment 12178
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.

Attached:

2013-04-25_09.52.04.png (960×640 px, 1 MB)

Phabricator_maintenance renamed this task from Overhaul and standardize apple-touch-icons (tracking) to Overhaul and standardize apple-touch-icons.Aug 14 2016, 12:18 AM
Aklapper changed the subtype of this task from "Task" to "Feature Request".Feb 4 2022, 12:24 PM