Adding your own custom home screen icon to your mobile website

When adding a mobile website to your smartphone's home screen, it will usually show a preview of the website inside of the home screen website icon. You can add your own custom website icon following the steps below.

Choose or create your website icon

Before adding your own home screen website icon, you will need to create your own home screen website icon if you don't already have one. The recommended size for the website icon is 144px by 144px. We also recommend having your website icon be a .png file without a transparent background or transparencies. If your icon has a transparent background or transparencies, it may show completely black when adding a mobile website to your home screen.

Upload your icon to the mobile website builder

1. On the website builder's main screen, select "Uploaded Files":
   
   
   
   
   
2. A pop-up screen will appear giving the option to upload files. In the "Add New:" field select "Choose File." This will allow selecting a file from your computer. Find your website icon file and add it.
   
   
   
   
   
3. In the "File Name" field, give your file a name:
   
   
   
   
   
4. Click "Add" to upload your file:
   
   
   
   
   
5. Once the file is uploaded it will show below the uploading options:
   
   
   
   
   
6. Click "Show URL" to view the link to the file:
   
   
   
   
   
7. A pop-up will show the file URL. You will need this to copy and paste this URL later:
   
   
   
   

Adding code to specify a home screen icon

1. You will need to use the following code to add to your mobile website:
   
   <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
   
   
   
2. Replace "apple-icon-144x144.png" with the file URL shown in the previous section "Upload your icon to the mobile website builder." For example, it should show:
   
   <link rel="apple-touch-icon" sizes="144x144" href="http://testingicons.mymobisite.us/app/files/d9c362e2-3fac-4846-9444-9e5b6d30c144.png" />
   
   
   
3. Copy your code.
   
   
   
4. On the website builder's main screen, select "Site Footer and Header":
   
   
   
   
   
5. A pop-up will show options to add code in the head or body of your mobile website. In the head section, paste the code from step #2:
   
   
   
   
6. Click "Save":
   
   
   
   
   
7. That's it! Next time you or another user adds your mobile website to their smartphone home screen they will see the icon you uploaded.
   
   Please note that if you or another user previously added your mobile website to their smartphone's home screen before uploading the new website icon, it will still show the old icon. They will need to add your website to your home screen again to show the new website icon.

Adding a website to your smartphone home screen

Please view the articles below to learn how to add a website to your smartphone home screen. Please note that this may different depending on your device.

Click here to view instructions for iPhone users

Click here to view instructions for Android users