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.
- Log into your WordPress Administrative Dashboard.
Hover over the Appearance menu option and click to select Favicon.
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.
NOTE: The image you select should be a square picture, at least 70x70px, although the recommended size is 260x260px. Following these recommendations will result in optimal performance and graphics using this plugin.
Once you have entered the URL or selected an image from the Media Library, click on the Generate Favicon button.
NOTICE: Once you click on the Generate Favicon button, you will be redirected to the third party website (realfavicongenerator.net) to use the RealFaviconGenerator Tool. You will be redirected back to your WordPress Administrative Dashboard, upon completion.
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).
NOTE: iOS Web Clips are designed with rounded corners. In the simulator, a preview of your favicon as a iOS Web Clip is displayed. If your design is disrupted by the cropped rounded corners, click to select the Add margins and a plain background radio button and the preview will reappear with margins on all sides of the image. You can choose a color for the border by clicking on a color from your favicon, in the preview/simulator. Finally, you can drag the Margin size slider left/right to decrease/increase the thickness of the margin/border to make the Web Clip appear as you desire.
NOTE: If your initial selection for an image does not crop well, click on the Dedicated picture tab. There, you can upload an alternative picture to use for iOS devices. Simply click on the Pick picture for iOS button and select the image you would like to use (from your computer–remember you are no longer in your WP-Admin Dashboard) and then click Open.
NOTE: The Assets tab is a more advanced tab, meaning the typical user may not need to adjust these settings. However, for more advanced users, this tab displays the alternative formats for compatibility with older iOS versions. If you believe this is necessary for your users you can click on the checkboxes to create icons that are compatible. From the Micellaneous options you may choose to only use the highest resolution for your icon (in the HTML) and choose to create precomposed icons for each image.
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.
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.
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.
Finally, click on the Generate your Favicons and HTML code button.
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.