Updated favicons (#87271) (#87504)

* Replace favicons * update build process to swap favion version * Replace favicons with built, branded version at build time * update snapshot * Addressing feedback
elastic · Jan 6, 2021 · 8a10a7d · 8a10a7d
1 parent a26f20e
commit 8a10a7d
Show file tree

Hide file tree

Showing 22 changed files with 60 additions and 118 deletions.
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-192x192.png b/src/core/server/core_app/assets/favicons/android-chrome-192x192.png
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-256x256.png b/src/core/server/core_app/assets/favicons/android-chrome-256x256.png
diff --git a/src/core/server/core_app/assets/favicons/apple-touch-icon.png b/src/core/server/core_app/assets/favicons/apple-touch-icon.png
diff --git a/src/core/server/core_app/assets/favicons/browserconfig.xml b/src/core/server/core_app/assets/favicons/browserconfig.xml
diff --git a/src/core/server/core_app/assets/favicons/favicon-16x16.png b/src/core/server/core_app/assets/favicons/favicon-16x16.png
diff --git a/src/core/server/core_app/assets/favicons/favicon-32x32.png b/src/core/server/core_app/assets/favicons/favicon-32x32.png
diff --git a/src/core/server/core_app/assets/favicons/favicon.distribution.png b/src/core/server/core_app/assets/favicons/favicon.distribution.png
diff --git a/src/core/server/core_app/assets/favicons/favicon.distribution.svg b/src/core/server/core_app/assets/favicons/favicon.distribution.svg
diff --git a/src/core/server/core_app/assets/favicons/favicon.ico b/src/core/server/core_app/assets/favicons/favicon.ico
diff --git a/src/core/server/core_app/assets/favicons/favicon.png b/src/core/server/core_app/assets/favicons/favicon.png
diff --git a/src/core/server/core_app/assets/favicons/favicon.svg b/src/core/server/core_app/assets/favicons/favicon.svg
diff --git a/src/core/server/core_app/assets/favicons/manifest.json b/src/core/server/core_app/assets/favicons/manifest.json
diff --git a/src/core/server/core_app/assets/favicons/mstile-150x150.png b/src/core/server/core_app/assets/favicons/mstile-150x150.png
diff --git a/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg b/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
diff --git a/src/core/server/core_app/integration_tests/static_assets.test.ts b/src/core/server/core_app/integration_tests/static_assets.test.ts
@@ -34,11 +34,11 @@ describe('Platform assets', function () {
   });
 
   it('exposes static assets', async () => {
-    await kbnTestServer.request.get(root, '/ui/favicons/favicon.ico').expect(200);
+    await kbnTestServer.request.get(root, '/ui/favicons/favicon.svg').expect(200);
   });
 
   it('returns 404 if not found', async function () {
-    await kbnTestServer.request.get(root, '/ui/favicons/not-a-favicon.ico').expect(404);
+    await kbnTestServer.request.get(root, '/ui/favicons/not-a-favicon.svg').expect(404);
   });
 
   it('does not expose folder content', async function () {

diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
@@ -76,33 +76,11 @@ export const Template: FunctionComponent<Props> = ({
         <meta name="viewport" content="width=device-width" />
         <title>Elastic</title>
         <Fonts url={uiPublicUrl} />
-        {/* Favicons (generated from http://realfavicongenerator.net/) */}
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href={`${uiPublicUrl}/favicons/apple-touch-icon.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href={`${uiPublicUrl}/favicons/favicon-32x32.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href={`${uiPublicUrl}/favicons/favicon-16x16.png`}
-        />
-        <link rel="manifest" href={`${uiPublicUrl}/favicons/manifest.json`} />
-        <link
-          rel="mask-icon"
-          color="#e8488b"
-          href={`${uiPublicUrl}/favicons/safari-pinned-tab.svg`}
-        />
-        <link rel="shortcut icon" href={`${uiPublicUrl}/favicons/favicon.ico`} />
-        <meta name="msapplication-config" content={`${uiPublicUrl}/favicons/browserconfig.xml`} />
+        {/* The alternate icon is a fallback for Safari which does not yet support SVG favicons */}
+        <link rel="alternate icon" type="image/png" href={`${uiPublicUrl}/favicons/favicon.png`} />
+        <link rel="icon" type="image/svg+xml" href={`${uiPublicUrl}/favicons/favicon.svg`} />
         <meta name="theme-color" content="#ffffff" />
+        <meta name="color-scheme" content="light dark" />
         <Styles darkMode={darkMode} />
 
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}

diff --git a/src/dev/build/build_distributables.ts b/src/dev/build/build_distributables.ts
@@ -61,6 +61,7 @@ export async function buildDistributables(log: ToolingLog, options: BuildOptions
    */
   await run(Tasks.CopySource);
   await run(Tasks.CopyBinScripts);
+  await run(Tasks.ReplaceFavicon);
   await run(Tasks.CreateEmptyDirsAndFiles);
   await run(Tasks.CreateReadme);
   await run(Tasks.BuildPackages);

diff --git a/src/dev/build/tasks/copy_source_task.ts b/src/dev/build/tasks/copy_source_task.ts
@@ -31,6 +31,8 @@ export const CopySource: Task = {
         '!src/**/*.{test,test.mocks,mock}.{js,ts,tsx}',
         '!src/**/mocks.ts', // special file who imports .mock files
         '!src/**/{target,__tests__,__snapshots__,__mocks__}/**',
+        '!src/core/server/core_app/assets/favicons/favicon.distribution.png',
+        '!src/core/server/core_app/assets/favicons/favicon.distribution.svg',
         '!src/test_utils/**',
         '!src/fixtures/**',
         '!src/cli/repl/**',

diff --git a/src/dev/build/tasks/index.ts b/src/dev/build/tasks/index.ts
@@ -38,6 +38,7 @@ export * from './transpile_babel_task';
 export * from './uuid_verification_task';
 export * from './verify_env_task';
 export * from './write_sha_sums_task';
+export * from './replace_favicon';
 
 // @ts-expect-error this module can't be TS because it ends up pulling x-pack into Kibana
 export { InstallChromium } from './install_chromium';
diff --git a/src/dev/build/tasks/replace_favicon.ts b/src/dev/build/tasks/replace_favicon.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { copy, Task } from '../lib';
+
+export const ReplaceFavicon: Task = {
+  description: 'Replacing favicons with built version',
+
+  async run(config, log, build) {
+    await copy(
+      config.resolveFromRepo('src/core/server/core_app/assets/favicons/favicon.distribution.png'),
+      build.resolvePath('src/core/server/core_app/assets/favicons/favicon.png')
+    );
+
+    await copy(
+      config.resolveFromRepo('src/core/server/core_app/assets/favicons/favicon.distribution.svg'),
+      build.resolvePath('src/core/server/core_app/assets/favicons/favicon.svg')
+    );
+  },
+};
diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap
diff --git a/x-pack/plugins/security/server/authorization/reset_session_page.tsx b/x-pack/plugins/security/server/authorization/reset_session_page.tsx
@@ -46,37 +46,15 @@ export function ResetSessionPage({
           <link href={path} rel="stylesheet" key={path} />
         ))}
         <Fonts url={uiPublicUrl} />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href={`${uiPublicUrl}/favicons/apple-touch-icon.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href={`${uiPublicUrl}/favicons/favicon-32x32.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href={`${uiPublicUrl}/favicons/favicon-16x16.png`}
-        />
-        <link rel="manifest" href={`${uiPublicUrl}/favicons/manifest.json`} />
-        <link
-          rel="mask-icon"
-          color="#e8488b"
-          href={`${uiPublicUrl}/favicons/safari-pinned-tab.svg`}
-        />
-        <link rel="shortcut icon" href={`${uiPublicUrl}/favicons/favicon.ico`} />
-        <script src={`${basePath}/internal/security/reset_session_page.js`} />
-        <meta name="msapplication-config" content={`${uiPublicUrl}/favicons/browserconfig.xml`} />
+        {/* The alternate icon is a fallback for Safari which does not yet support SVG favicons */}
+        <link rel="alternate icon" type="image/png" href={`${uiPublicUrl}/favicons/favicon.png`} />
+        <link rel="icon" type="image/svg+xml" href={`${uiPublicUrl}/favicons/favicon.svg`} />
         <meta name="theme-color" content="#ffffff" />
+        <meta name="color-scheme" content="light dark" />
       </head>
       <body>
         <I18nProvider>
-          <EuiPage style={{ minHeight: '100vh' }}>
+          <EuiPage paddingSize="none" style={{ minHeight: '100vh' }}>
             <EuiPageBody>
               <EuiPageContent verticalPosition="center" horizontalPosition="center">
                 <EuiEmptyPrompt