Unmaintained Mobile Device Home Screen Icons (tested with iOS and Android) 1.0

So, on Apple iOS devices such as the iPhone and iPad from Safari you can add an icon to your favourite websites to the Home screen.

Let's look at XenForo.com purely as an example. I come here regularly so I've added it to my Home Screen on my iPhone.

By default, the icon is created from a quick screenshot of the page and it updates usually every time the page is accessed. Another option is to have a URL to a suitable icon coded into the page. By default XenForo doesn't include this so it will always take the screenshot.

Here's what it looks like:


This is fine - not perfect but it will do. It is just about recognisable for your site. But there's a small problem.

I often use free WiFi services. There's a popular one in the UK called The Cloud. If I'm in the vicinity of one of these WiFi hotspots, I automatically connect.

The service requires a login. So if I click my XenForo icon then instead of getting to XenForo.com I get forwarded to a login page.

So that happens and the iDevice takes a screenshot of the page. And all of a sudden my XenForo icon now looks like this:



Oops!

Remember I mentioned another option is to have a URL to a suitable icon coded into the page? The Cloud login page includes that. Now my icon will permanently be branded incorrectly unless I delete the icon and re-add it.

This problem exists on our own boards too. Aside from the screenshot type icon not being great looking, there's the potential that it could get changed to something else.

So, the solution is for us to add a URL to a suitable icon coded into our pages.

This is what this add-on does!

So if XenForo.com were to install this add-on, and you were to add this to your home screens this is what it would look like:





This add-on includes the XenForo icon above in four sizes compatible with all iPhone and iPad models and the necessary code.

All you need to do is replace these icons with your own to ensure that anyone with these devices sees more preferable branding when they save your site onto their home screens.

This does also work with Android: http://xenforo.com/community/resources/iphone-ipad-home-screen-icons.761/update?update=1268

Here's what the three different types of icons look like together:



I definitely prefer the look of the hard-coded icon that this add-on can provide!

But how do I customise this for my site? I hear you ask...

Well... you need to make the icons yourself.

Here's some incredibly handy templates to help you: http://killericons.com/app-icons/free-ios-diy-icon-kit

The location of the files you need to replace are:

yourforum.com/styles/default/MobileIcons/

There's four files:

xf_icon_57.png 57px x 57px (all iPhone non Retina)
xf_icon_72.png 72px x 72px (all iPad non retina)
xf_icon_114.png 114px x 114px (iPhone 4+)
xf_icon_144.png 144px x 144px (iPad 3+)

Just create your own icon using the templates in the download above and then resize it to the above sizes and upload to the above location.

If you want to see this in action go to: www.valvetime.net and add it to your home screen. We now have our own icon.

CREDITS

The XenForo icon included in the download and the one I use on my site is created by a guy I know called voythas. He also designed our logo as seen in my avatar. Great guy

INSTALLATION

1) Download the ZIP
2) Extract the ZIP
3) Upload the contents of the upload folder to the root of your XenForo installation.
4) Install using the provided XML file.