Wikia

Community Central

Comments8

iOS touch icon customization

Airhogs777 December 5, 2011 User blog:Airhogs777

Hey Central,

For a while, I'd been working on a way to change the iOS touch icon to something beside File:Wiki.png. That's the icon that shows up on your home screen when you bookmark your wiki on an iPhone, iPad, or iPod Touch. The issue with it is that it uses File:Wiki.png, the wiki's old logo. This will affect the experience of Monobook users, since that's the picture that shows up. It's also included in the default user welcome message, if I remember right. And until I got this working, the only known way to change the icon was to change this image and use CSS or JS to revert the Monobook logo back to whatever it was before. So this bit of code solves the problem by letting you choose what picture you want. I'm pretty new at javascript, but this code seems to be working (at least on the official iOS simulator that comes with the SDK):

  function touchIcon() {
     for(var i = 0; i < document.getElementsByTagName("link").length; i++) {
        if(document.getElementsByTagName("link")[i].rel == 'apple-touch-icon') {
           var orig = document.getElementsByTagName("link")[i];
        }
     }
     document.getElementsByTagName("head")[0].removeChild(orig);
     var icon = document.createElement("link");
     icon.rel = "apple-touch-icon";
     icon.href = "[NEW PICTURE URL GOES HERE]";
     document.getElementsByTagName("head")[0].appendChild(icon);
  }
  touchIcon()

Note that this will add a glossy thing and rounded corners to whatever pic you supply. I'm not sure how to disable it, so just be aware of that.

Also remember that it shows the normal Wikia skin on the iPad, but it still uses touch icons, so make sure it's in the JS for both skins.

Around Wikia's network

Random Wiki