feat: enhance favicon support (#313)

.eslintignore

@@ -12,7 +12,9 @@ CNAME
 # Ignore files by extension
 /**/*.svg
 /**/*.png
+/**/*.ico
 /**/*.md
+/**/*.webmanifest
 
 # Ignore files by folders
 /src/resources/font-awesome/**

src/index.html

@@ -32,7 +32,14 @@
 		/>
 		<meta name="twitter:image" content="https://bestofui5.org/img/B_UI5_V.png" />
 
-		<link type="image/x-icon" rel="icon" href="resources/img/favicon.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="resources/favicon/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="resources/favicon/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="resources/favicon/favicon-16x16.png" />
+		<link rel="manifest" href="resources/favicon/site.webmanifest" />
+		<link rel="mask-icon" href="resources/favicon/safari-pinned-tab.svg" color="#5bbad5" />
+		<meta name="msapplication-TileColor" content="#ffffff" />
+		<meta name="theme-color" content="#ffffff" />
+
 		<title>Best of UI5</title>
 
 		<style>

src/mockServer.html

@@ -32,7 +32,14 @@
 		/>
 		<meta name="twitter:image" content="https://bestofui5.org/img/B_UI5_V.png" />
 
-		<link type="image/x-icon" rel="icon" href="resources/img/favicon.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="resources/favicon/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="resources/favicon/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="resources/favicon/favicon-16x16.png" />
+		<link rel="manifest" href="resources/favicon/site.webmanifest" />
+		<link rel="mask-icon" href="resources/favicon/safari-pinned-tab.svg" color="#5bbad5" />
+		<meta name="msapplication-TileColor" content="#ffffff" />
+		<meta name="theme-color" content="#ffffff" />
+
 		<title>Best of UI5</title>
 
 		<style>

src/resources/favicon/browserconfig.xml

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

src/resources/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+	"name": "Best Of UI5 - Website",
+	"short_name": "Best Of UI5",
+	"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"
+}