Simple Guide to Create Android & iOS Retina Home Screen Icons for your WordPress Website

iOS Retina Home Screen Icons

iOS Retina Home Screen Icons for iPhone, iPad & Android

In this tutorial we’ll show you how to easily add to your WordPress website iOS Retina Home Screen icons for iPhone, iPad and Android as well browser favicons to Chrome, Windows and Safari. This allows you easily create app like icons for your website to the home screen of your mobile device as well as to your computers browser. It may look like a lot, but it’s super simple and only takes 10 minutes.

For years all you had to do was create a simple icon, name it apple-touch-icon.png and upload it to your root directory, but now with so many screen sizes, resolutions, platforms and devices it can become a bit of a headache. This WordPress plugin along with these simple 10 minute instructions will have you off and running in no time and will allow your visitors to simply add an App like icon of your website to their mobile device.

1.) Install WordPress Plugin Favicon by RealFaviconGenerator

Follow directions below or on the WordPress plugin page.
Using The WordPress Dashboard

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Search for ‘Favicon by RealFaviconGenerator’
  3. Click ‘Install Now’
  4. Activate the plugin on the Plugin dashboard
  5. Navigate to the ‘Favicon’ entry in the Appearance menu
  6. Select a master picture from the Media Library (optional)
  7. Click the ‘Generate Favicon’ button and follow the instructions.

Using FTP

  1. Download favicon-by-realfavicongenerator.zip
  2. Extract the favicon-by-realfavicongenerator directory to your computer
  3. Upload the favicon-by-realfavicongenerator directory to the /wp-content/plugins/ directory
  4. Activate the plugin on the Plugin dashboard
  5. Navigate to the ‘Favicon’ entry in the Appearance menu
  6. Select a master picture from the Media Library (optional)
  7. Click the ‘Generate Favicon’ button and follow the instructions.

2.) Configure iOS Web Clip Settings

In this section there are 3 settings tabs. In our case we only touched the first one ‘Settings’.

Step 2 iOS
We chose ‘Add Margins and plain background’. Set the ‘Background color’ to #ffffff (white) and the ‘Margin size (for a 57×57 icon)’ to 6px.

We didn’t need to touch the ‘Assets’ or ‘Dedicated picture’ tabs.

3.) Configure Favicon for Android Chrome Settings

In this section there are 4 settings tabs. In our case we only touch Main Settings and Options.

Step 3 Android
On the Main Settings tab we chose ‘Add margins and a plain background’ and for ‘Background color’ #ffffff (white) and for ‘Margin size (for a 96×96 icon)’ to 7px. For the ‘App Name’ we chose Creative Pixels (this is what will show up on iOS and Android for the name of the app icon). You only have about 15 characters for the name if you want it all to show up.

Step 3.2 Android
On the Options Settings tab we chose ‘Stand Alone’ with our website’s homepage url for the start url.

We didn’t need to touch the ‘Assets’ or ‘Dedicated picture’ tabs.

4.) Configure Windows Metro Settings

In this section there are 3 settings tabs. In our case we only touch Settings.

Step 4 Windows
On the Settings tab we chose the ‘Color’ we wanted the background around our logo to be a color from our logo so we chose #5bbad5. You should set this to a color you use on your own logo.

We didn’t need to touch the ‘Assets’ or ‘Dedicated picture’ tabs.

5.) Configure Safari Pinned Tab Settings

In this section there are 2 settings tabs. In our case we only touch Settings.

Step 5 Safari
On the Settings tab we chose ‘Turn your picture into a monochrom icon’ and slid the slider all the way to the right so we could see a silhouette of our entire logo. You might have to play with the slider here and adjust it accordingly.

For ‘Theme color’ we chose the same #5bbad5 from our logo color.

We didn’t need to touch the ‘Dedicated picture’ tab.

6.) Configure Favicon Generator Options Settings

In this section there are 4 settings tabs. In this case we will modify all 4 tabs.

Step 6.1 Favicon
On the Version/Refresh tab we chose the 2nd option ‘I want returning visitors to see my new favicon, not the old one’. (This means even current people who visit your site often will also see the new icons and not the old cached icons.)

Step 6.2 Favicon
On the Compression tab we chose the ‘High quality, low compression factor’ although I’d suggest just choosing the one that has the best compression, but still looks great.

Step 6.3 Favicon
On the Scaling algorithm tab we chose the ‘Nearest Neighbor’ option which was the clearest option for us.

Step 6.4 Favicon
On the App name tab we chose ‘Specific app name, override the page title’ and called it Creative Pixels. Just use the name of your website, but it should be less than 15 or so characters to fit.

That’s it!

Now just hit the ‘Generate your Favicons and HTML Code’ button and you’re done. Pretty simple and only takes about 10 minutes to add your iOS retina home screen icons.

Finished Product

iOS Finished Product
This is how visitors of your website will now add the home screen App like icon on iOS so they can easily visit your site directly from their home screen. On your iPhone or iPad hit the share button (square with arrow pointing up through it) when visiting a website then tap ‘Add to Home Screen’. Android should be similar, but please chime in, in the comments section below with specific directions.

Let me know if you have any questions in the comments section below.

← Back to Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *

Request Project Quote