fix(webui): favicon for iOS, Android and Windows 10 (#547)

komga-webui/public/index.html

@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Komga</title>
     <link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" th:href="@{/apple-touch-icon.png}">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" th:href="@{/favicon-32x32.png}">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" th:href="@{/favicon-16x16.png}">
+    <meta name="msapplication-TileColor" content="#08397f">
+    <meta name="msapplication-TileImage" th:content="@{/mstile-144x144.png}" content="/mstile-144x144.png">
     <script th:inline="javascript">
         /*<![CDATA[*/
         window.resourceBaseUrl = /*[(<%="$"%>{"'" + baseUrl + "'"})]*/ '/'

komga-webui/vue.config.js

@@ -17,6 +17,12 @@ module.exports = {
             }
             return false
           },
+          'th:content': function (tag) {
+            if (_.has(tag, 'attributes.content')) {
+              return `@{${tag.attributes.content}}`
+            }
+            return false
+          },
           'th:src': function (tag) {
             if (_.has(tag, 'attributes.src')) {
               return `@{${tag.attributes.src}}`

komga/src/main/kotlin/org/gotson/komga/infrastructure/security/SecurityConfiguration.kt

@@ -82,6 +82,13 @@ class SecurityConfiguration(
         "/img/**",
         "/js/**",
         "/favicon.ico",
+        "/favicon-16x16.png",
+        "/favicon-32x32.png",
+        "/mstile-144x144.png",
+        "/apple-touch-icon.png",
+        "/apple-touch-icon-180x180.png",
+        "/android-chrome-192x192.png",
+        "/android-chrome-512x512.png",
         "/",
         "/index.html"
       )

komga/src/main/kotlin/org/gotson/komga/infrastructure/web/WebMvcConfiguration.kt

@@ -30,11 +30,25 @@ class WebMvcConfiguration : WebMvcConfigurer {
     registry
       .addResourceHandler(
         "/index.html",
-        "/favicon.ico"
+        "/favicon.ico",
+        "/favicon-16x16.png",
+        "/favicon-32x32.png",
+        "/mstile-144x144.png",
+        "/apple-touch-icon.png",
+        "/apple-touch-icon-180x180.png",
+        "/android-chrome-192x192.png",
+        "/android-chrome-512x512.png"
       )
       .addResourceLocations(
         "classpath:public/index.html",
-        "classpath:public/favicon.ico"
+        "classpath:public/favicon.ico",
+        "classpath:public/favicon-16x16.png",
+        "classpath:public/favicon-32x32.png",
+        "classpath:public/mstile-144x144.png",
+        "classpath:public/apple-touch-icon.png",
+        "classpath:public/apple-touch-icon-180x180.png",
+        "classpath:public/android-chrome-192x192.png",
+        "classpath:public/android-chrome-512x512.png"
       )
       .setCacheControl(CacheControl.noStore())