Use vector version of openHAB logo (openhab#1027)

This also implements vector favicons for browsers that support it,
support for browsers that do not allow vector favicons has not changed.

Signed-off-by: Ethan Dye <[email protected]>

Author: ecdye

README.md

@@ -1,6 +1,6 @@
 # openHAB Web Interface Add-ons
 
-<img align="right" width="220" src="./logo.png" />
+<img align="right" width="220" src="./logo.svg" type="image/svg+xml"/>
 
 [![Build Status](https://ci.openhab.org/job/openHAB-WebUI/badge/icon)](https://ci.openhab.org/job/openHAB-WebUI/)
 [![EPL-2.0](https://img.shields.io/badge/license-EPL%202-green.svg)](https://opensource.org/licenses/EPL-2.0)

bundles/org.openhab.ui/web/src/components/app.vue

@@ -5,14 +5,15 @@
       <f7-page>
         <f7-link href="/" class="logo no-ripple" panel-close v-if="themeOptions.dark === 'dark'">
           <div class="logo-inner">
-            <img src="@/images/openhab-logo-white.png" width="100%">
+            <img src="@/images/openhab-logo-white.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
         <f7-link href="/" class="logo no-ripple" panel-close v-else>
           <div class="logo-inner">
-            <img src="@/images/openhab-logo.png" width="100%">
+            <img src="@/images/openhab-logo.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
+        </f7-link>
         <f7-list v-if="ready">
           <f7-list-item v-if="$store.getters.apiEndpoint('ui') && (!pages || !pages.length)">
             <span><em>{{ $t('sidebar.noPages') }}</em></span>
@@ -129,7 +130,7 @@
   <!-- <f7-login-screen id="my-login-screen" :opened="loginScreenOpened">
     <f7-view name="login" v-if="$device.cordova">
       <f7-page login-screen>
-        <f7-login-screen-title><img width="200px" src="res/img/openhab-logo.png"><br>Login</f7-login-screen-title>
+        <f7-login-screen-title><img src="@/images/openhab-logo.svg" type="image/svg+xml" width="200px"><br>Login</f7-login-screen-title>
         <f7-list form>
           <f7-list-input
             type="text"

bundles/org.openhab.ui/web/src/images/openhab-logo-white.png

@@ -22,6 +22,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials">
+  <link rel="icon" href="/res/icons/favicon.svg" type="image/svg+xml" crossorigin="use-credentials">
   <link rel="icon" href="/res/icons/favicon.png" crossorigin="use-credentials">
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
   <% } %>

bundles/org.openhab.ui/web/src/images/openhab-logo-white.svg

@@ -6,7 +6,7 @@
         <f7-col>
           <!-- <f7-block-title>About openHAB</f7-block-title> -->
           <f7-block>
-            <img src="/res/icons/128x128.png" width="96" class="padding float-right">
+            <img src="../res/icons/favicon.svg" type="image/svg+xml" width="96" class="padding float-right">
             <h2 v-if="$store.state.runtimeInfo" class="block-title-medium">
               openHAB {{ $store.state.runtimeInfo.version }}<br><small>{{ $store.state.runtimeInfo.buildString }}</small>
             </h2>

bundles/org.openhab.ui/web/src/images/openhab-logo.png

@@ -3,7 +3,7 @@
     <f7-tabs animated>
       <f7-tab id="intro" ref="intro" tab-active>
         <f7-login-screen-title>
-          <img class="intro-logo" src="@/images/openhab-logo.png">
+          <img class="intro-logo" src="@/images/openhab-logo.svg" type="image/svg+xml">
         </f7-login-screen-title>
         <f7-list form style="margin-top: 4rem" v-if="i18nReady">
           <f7-list-item