Insert a touch icon

Touch icons are icons used to represent your website on mobile devices, such as the home screens of iOS and Android devices. Adding a touch icon improves the user experience by making your website more visually appealing when added to the home screen.

Add a <link/> tag for the touch icon

To add a touch icon to your website, follow these steps:

1. Prepare your icon:

• Create an image for your touch icon. The recommended size is 180x180 pixels.
• Make sure the image is in .png format for better compatibility across devices.

2. Upload the icon to your site:

• Upload your icon image file to the RevasOS asset management system or to an accessible online location.

3. Add the <link/> tag:

• Open the Websites application in RevasOS;
• Click Settings;
• Click Custom Code Injection;
• Enter the tag <link/> in the Custom Code <\head> tag field to add the icon. The tag structure should look like this:

<link rel="apple-touch-icon" href="/images/touch-icon.png">

• If you want to add multiple icons for different resolutions (e.g. retina display devices), you can add multiple <link/> tags with the appropriate sizes:

<link rel="apple-touch-icon" sizes="180x180" href="/images/touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/touch-icon-120.png">

4. Verify and update:

• Once you've added the code, make sure you know where the code comes from and how it works. code to ensure its security.
• If you are sure that the code is correct and secure, select the Code is secure checkbox and click Update custom code to apply the changes.

5. Test your touch icon:

• Once the code is applied, add your site to the home screen of a mobile device (iOS or Android) to verify that the icon displays correctly.

With these steps, you will have successfully added a touch icon to your site, improving visibility and user experience on mobile devices.