Merge pull request #805 from kiwix/fixFavicon

Add favicons (for different devices) to kiwix-serve welcome page

static/resources_list.txt

@@ -37,3 +37,17 @@ ft_opensearchdescription.xml
 catalog_v2_searchdescription.xml
 skin/css/autoComplete.css
 skin/css/images/search.svg
+skin/favicon/android-chrome-192x192.png
+skin/favicon/android-chrome-512x512.png
+skin/favicon/apple-touch-icon.png
+skin/favicon/browserconfig.xml
+skin/favicon/favicon-16x16.png
+skin/favicon/favicon-32x32.png
+skin/favicon/favicon.ico
+skin/favicon/mstile-70x70.png
+skin/favicon/mstile-144x144.png
+skin/favicon/mstile-150x150.png
+skin/favicon/mstile-310x150.png
+skin/favicon/mstile-310x310.png
+skin/favicon/safari-pinned-tab.svg
+skin/favicon/site.webmanifest

static/skin/favicon/browserconfig.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="skin/favicon/mstile-70x70.png"/>
+            <square144x144logo src="skin/favicon/mstile-144x144.png"/>
+            <square150x150logo src="skin/favicon/mstile-150x150.png"/>
+            <square310x150logo src="skin/favicon/mstile-310x150.png"/>
+            <square310x310logo src="skin/favicon/mstile-310x310.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/skin/favicon/site.webmanifest

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

static/templates/index.html

@@ -9,6 +9,15 @@
       href="{{root}}/skin/index.css?KIWIXCACHEID"
       rel="Stylesheet"
     />
+    <link rel="apple-touch-icon" sizes="180x180" href="{{root}}/skin/favicon/apple-touch-icon.png?KIWIXCACHEID">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{root}}/skin/favicon/favicon-32x32.png?KIWIXCACHEID">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{root}}/skin/favicon/favicon-16x16.png?KIWIXCACHEID">
+    <link rel="manifest" href="{{root}}/skin/favicon/site.webmanifest">
+    <link rel="mask-icon" href="{{root}}/skin/favicon/safari-pinned-tab.svg?KIWIXCACHEID" color="#5bbad5">
+    <link rel="shortcut icon" href="{{root}}/skin/favicon/favicon.ico?KIWIXCACHEID">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-config" content="{{root}}/skin/favicon/browserconfig.xml?KIWIXCACHEID">
+    <meta name="theme-color" content="#ffffff">
     <style>
       @font-face {
         font-family: "poppins";

test/server.cpp

@@ -170,6 +170,13 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
     {
       /* url */ "/ROOT/",
 R"EXPECTEDRESULT(      href="/ROOT/skin/index.css?cacheid=56e818cd"
+    <link rel="apple-touch-icon" sizes="180x180" href="/ROOT/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
+    <link rel="icon" type="image/png" sizes="32x32" href="/ROOT/skin/favicon/favicon-32x32.png?cacheid=79ded625">
+    <link rel="icon" type="image/png" sizes="16x16" href="/ROOT/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
+    <link rel="manifest" href="/ROOT/skin/favicon/site.webmanifest">
+    <link rel="mask-icon" href="/ROOT/skin/favicon/safari-pinned-tab.svg?cacheid=8d487e95" color="#5bbad5">
+    <link rel="shortcut icon" href="/ROOT/skin/favicon/favicon.ico?cacheid=fba03a27">
+    <meta name="msapplication-config" content="/ROOT/skin/favicon/browserconfig.xml?cacheid=f29a7c4a">
         src: url("/ROOT/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>