Style consistency pass

Noticed something annoying when attempting to test on Edge (which still doesn't work for unrelated reasons.)
immersive-web · Aug 29, 2019 · 4ff2c54 · 4ff2c54
1 parent 132c2d8
commit 4ff2c54
Show file tree

Hide file tree

Showing 26 changed files with 135 additions and 117 deletions.
diff --git a/360-photos.html b/360-photos.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>360 Photos</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/controller-state.html b/controller-state.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Controller State</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/explainer.html b/explainer.html
@@ -9,8 +9,8 @@
     <meta name='twitter:title' content='WebXR Samples Explainer'>
     <meta name='twitter:description' content='Overview of how the WebXR samples are designed'>
 
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
 
     <link rel='stylesheet' href='css/stylesheet.css'>
     <link rel='stylesheet' href='css/pygment_trac.css'>

diff --git a/framebuffer-scaling.html b/framebuffer-scaling.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Framebuffer Scaling</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/immersive-vr-session.html b/immersive-vr-session.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Immersive VR Session</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/index.html b/index.html
@@ -11,8 +11,8 @@
     <meta name='twitter:title' content='WebXR Samples'>
     <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>
 
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
 
     <link rel='stylesheet' href='css/stylesheet.css'>
     <link rel='stylesheet' href='css/pygment_trac.css'>

diff --git a/inline-session.html b/inline-session.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Inline Session</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/input-selection.html b/input-selection.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Input Selection</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/input-tracking.html b/input-tracking.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Input Tracking</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/js/third-party/webxr-polyfill/build/webxr-polyfill.module.js b/js/third-party/webxr-polyfill/build/webxr-polyfill.module.js
@@ -2028,9 +2028,11 @@ const polyfillGetContext = (Canvas) => {
   const getContext = Canvas.prototype.getContext;
   Canvas.prototype.getContext = function (contextType, glAttribs) {
     const ctx = getContext.call(this, contextType, glAttribs);
-    ctx[POLYFILLED_XR_COMPATIBLE] = true;
-    if (glAttribs && ('xrCompatible' in glAttribs)) {
-      ctx[XR_COMPATIBLE] = glAttribs.xrCompatible;
+    if (ctx) {
+      ctx[POLYFILLED_XR_COMPATIBLE] = true;
+      if (glAttribs && ('xrCompatible' in glAttribs)) {
+        ctx[XR_COMPATIBLE] = glAttribs.xrCompatible;
+      }
     }
     return ctx;
   };
@@ -5236,8 +5238,24 @@ class XRDevice extends EventTarget {
   }
 }
 
+let oculusGo = {
+  mapping: 'xr-standard',
+  profiles: ['oculus-go', 'touchpad-controller'],
+  buttons: {
+    length: 3,
+    0: 1,
+    1: null,
+    2: 0
+  },
+  gripTransform: {
+    orientation: [Math.PI * 0.11, 0, 0, 1]
+  }
+};
 let oculusTouch = {
   mapping: 'xr-standard',
+  displayProfiles: {
+    'Oculus Quest': ['oculus-quest', 'oculus-touch', 'thumbstick-controller']
+  },
   profiles: ['oculus-touch', 'thumbstick-controller'],
   axes: {
     length: 4,
@@ -5260,6 +5278,26 @@ let oculusTouch = {
     orientation: [Math.PI * 0.11, 0, 0, 1]
   }
 };
+let openVr = {
+  mapping: 'xr-standard',
+  profiles: ['openvr-controller', 'touchpad-controller'],
+  displayProfiles: {
+    'HTC Vive': ['htc-vive', 'touchpad-controller'],
+    'HTC Vive DVT': ['htc-vive', 'touchpad-controller']
+  },
+  buttons: {
+    length: 3,
+    0: 1,
+    1: 2,
+    2: 0
+  },
+  gripTransform: {
+    position: [0, 0, 0.05, 1],
+  },
+  targetRayTransform: {
+    orientation: [Math.PI * -0.08, 0, 0, 1]
+  }
+};
 let windowsMixedReality = {
   mapping: 'xr-standard',
   profiles: ['windows-mixed-reality', 'touchpad-thumbstick-controller'],
@@ -5276,23 +5314,12 @@ let windowsMixedReality = {
   }
 };
 let GamepadMappings = {
-  "Oculus Touch (Right)": oculusTouch,
-  "Oculus Touch (Left)": oculusTouch,
-  "Oculus Go Controller": {
-    mapping: 'xr-standard',
-    profiles: ['oculus-go', 'touchpad-controller'],
-    buttons: {
-      length: 3,
-      0: 1,
-      1: null,
-      2: 0
-    },
-    gripTransform: {
-      orientation: [Math.PI * 0.11, 0, 0, 1]
-    }
-  },
-  "Windows Mixed Reality (Right)": windowsMixedReality,
-  "Windows Mixed Reality (Left)": windowsMixedReality,
+  'Oculus Go Controller': oculusGo,
+  'Oculus Touch (Right)': oculusTouch,
+  'Oculus Touch (Left)': oculusTouch,
+  'OpenVR Gamepad': openVr,
+  'Windows Mixed Reality (Right)': windowsMixedReality,
+  'Windows Mixed Reality (Left)': windowsMixedReality,
 };
 
 const HEAD_ELBOW_OFFSET_RIGHTHANDED = fromValues$1(0.155, -0.465, -0.15);
@@ -5451,7 +5478,7 @@ const PRIVATE$14 = Symbol('@@webxr-polyfill/XRRemappedGamepad');
 const PLACEHOLDER_BUTTON = { pressed: false, touched: false, value: 0.0 };
 Object.freeze(PLACEHOLDER_BUTTON);
 class XRRemappedGamepad {
-  constructor(gamepad, map) {
+  constructor(gamepad, display, map) {
     if (!map) {
       map = {};
     }
@@ -5477,10 +5504,16 @@ class XRRemappedGamepad {
         map.targetRayTransform.position || [0, 0, 0]
       );
     }
+    let profiles = map.profiles;
+    if (map.displayProfiles) {
+      if (display.displayName in map.displayProfiles) {
+        profiles = map.displayProfiles[display.displayName];
+      }
+    }
     this[PRIVATE$14] = {
       gamepad,
       map,
-      profiles: map.profiles || [gamepad.id],
+      profiles: profiles || [gamepad.id],
       mapping: map.mapping || gamepad.mapping,
       axes,
       buttons,
@@ -5504,6 +5537,11 @@ class XRRemappedGamepad {
         axes[i] = gamepad.axes[i];
       }
     }
+    if (map.axes && map.axes.invert) {
+      for (let axis of map.axes.invert) {
+        axes[axis] *= -1;
+      }
+    }
     let buttons = this[PRIVATE$14].buttons;
     for (let i = 0; i < buttons.length; ++i) {
       if (map.buttons && i in map.buttons) {
@@ -5543,8 +5581,9 @@ class XRRemappedGamepad {
   }
 }
 class GamepadXRInputSource {
-  constructor(polyfill, primaryButtonIndex = 0) {
+  constructor(polyfill, display, primaryButtonIndex = 0) {
     this.polyfill = polyfill;
+    this.display = display;
     this.nativeGamepad = null;
     this.gamepad = null;
     this.inputSource = new XRInputSource(this);
@@ -5565,7 +5604,7 @@ class GamepadXRInputSource {
     if (this.nativeGamepad !== gamepad) {
       this.nativeGamepad = gamepad;
       if (gamepad) {
-        this.gamepad = new XRRemappedGamepad(gamepad, GamepadMappings[gamepad.id]);
+        this.gamepad = new XRRemappedGamepad(gamepad, this.display, GamepadMappings[gamepad.id]);
       } else {
         this.gamepad = null;
       }
@@ -5774,7 +5813,7 @@ class WebVRDevice extends XRDevice {
         if (gamepad && gamepad.displayId > 0) {
           let inputSourceImpl = prevInputSources[i];
           if (!inputSourceImpl) {
-            inputSourceImpl = new GamepadXRInputSource(this, this.getPrimaryButtonIndex(gamepad));
+            inputSourceImpl = new GamepadXRInputSource(this, this.display, this.getPrimaryButtonIndex(gamepad));
           }
           inputSourceImpl.updateFromGamepad(gamepad);
           this.gamepadInputSources[i] = inputSourceImpl;

diff --git a/positional-audio.html b/positional-audio.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Positional Audio</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <script src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
 
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.

diff --git a/proposals/index.html b/proposals/index.html
@@ -11,8 +11,8 @@
     <meta name='twitter:title' content='WebXR Samples'>
     <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>
 
-    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>
 
     <link rel='stylesheet' href='../css/stylesheet.css'>
     <link rel='stylesheet' href='../css/pygment_trac.css'>

diff --git a/proposals/phone-ar-hit-test.html b/proposals/phone-ar-hit-test.html
@@ -25,12 +25,11 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>
+    <link rel='stylesheet' href='../css/common.css'>
 
     <title>AR Hit Test</title>
-
-    <link href='../css/common.css' rel='stylesheet'></link>
   </head>
   <body>
     <header>

diff --git a/proposals/phone-ar.html b/proposals/phone-ar.html
@@ -25,12 +25,11 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>
+    <link rel='stylesheet' href='../css/common.css'>
 
     <title>Phone AR</title>
-
-    <link href='../css/common.css' rel='stylesheet'></link>
   </head>
   <body>
     <header>

diff --git a/reduced-bind-rendering.html b/reduced-bind-rendering.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Reduced Bind Rendering</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">

diff --git a/room-scale.html b/room-scale.html
@@ -25,13 +25,12 @@
     <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
 
     <title>Room Scale</title>
 
-    <link href='css/common.css' rel='stylesheet'></link>
-
     <!-- Chrome Origin Trial token for https://immersive-web.github.io.
     Enables WebXR for all visitors by default during the trial period -->
     <meta http-equiv="origin-trial" content="AsRrvyQjAl9rU6y9LjRT0zG1MSdLR8WLtEtvZlroYAASlD4y5T0pWay1oL+NR9g6oxoahdrVHq3YEz+dVK1cBwMAAABfeyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3MDA1Mjg3OH0=">