Web Clip Homescreen Icons for iOS

bwiernik · May 27, 2014

I like to use the Zotero website to access my library on my iPhone. It would be nice to have an icon to display when I save the website to my phone home screen, rather than a screenshot. I resized and renamed the Zotero icon to meet the Apple requirements. Is the Zotero website itself a git project that I could submit a pull request with these icons to?

dstillman · May 27, 2014

Is the Zotero website itself a git project that I could submit a pull request with these icons to?

Not currently (though that's being worked on), but in the meantime you can just upload the files to Dropbox or similar and provide a link.

bwiernik · May 28, 2014

These just need to be dropped into the root directory of the website.

https://www.dropbox.com/sh/jcfvczu1sppl2tk/AADNsmO3eSXdM0vUmBIaObUta

dstillman · May 28, 2014

Did you purposely omit the transparency? (It seems like Apple does, for what that's worth.)

We have the original icon, so we can just generate these icons at the appropriate sizes with transparency if that's preferred. I haven't tested what it looks like each way.

bwiernik · May 28, 2014

If you leave transparency in, it generates a black background. I thought white looked better (and liked it better than any of the various grays I tried).

Rintze · May 28, 2014

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html

"Avoid transparency"

dstillman · May 28, 2014

OK, I generated a new 152px version with a white background and the Z shifted down to be more centered:

https://www.zotero.org/apple-touch-icon.png

From the web icon docs, it doesn't seem like multiple versions are necessary, and Apple doesn't bother on their site. This seems to work fine on an iPhone 5S, Retina iPad Mini, and iPad 1.

Thanks for working on this.