How to Select a Home Screen (iOS) App Icon for Your Website

iOS device users have an option to Add to Home Screen from the Share menu. This option allows the user to save the URL to their Home Screen for quick access. If you have installed the Favicon by RealFaviconGenerator plugin, then you can customize the image that is used (as the App Icon) on their Home Screen. In this guide, you will learn how to use the Favicon by RealFaviconGenerator plugin to customize the App Icon displayed on iOS devices.

  1. Log into your WordPress Administrative Dashboard.

  2. Hover over the Appearance menu option and click to select Favicon.

  3. Under the Favicon generation section enter the URL to the image you would like to use in the Master picture URL field. Or, you can select an image from your Media Library using the Select from the Media Library button.

  4. Once you have entered the URL or selected an image from the Media Library, click on the Generate Favicon button.

  5. After you land on the RealFaviconGenerator Tool page, the first section Favicon for iOS – Web Clip is displayed with the Settings tab active. The Use the original favicon as is. radio button is automatically selected. To the right is a preview depicting how your favicon will appear as an iOS Web Clip. You can leave this setting as the default, unless your design is impacted by the cropped corners (see note below).

  6. Scroll down to the Favicon Generator Options. The first tab, Version/Refresh allows you to select an option for how to handle cached versions of your favicon. If this is the first time you are creating a favicon for your website, you can leave the default option selected. If you are replacing your existing favicon, then select the second option: “The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one.” More than likely the randomly generated fields should not need to be modified. However, for more advanced users, this field will handle the redirect from the old favicon to the new one.

  7. Click on the Compression tab. This tab will load previews of the original image, uncompressed as well as other levels of quality and compression. Select which ever compressed version appears best at the highest compression. This will ensure that your favicon does not affect the load time of your website by loading an unnessecarily large/uncompressed image.

  8. Next, click on the App name tab. Here you can specify the text to appear just below the iOS Web Clip (on the Home Screen). Click the radio button next to the option “Specific app name, override the page title” then enter the name of your website into the field below.

  9. Finally, click on the Generate your Favicons and HTML code button.

  10. Your favicon(s) will be generated and you will be redirected back to your WP-Admin Dashboard. There you will see a preview of how your iOS Web Clip will appear.

Congratulations! Now when your visitors save a link on your website, your favicon and website name will be used as the iOS Web Clip, added to their Home Screen.

John-Paul Briones Content Writer II

John-Paul is an Electronics Engineer that spent most of his career in IT. He has been a Technical Writer for InMotion since 2013.

More Articles by John-Paul

Was this article helpful? Let us know!