How To Add a Touch Icon for iOS and Android using Page Templates

Knowledge Articles
1

Overview

This article explains how to use the Auth0 Management API to modify the Universal Login page template. The modification adds a custom touch icon that is displayed when a user adds the web page to the home screen on an iOS or Android device.

Applies To

  • Page Templates
  • iOS
  • Android

Solution

To add a custom touch icon, the Universal Login page template must be updated via a PUT request to the Auth0 Management API.

  1. Make a PUT request to the following Management API endpoint:
/v2/branding/put-universal-login
  1. The body of the request must be a JSON object containing a template key. The value for this key is a string that contains the entire HTML for the page.
  2. To ensure a custom logo appears as the touch icon on both iOS and Android devices, add specific link tags to the section of the HTML page template.
  3. To specify the icon for Apple iOS devices, add the following line to the section of the page template, replacing <YOUR_LOGO_URL> with the actual URL to the icon image:
<link rel="apple-touch-icon" href="<YOUR_LOGO_URL>">
  1. To specify the icon for Android devices, add the following line to the section, replacing <YOUR_LOGO_URL> with the URL to a 192x192 pixel icon image:
<link rel="icon" sizes="192x192" href="<YOUR_LOGO_URL>">

The following example shows a complete page template with both lines correctly placed within the section:

<!DOCTYPE html>
<html>
<head>
 <link rel="apple-touch-icon" href="<YOUR_LOGO_URL>">
 <link rel="icon" sizes="192x192" href="<YOUR_LOGO_URL>">
 {%- auth0:head -%}
</head>
<body>{%- auth0:widget -%}</body>
</html>