Favicon Not Working On iOS Devices?
Updated: Jul 10, 2023
Favicon Not Working On iOS Devices?
So you have added your Favicon image to your Wix website and you notice while it is displaying pefectly on Google, it is not on iOS devices. In this guide I'll show you how to add a Favicon on your Wix site to ensure your it displays across all iOS devices, in both Bookmarking and Home Screen contexts (if you don't have a Wix site, the steps are pretty similar).
Step 1: The Image
Firstly, you are going to need the image you want to use, and later, the image URL. For your favicon to work on iOS devices it needs to be no more than 180x180 pixels and be in non-transparent PNG format. Now, Upload the image to Wix (when media is uploaded to Wix it is assigned a URL, you're going to need this URL to add into a line of code).
>> Access your Wix Media Gallery and upload your favicon, once uploaded, select your favicon
>> Click the 'File Info' drop down (bottom right), then click 'Copy URL' Paste this somewhere for the moment.
Step 2: Now, The Code
This is the code you are going to need to insert into the header of your website:
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
Replace the red text with the full image URL you copied, it will look something like this (Wix media has really long URL's):
<link rel="apple-touch-icon" sizes="180x180" href="https://static.wixstatic.com/media/8625ec_4b7bdh2ed67f2474dbf9715f616c5b4e0~mv2.png" />
Now, we need to add this code to your page header, to do this follow the steps below:
>> On the left sidebar, hit 'Settings', then scroll down to the bottom and click 'Custom Code', you can also access 'Settings' via your Wix dashboard
>> Once you click 'Custom Code' you'll see the following screen, now click the blue 'Add Custom Code' button
>> The following box will pop up. Paste the code into the box (give the code a name if you want in the field below), keep all other settings as they are and click 'Apply'.
And that's it! It can take a few hours to show but those are the steps to make sure your favicon shows on iOS devices.
Web App Icon
To add a custom web app icon, you do the exact same thing, but add the following line of code in addition to the one we just added for the Favicon (remember to replace the red URL shown here to the one you copied earlier.
<link rel="icon" type="image/png" href="https://static.wixstatic.com/media/8625ec_1e78e8eaa740589e5cc41f8254a94c~mv2.png">
Changing Web App Title
Depending on your website title, or business name, when you add the bookmark or add to the home screen you may find the name cropped or missing a space, this is because it exceeds the character limit (between 11 and 15 depending on character width), so what you'll do now is set the title to be used by another piece of code (changing the red text with the new title). Simply add it to the same box as outlined above in Step 2.
<meta name="apple-mobile-web-app-title" content="AppTitle">
If you want to learn more this, or if you want to add additional code for different environments, visit Apple's Developer site >
RELATED ARTICLES
Hausman Graphics is a certified Wix Partner and creates stunning websites for businesses in the UK, USA and beyond. If you are looking for a new website, a fresh look for your current website, or are seeking to improve your performance on Google, contact us today and let's get started. Or if you'd like to learn a little more first, read our recent feature in The Drum.