doc: Ensure website favicons render correctly on all platforms (Robot…

…Locomotion#14761)
mqnc · Mar 15, 2021 · 03969a9 · 03969a9
1 parent e8f59d2
commit 03969a9
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 3 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -3,6 +3,7 @@ WORKSPACE diff=python
 **/*.bazel diff=python
 **/*.bzl diff=python
 **/*.cps diff=json
+**/site.webmanifest diff=json
 
 # These lines tell git diff viewers to ignore data objects.
 # Wavefront geometry definition

diff --git a/doc/BUILD.bazel b/doc/BUILD.bazel
@@ -37,13 +37,45 @@ drake_py_library(
     deps = ["@rules_python//python/runfiles"],
 )
 
+# For maximum browser compatibility these should be at the root of the
+# generated website and should not be renamed.
+filegroup(
+    name = "favicon",
+    srcs = [
+        # Manual resizing and padding of "assets/drake-dragon.png" to
+        # 192x192px.
+        "android-chrome.png",
+        # Manual resizing and padding of "assets/drake-dragon.png" to
+        # 180x180px.
+        "apple-touch-icon.png",
+        # Minimal configuration for Microsoft browsers. Versions of Edge prior
+        # to the change to WebKit always request a file named
+        # "browserconfig.xml" whether or not an alternative is specified in the
+        # HTML.
+        "browserconfig.xml",
+        # Apple Safari always requests a file named "favicon.ico" whether or
+        # not an alternative favicon is specified in the HTML.
+        # Manual resizing and padding of "assets/drake-dragon.png" to 32x32px
+        # and conversion to ICO format.
+        "favicon.ico",
+        # Manual resizing and padding of "assets/drake-dragon.png" to 32x32px.
+        "favicon.png",
+        # Mask icon for Safari pinned tabs.
+        # Manual removal of colors and layers from "assets/drake-dragon.svg"
+        # and transformation to a 0 0 16 16 view box.
+        "mask-icon.svg",
+        # Site manifest primarily for Android and Chrome.
+        # https://developer.mozilla.org/en-US/docs/Web/Manifest
+        "site.webmanifest",
+    ],
+)
+
 filegroup(
     name = "images",
     srcs = [
         "images/drake-dragon.png",
         "images/drake-logo.svg",
         "images/drake-logo-white.svg",
-        "images/favicon.png",
         "images/jenkins_bot_reviewable_comment.png",
     ],
 )
@@ -77,6 +109,7 @@ filegroup(
         "assets/**/*.js",
     ]),
     data = [
+        ":favicon",
         ":images",
         ":third_party_data",
     ],

diff --git a/doc/_layouts/default.html b/doc/_layouts/default.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
+    <meta name="msapplication-config" content="{{ '/browserconfig.xml' | relative_url }}"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta charset="utf-8"/>
-    <link rel="shortcut icon" href="{{ '/images/favicon.png' | relative_url }}"/>
+    <link rel="apple-touch-icon" type="image/png" href="{{ '/apple-touch-icon.png' | relative_url }}"/>
+    <link rel="manifest" type="application/manifest+json" href="{{ '/site.webmanifest' | relative_url }}"/>
+    <link rel="mask-icon" type="image/svg+xml" href="{{ '/mask-icon.svg' | relative_url }}" color="#990000"/>
+    <link rel="shortcut icon" type="image/png" href="{{ '/favicon.png' | relative_url }}"/>
     <title>Drake: {{ page.title }}</title>
     <meta
       name="description"

diff --git a/doc/android-chrome.png b/doc/android-chrome.png
diff --git a/doc/apple-touch-icon.png b/doc/apple-touch-icon.png
diff --git a/doc/browserconfig.xml b/doc/browserconfig.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication></msapplication>
+</browserconfig>
diff --git a/doc/favicon.ico b/doc/favicon.ico
diff --git a/doc/favicon.png b/doc/favicon.png
diff --git a/doc/images/favicon.README.txt b/doc/images/favicon.README.txt
diff --git a/doc/images/favicon.png b/doc/images/favicon.png
diff --git a/doc/mask-icon.svg b/doc/mask-icon.svg
diff --git a/doc/site.webmanifest b/doc/site.webmanifest
@@ -0,0 +1,12 @@
+{
+  "name": "Drake",
+  "icons": [
+    {
+      "src": "android-chrome.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "background_color": "#000000",
+  "theme_color": "#990000"
+}