Updated favicons (#87271)

* Replace favicons

* update build process to swap favion version

* Replace favicons with built, branded version at build time

* update snapshot

* Addressing feedback

src/core/server/core_app/assets/favicons/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

src/core/server/core_app/assets/favicons/favicon.distribution.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <style>path { fill: #1C1E23; } @media (prefers-color-scheme: dark) { path { fill: #FFFFFF; } }</style>
+  <path d="M180,94.27a35.54,35.54,0,0,0-23.43-33.52A50.82,50.82,0,0,0,65.45,21.17,27,27,0,0,0,23.62,52,35.88,35.88,0,0,0,6.44,106.26a35.5,35.5,0,0,0,17.1,13.07,51.64,51.64,0,0,0-.89,9.7,50.66,50.66,0,0,0,92,29.66,27,27,0,0,0,41.85-30.75A36,36,0,0,0,180,94.27ZM69.69,26.62a44.46,44.46,0,0,1,80.2,34L110.16,95.52l-39.39-18L63.08,61ZM49.77,22.18A21.25,21.25,0,0,1,62.7,26.57l-6,30.78-27-6.4a21.43,21.43,0,0,1,20-28.77ZM7,85.77A30.16,30.16,0,0,1,27.41,57.38L57,64.4,64,79.31,26.11,113.69A29.88,29.88,0,0,1,7,85.77Zm103.53,67.61a44.52,44.52,0,0,1-81.35-25.12,45.54,45.54,0,0,1,.89-8.87L68.75,84.21l39.54,18.09,8.76,16.79Zm19.78,4.44a21,21,0,0,1-12.86-4.44l5.87-30.68,27,6.33a21.49,21.49,0,0,1-10.14,26.32,21.24,21.24,0,0,1-9.84,2.45Zm22.32-35.24-29.69-7L115,100.53l38.84-34.15A29.81,29.81,0,0,1,173,94.25a30.16,30.16,0,0,1-20.45,28.31Z"/>
+</svg>

src/core/server/core_app/assets/favicons/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <style>path { fill: #1C1E23; } @media (prefers-color-scheme: dark) { path { fill: #FFFFFF; } }</style>
+  <path d="M11.19,101A30.34,30.34,0,0,1,7,85.75a30.09,30.09,0,0,1,20.5-28.4l29.6,7L64,79.25,40,101h9.9L68.8,83.85,106.23,101h9.11l-.34-.65,38.8-34.1A29.84,29.84,0,0,1,173,94.05a31.07,31.07,0,0,1-.9,7h7.21a35,35,0,0,0,.69-6.85,35.79,35.79,0,0,0-6.4-20.5,34.77,34.77,0,0,0-17-13,52.15,52.15,0,0,0,.9-9.69,51.15,51.15,0,0,0-9.7-30,50.78,50.78,0,0,0-57-18.4,51.44,51.44,0,0,0-25.4,18.6,27,27,0,0,0-16.2-5.7,26.52,26.52,0,0,0-16.3,5.3A27.3,27.3,0,0,0,23,34.86a26.69,26.69,0,0,0,.6,17.2A36.28,36.28,0,0,0,6.5,65.15,35.86,35.86,0,0,0,3.41,101ZM69.7,26.56A43.77,43.77,0,0,1,93.8,9.06a44.51,44.51,0,0,1,56.1,51.49l-39.7,34.9-39.4-18L63.1,61ZM28.6,40.86a20.6,20.6,0,0,1,3.7-9.5,22.21,22.21,0,0,1,7.6-6.7,20.23,20.23,0,0,1,9.9-2.5,20.76,20.76,0,0,1,12.9,4.4l-6,30.79L29.7,51A21.64,21.64,0,0,1,28.6,40.86Z"/><path d="M10,108v72H170V108Zm57.39,46.7a16.26,16.26,0,0,1-6.74,6.9A21.48,21.48,0,0,1,50.18,164H36V124H50.29a21.37,21.37,0,0,1,10.4,2.39,16.29,16.29,0,0,1,6.71,6.87,25.68,25.68,0,0,1,0,21.44ZM103,164H76V124h27v7H84.45v9.53h17.11v7H84.45V157H103Zm29.19,0H121.32l-13.81-40h9.39l9.67,30.39h.37L136.63,124H146Z"/><path d="M49.85,131.25H44.46v25.5h5.37q5.64,0,8.56-3T61.31,144q0-6.66-2.92-9.69C56.44,132.26,53.6,131.25,49.85,131.25Z"/>
+</svg>

src/core/server/core_app/assets/favicons/manifest.json

@@ -1,19 +0,0 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-256x256.png",
-            "sizes": "256x256",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}

src/core/server/core_app/assets/favicons/safari-pinned-tab.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="305.000000pt" height="305.000000pt" viewBox="0 0 305.000000 305.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,305.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M1611 2890 c-148 -40 -291 -131 -388 -246 l-42 -50 -57 -295 -56
--294 68 -139 69 -139 328 -149 329 -148 31 26 c18 15 170 148 339 296 l306
-269 7 82 c29 348 -182 660 -525 777 -96 33 -306 38 -409 10z"/>
-<path d="M771 2660 c-160 -33 -279 -170 -288 -333 -3 -45 0 -87 9 -112 l13
--40 224 -52 c124 -30 227 -50 231 -46 4 5 28 122 54 261 55 288 58 263 -39
-301 -63 24 -147 32 -204 21z"/>
-<path d="M386 2038 c-116 -64 -215 -186 -251 -312 -22 -76 -17 -239 10 -306
-46 -114 136 -216 237 -270 l59 -32 82 75 c45 40 188 169 317 286 129 117 236
-216 238 221 2 4 -23 64 -56 132 l-58 123 -250 58 c-137 32 -253 57 -259 57 -5
-0 -36 -15 -69 -32z"/>
-<path d="M2268 1632 l-327 -287 69 -129 68 -130 254 -59 253 -59 60 30 c113
-56 207 161 255 287 33 86 34 233 2 328 -24 67 -84 158 -138 209 -33 31 -143
-98 -158 97 -6 0 -158 -129 -338 -287z"/>
-<path d="M843 1331 c-175 -158 -324 -295 -331 -303 -19 -23 -26 -171 -13 -258
-70 -446 501 -735 936 -625 33 8 103 36 155 62 77 39 111 64 181 133 54 53 90
-98 97 120 6 19 34 156 62 303 l51 268 -74 142 -75 142 -318 145 c-176 80 -327
-149 -336 152 -13 5 -99 -67 -335 -281z"/>
-<path d="M2036 721 c-26 -138 -46 -258 -43 -266 4 -8 30 -27 59 -42 47 -25 64
--28 148 -28 82 0 103 4 151 26 77 36 130 87 169 161 28 53 35 76 38 144 3 46
--1 96 -7 115 l-11 34 -212 49 c-117 27 -220 51 -228 53 -13 4 -24 -41 -64
--246z"/>
-</g>
-</svg>

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 () {

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 */}

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);

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/**',

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';

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')
+    );
+  },
+};

x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><link href=\\"/some-css-file.css\\" rel=\\"stylesheet\\"/><link href=\\"/some-other-css-file.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"apple-touch-icon\\" sizes=\\"180x180\\" href=\\"/path/to/base/ui/favicons/apple-touch-icon.png\\"/><link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"32x32\\" href=\\"/path/to/base/ui/favicons/favicon-32x32.png\\"/><link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"16x16\\" href=\\"/path/to/base/ui/favicons/favicon-16x16.png\\"/><link rel=\\"manifest\\" href=\\"/path/to/base/ui/favicons/manifest.json\\"/><link rel=\\"mask-icon\\" color=\\"#e8488b\\" href=\\"/path/to/base/ui/favicons/safari-pinned-tab.svg\\"/><link rel=\\"shortcut icon\\" href=\\"/path/to/base/ui/favicons/favicon.ico\\"/><script src=\\"/path/to/base/internal/security/reset_session_page.js\\"></script><meta name=\\"msapplication-config\\" content=\\"/path/to/base/ui/favicons/browserconfig.xml\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/></head><body><div class=\\"euiPage euiPage--paddingMedium\\" style=\\"min-height:100vh\\"><main class=\\"euiPageBody\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></main></div></body></html>"`;
+exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><link href=\\"/some-css-file.css\\" rel=\\"stylesheet\\"/><link href=\\"/some-other-css-file.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/path/to/base/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/path/to/base/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage\\" style=\\"min-height:100vh\\"><main class=\\"euiPageBody\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></main></div></body></html>"`;

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