favicon png

application/Espo/Core/Utils/ClientManager.php

@@ -45,8 +45,8 @@ class ClientManager
 {
     private string $mainHtmlFilePath = 'html/main.html';
     private string $runScript = 'app.start();';
-    private string $favicon = 'client/img/favicon.ico';
+    private string $faviconAlternate = 'client/img/favicon.ico';
-    private string $favicon196 = 'client/img/favicon196x196.png';
+    private string $favicon = 'client/img/favicon.svg';
     private string $basePath = '';
     private string $apiUrl = 'api/v1';
     private string $applicationId = 'espocrm';
@@ -170,8 +170,8 @@ class ClientManager
 
         $cssFileList = $this->metadata->get(['app', 'client', 'cssList'], []);
         $linkList = $this->metadata->get(['app', 'client', 'linkList'], []);
-        $favicon196Path = $this->metadata->get(['app', 'client', 'favicon196']) ?? $this->favicon196;
+        $faviconAlternate = $this->metadata->get('app.client.favicon') ?? $this->faviconAlternate;
-        $faviconPath = $this->metadata->get(['app', 'client', 'favicon']) ?? $this->favicon;
+        [$favicon, $faviconType] = $this->getFaviconData();
 
         $scriptsHtml = implode('',
             array_map(fn ($file) => $this->getScriptItemHtml($file, $appTimestamp), $jsFileList)
@@ -205,8 +205,9 @@ class ClientManager
             'scriptsHtml' => $scriptsHtml,
             'additionalStyleSheetsHtml' => $additionalStyleSheetsHtml,
             'linksHtml' => $linksHtml,
-            'favicon196Path' => $favicon196Path,
+            'faviconAlternate' => $faviconAlternate,
-            'faviconPath' => $faviconPath,
+            'favicon' => $favicon,
+            'faviconType' => $faviconType,
             'ajaxTimeout' => $this->config->get('ajaxTimeout') ?? 60000,
             'internalModuleList' => Json::encode($internalModuleList),
             'bundledModuleList' => Json::encode($this->getBundledModuleList()),
@@ -390,4 +391,15 @@ class ClientManager
     {
         $this->applicationId = $applicationId;
     }
+
+    /**
+     * @return array{string, string}
+     */
+    private function getFaviconData(): array
+    {
+        $faviconSvgPath = $this->metadata->get('app.client.faviconSvg') ?? $this->favicon;
+        $faviconType = str_ends_with($faviconSvgPath, '.svg') ? 'image/svg+xml' : 'image/png';
+
+        return [$faviconSvgPath, $faviconType];
+    }
 }

client/img/favicon.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666665 8.4666665"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="favicon-32.svg"
+   inkscape:export-filename="favicon-32.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="16"
+     inkscape:cx="22.15625"
+     inkscape:cy="21.125"
+     inkscape:window-width="1280"
+     inkscape:window-height="971"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2" /><g
+     inkscape:label="icon"
+     inkscape:groupmode="layer"
+     id="layer1"><circle
+       style="fill:#9faabd;fill-opacity:1;stroke:none;stroke-width:0.264644;stroke-dasharray:none;stroke-opacity:0.196891"
+       id="path3857"
+       cx="4.2391791"
+       cy="4.2440238"
+       inkscape:label="circle"
+       r="4.2198539" /><g
+       style="overflow:visible;fill:#ffffff;fill-opacity:1"
+       id="g165"
+       transform="matrix(0.23872556,0,0,0.25044154,-18.034354,5.1243882)"
+       inkscape:label="letter"><switch
+         transform="matrix(1.089,0,0,1.089,-0.89733,-0.52658)"
+         id="switch148"
+         style="fill:#ffffff;fill-opacity:1">
+		<foreignObject
+   width="1"
+   height="1"
+   requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/">
+		</foreignObject>
+		<g
+   transform="matrix(0.96767,0,0,0.96767,3.9659,-1.2011)"
+   id="g146"
+   style="fill:#ffffff;fill-opacity:1">
+            
+            
+            <g
+   fill="#ffffff"
+   id="g144"
+   transform="matrix(0.53332351,0,0,0.52516097,68.999419,-22.209109)"
+   style="fill:#ffffff;fill-opacity:1">
+                <path
+   d="M 45.672,58.148 H 27.146 c -2.861,0 -5.614,-0.651 -8.257,-1.953 -2.861,-1.409 -5.043,-3.651 -6.547,-6.725 -1.503,-3.074 -2.254,-6.455 -2.254,-10.145 0,-3.652 0.724,-6.961 2.173,-9.926 1.594,-3.219 3.803,-5.569 6.628,-7.052 1.557,-0.795 3.052,-1.355 4.482,-1.682 1.43,-0.325 3.07,-0.488 4.917,-0.488 h 17.168 v 6.789 H 29.57 c -1.415,0 -2.602,0.187 -3.563,0.558 -0.961,0.372 -1.912,1.037 -2.855,1.994 -0.943,0.957 -1.597,1.887 -1.959,2.791 -0.363,0.902 -0.543,2.027 -0.543,3.375 h 25.023 v 6.789 H 20.648 c 0,1.24 0.164,2.325 0.491,3.256 0.327,0.93 0.919,1.887 1.776,2.871 0.856,0.985 1.749,1.732 2.677,2.242 0.929,0.512 2.03,0.767 3.306,0.767 h 16.774 z"
+   id="path136"
+   style="fill:#ffffff;fill-opacity:1" />
+                
+                
+                
+            </g>
+        </g>
+	</switch></g></g></svg>

html/main.html

@@ -10,9 +10,8 @@
         <meta name="description" content="{{applicationDescription}}">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="shortcut icon" sizes="196x196" href="{{basePath}}{{favicon196Path}}">
+        <link rel="alternate icon" href="{{basePath}}{{faviconAlternate}}" type="image/x-icon">
-        <link rel="icon" href="{{basePath}}{{faviconPath}}" type="image/x-icon">
+        <link rel="icon" href="{{basePath}}{{favicon}}" type="{{faviconType}}">
-        <link rel="shortcut icon" href="{{basePath}}{{faviconPath}}" type="image/x-icon">
         <script type="text/javascript" nonce="{{nonce}}">
             window.addEventListener('DOMContentLoaded', () => {
                 require('{{appClientClassName}}', App => {

schema/metadata/app/client.json

@@ -71,11 +71,11 @@
         },
         "favicon": {
             "type": "string",
-            "description": "A favicon image path. The default value: client/img/favicon.ico."
+            "description": "A favicon. SVG or PNG. The default value: client/img/favicon.svg."
         },
-        "favicon196": {
+        "faviconAlternate": {
             "type": "string",
-            "description": "A big favicon image path. The default value: client/img/favicon196x196.png."
+            "description": "An ico 16px favicon. The default value: client/img/favicon.ico."
         }
     }
 }