Set Home Screen Icon With The WPtouch iPhone Theme WordPress Plugin
Question Defense uses the WPtouch iPhone Theme WordPress plugin for displaying the site in a user friendly format for mobile devices. This plugin is by far the best mobile theme I have used to date. Not only is it actively developed and constantly improving but it has an amazing admin page for customizing the mobile theme in many ways. I highly suggest this plugin for anyone with WordPress installed.
One thing that I completely forgot to verify once I installed the plugin was the iPhone or iPod Touch home screen icon. This is the icon that will display on an iDevice’s home screen if adding the link directly to your desktop. On any web site or the default WordPress installation this can be accomplished by simply adding an image named apple-touch-icon.png to the root web directory. The image is picked up by default and will be used by Mobile Safari as the home screen icon on your iPhone. Awhile after installing the plugin I was testing something and noticed when adding the site to the home screen of my iPhone that the icon I had uploaded was no longer working. After looking over the WPtouch iPhone Theme plugin WordPress admin page I saw that this had to specifically be set now because of the theme. You can add the home screen icon by following the directions below.
Configure iPhone Home Screen Icon With The WPtouch iPhone Theme Plugin:
- Open WPtouch iPhone Theme Admin: Login to your WordPress installation admin site typically located at your-domain.com/wp-admin. Once logged in expand Settings in the left navigation menu and click on WPtouch to display the WPtouch iPhone Theme administration page as shown below.
- Upload New Icon:You will now need to upload the iPhone Home Screen icon you previously created. If you have not created the icon already it should be 60×60 pixels in size. There is a link to an online icon generator located on the left side of the WPtouch iPhone Theme admin page in the Default & Custom Icon Pool section if you needed help in creating the icon. Anyway once it is created scroll down on the admin page until you come to the Default & Custom Icon Pool section as shown below.
Click the Upload Icon image or text located at the bottom of the instructions on the left hand side of the Default & Custom Icon Pool section. This will open a file browser so you can locate the logo image you have created on your computer. After uploading the image a message will display below the Upload Icon image letting you know the file was uploaded successfully and providing a link to refresh the page to see the new icon as shown below.
- Set Logo & Home Screen Icon: Scroll down below the Default & Custom Pool Icon section to the “Logo Icon // Menu Items & Page Icons” section. The home screen icon is set in the very first option called “Logo / Home Screen Icon & Default Menu Items”. Simply click the drop down and scroll to the bottom which is where the icon you have just uploaded should be located. Once selected scroll to the bottom of the WPtouch admin page and click the Save Options button to save the changes.
- Verify Home Screen Icon: Now visit your WordPress site from your iPhone or iPod touch. Once on your site click the + symbol located in the bottom Mobile Safari menu which will display a menu as shown below.
Click the “Add to Home Screen” button to add an icon to the desktop of your iPhone and verify it is the new icon you uploaded via the WPtouch iPhone Theme admin. An example of what your icon might look like is shown below with the Question Defense logo located in the bottom right corner after adding it via Mobile Safari.
You can also upload other icons to use for various other things with the WPtouch iPhone Theme. If you happen upon this page and you do not use the WPtouch plugin but still want to add a home screen icon all you need to do is create a 60×60 pixel image and upload it to the root of your web directory. Make sure it is named apple-touch-icon.png and Mobile Safari will use it by default.