Customizing the mobile site icon

Mobile device users can save a shortcut on their device that they can tap to go directly to your school's website. The icon that's used for your school's site is a larger version of your site's favicon, the little image that appears to the left of the URL in a browser's address bar. If you want to though, you can insert a snippet of code onto your website that will allow you to change the icon that's used for your app when users bookmark it to their phones and tablets. 

Note that this applies only for the image used to represent a bookmark of a school's mobile pages - for schools using the Finalsite iOS app, the icon used for the app is fixed during the app deployment process, and can't be changed later.

The basic procedure is to create and upload a new icon to the root directory in File Manager, then add some custom code to a layout in Layout Manager which points to that icon.

Custom Icons

You can create the custom icon manually in an application like Photoshop, or any of a number of image-editing tools. If you don't have access to that software but you do already have a native file that you’d like to work with, you can find suitable web-based icon generators all over the web. 

The icon dimensions that we suggest using are 114 by 114 pixels. Icons have to be square, and 114x114 will work well on older devices as well as newer phones/tablets (such as iPads with Apple's high-resolution "Retina" display). It's always a good idea to test your image out on as many devices as possible to make sure it looks good to you!

When you've got your icon adjusted exactly the way you want it, be sure to save the file with the filename "mobile-icon.png" - note that this is a .PNG file type, not a .jpg or .gif. You must save your icon as a .png file!

Once you've saved your icon file, upload it to File Manager. If you have a non-responsive, fixed-width layout site, upload the icon to the root "Public Files" directory:

If you have a responsive website design (that is, a site whose layout adjusts to fit the width of the user's screen), send us a ticket and attach your icon to it. We'll drop the file in a specific location on the server for you.

Custom Code

Now that you've saved your icon, it's time to insert the code on your website that will direct iOS devices to display that icon for users. Go to the Support Menu > Design > Layouts


Find the "default" layout that's currently in use for your site. Open it up, then copy and paste this code into the "Script and Style Code" field there:

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png”/>


If there's already some content in the "Script and Style Code" field, that's okay - just hit Enter a few times to give yourself some whitespace, and paste the code in there.

That's it! Once you've uploaded the icon and set the code for it, users should see that icon on their devices after the next time they use the app.

Was this article helpful?
1 out of 1 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.