feat: update web app icons (#475)

Fixes #474.

config-examples/en/config.toml

@@ -554,25 +554,55 @@ uglyURLs = false
 
     # Note: go to https://realfavicongenerator.net/
     #       to generate related icons and
-    #       files, unzip after downloading,
-    #       and keep only android-chrome-512x512.png,
-    #       apple-touch-icon.png, mstile-150x150.png,
-    #       safari-pinned-tab.svg, favicon.ico,
-    #       site.webmanifest these files,
-    #       delete the rest. Then move
-    #       these files to the ~/blog/static/icons/
-    #       directory, move favicon.ico,
-    #       site.webmanifest to the ~/blog/static/
-    #       directory, and finally rename
-    #       site.webmanifest to manifest.json,
-    #       and check and modify related
-    #       content (the path of the icons).
+    #       files, unzip after downloading.
+    #       Then move these files to the
+    #       ~/blog/static/icons/ directory,
+    #       move favicon.ico, site.webmanifest
+    #       to the ~/blog/static/ directory,
+    #       and finally rename site.webmanifest
+    #       to manifest.json, and check
+    #       and modify related content
+    #       (the path of the icons).
+
+    # ATTENTION: To check your favicon, plese
+    #            go to https://realfavicongenerator.net/favicon-checker.
+    #            If any problems are detected,
+    #            check the filename differences
+    #            between the generated files
+    #            and the related files in the
+    #            ~/blog/themes/meme/static/ directory.
+    #            If there are any differences,
+    #            it means some files may be outdated.
+    #            Please create an issue if necessary.
 
     themeColor = "#fff"
     themeColorDark = "#16171d"
+
+    enableSafariMask = false
     safariMaskColor = "#2a6df4"
+    # ATTENTION: Since https://realfavicongenerator.net/
+    #            no longer supports generating
+    #            safari-pinned-tab.svg (600x600 px),
+    #            please generate your own icon
+    #            if necessary, move it to the
+    #            ~/blog/static/icons/ directory,
+    #            and finally rename it to
+    #            safari-pinned-tab.svg.
+    #            Otherwise, it will default to
+    #            the icon provided by MemE.
+
+    enableMsApplication = false
     msApplicationTileColor = "#fff"
-
+    # ATTENTION: Since https://realfavicongenerator.net/
+    #            no longer supports generating
+    #            mstile-150x150.png (150x150 px),
+    #            please generate your own icon
+    #            if necessary, move it to the
+    #            ~/blog/static/icons/ directory,
+    #            and finally rename it to
+    #            mstile-150x150.png.
+    #            Otherwise, it will default to
+    #            the icon provided by MemE.
 
     ######################################
     # HTML Head Meta, SEO & Social Discovery

config-examples/zh-cn/config.toml

@@ -508,24 +508,42 @@ uglyURLs = false
     # 网页应用
 
     # 说明：前往 https://realfavicongenerator.net/
-    #      生成相关图标和文件，下载后解压，仅保留
-    #      android-chrome-512x512.png、
-    #      apple-touch-icon.png、
-    #      mstile-150x150.png、
-    #      safari-pinned-tab.svg、favicon.ico、
-    #      site.webmanifest 这些文件，删除其余。
+    #      生成相关图标和文件，下载后解压。
     #      然后将这些文件移动到 ~/blog/static/icons/
     #      目录下，再将 favicon.ico、site.webmanifest
     #      移动到 ~/blog/static/ 目录下，
     #      最后将 site.webmanifest 重命名为
     #      manifest.json，并检查和修改相关内容
     #      （图标的路径）。
 
+    # 注意：要检查你的图标
+    #      请前往 https://realfavicongenerator.net/favicon-checker。
+    #      如果检测到任何问题，检查生成的文件和
+    #      ~/blog/themes/meme/static/ 目录下
+    #      相关文件的文件名差异。如果有差异，
+    #      这意味着某些文件可能已经过时。
+    #      如有需要，请提 Issue。
+
     themeColor = "#fff"
     themeColorDark = "#16171d"
+
+    enableSafariMask = false
     safariMaskColor = "#2a6df4"
+    # 注意：由于 https://realfavicongenerator.net/
+    #      不再支持生成 safari-pinned-tab.svg (600x600 px)，
+    #      若启用功能, 请自行生成图标。
+    #      然后将其移动到 ~/blog/static/icons/ 目录下，
+    #      并重命名为 safari-pinned-tab.svg。
+    #      否则，将默认使用 MemE 提供的图标。
+
+    enableMsApplication = false
     msApplicationTileColor = "#fff"
-
+    # 注意：由于 https://realfavicongenerator.net/
+    #      不再支持生成 mstile-150x150.png (150x150 px)，
+    #      若启用功能, 请自行生成图标。
+    #      然后将其移动到 ~/blog/static/icons/ 目录下，
+    #      并重命名为 mstile-150x150.png。
+    #      否则，将默认使用 MemE 提供的图标。
 
     ######################################
     # 网页头部元数据、搜索引擎优化（SEO）、社交网络发现

config-examples/zh-tw/config.toml

@@ -508,24 +508,42 @@ uglyURLs = false
     # 網頁應用
 
     # 說明：前往 https://realfavicongenerator.net/
-    #      生成相關圖示和檔案，下載後解壓，僅保留
-    #      android-chrome-512x512.png、
-    #      apple-touch-icon.png、
-    #      mstile-150x150.png、
-    #      safari-pinned-tab.svg、favicon.ico、
-    #      site.webmanifest 這些檔案，刪除其餘。
+    #      生成相關圖示和檔案，下載後解壓。
     #      然後將這些檔案移動到 ~/blog/static/icons/
     #      目錄下，再將 favicon.ico、site.webmanifest
     #      移動到 ~/blog/static/ 目錄下，
     #      最後將 site.webmanifest 重新命名為
     #      manifest.json，並檢查和修改相關內容
     #      （圖示的路徑）。
 
+    # 注意：要檢查你的圖標
+    #      請前往 https://realfavicongenerator.net/favicon-checker。
+    #      如果偵測到任何問題，檢查生成的檔案和
+    #      ~/blog/themes/meme/static/ 目錄下
+    #      相關檔案的檔案名稱差異。如果有差異，
+    #      這意味著某些文件可能已經過時。
+    #      如有需要，請提 Issue。
+
     themeColor = "#fff"
     themeColorDark = "#16171d"
+
+    enableSafariMask = false
     safariMaskColor = "#2a6df4"
+    # 注意：由於 https://realfavicongenerator.net/
+    #      不再支援生成 safari-pinned-tab.svg (600x600 px)，
+    #      若啟用功能, 請自行生成圖示。
+    #      然後將其移到 ~/blog/static/icons/ 目錄下，
+    #      並重新命名為 safari-pinned-tab.svg。
+    #      否則，將預設使用 MemE 提供的圖示。
+
+    enableMsApplication = false
     msApplicationTileColor = "#fff"
-
+    # 注意：由於 https://realfavicongenerator.net/
+    #      不再支援生成 mstile-150x150.png (150x150 px)，
+    #      若啟用功能, 請自行生成圖示。
+    #      然後將其移到 ~/blog/static/icons/ 目錄下，
+    #      並重新命名為 mstile-150x150.png。
+    #      否則，將預設使用 MemE 提供的圖示。
 
     ######################################
     # 網頁頭部元資料、搜尋引擎最佳化（SEO）、社交網路發現

layouts/partials/head.html

@@ -50,27 +50,37 @@
     <meta name="description" content="{{ $description }}" />
 
     <!-- Favicon, Icons, Web App -->
-    {{- $favicon := "favicon.ico" -}}
-    {{- $safariMaskIcon := "icons/safari-pinned-tab.svg" -}}
-    {{- $safariMaskColor := .Site.Params.safariMaskColor -}}
+    {{- $icoFavicon := "favicon.ico" -}}
+    {{- $svgFavicon := "icons/favicon.svg" -}}
+    {{- $pngFavicon := "icons/favicon-96x96.png" -}}
     {{- $appleTouchIcon := "icons/apple-touch-icon.png" -}}
-    {{- $msApplicationStartURL := partial "utils/relative-url.html" (dict "$" . "filename" "") -}}
-    {{- $msApplicationTileColor := .Site.Params.msApplicationTileColor -}}
-    {{- $msApplicationTileImage := partial "utils/relative-url.html" (dict "$" . "filename" "icons/mstile-150x150.png") -}}
     {{- $manifest := "manifest.json" -}}
-    <link rel="shortcut icon" href="{{ $favicon | relURL }}" type="image/x-icon" />
-    <link rel="mask-icon" href="{{ $safariMaskIcon | relURL }}" color="{{ $safariMaskColor }}" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ $appleTouchIcon | relURL }}" />
+    <link rel="shortcut icon" type="image/x-icon" href="{{ $icoFavicon | relURL }}" />
+    <link rel="icon" type="image/svg+xml" href="{{ $svgFavicon | relURL }}" />
+    <link rel="icon" type="image/png" href="{{ $pngFavicon | relURL }}" sizes="96x96" />
+    <link rel="apple-touch-icon" href="{{ $appleTouchIcon | relURL }}" sizes="180x180" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="application-name" content="{{ .Site.Title }}" />
-    <meta name="msapplication-starturl" content="{{ $msApplicationStartURL }}" />
-    <meta name="msapplication-TileColor" content="{{ $msApplicationTileColor }}" />
-    <meta name="msapplication-TileImage" content="{{ $msApplicationTileImage }}" />
     <link rel="manifest" href="{{ $manifest | relURL }}" />
 
+    {{ if .Site.Params.enableSafariMask }}
+        {{- $safariMaskIcon := "icons/safari-pinned-tab.svg" -}}
+        {{- $safariMaskColor := .Site.Params.safariMaskColor -}}
+        <link rel="mask-icon" href="{{ $safariMaskIcon | relURL }}" color="{{ $safariMaskColor }}" />
+    {{ end }}
+
+    {{ if .Site.Params.enableMsApplication }}
+        {{- $msApplicationStartURL := partial "utils/relative-url.html" (dict "$" . "filename" "") -}} 
+        {{- $msApplicationTileColor := .Site.Params.msApplicationTileColor -}} 
+        {{- $msApplicationTileImage := partial "utils/relative-url.html" (dict "$" . "filename" "icons/mstile-150x150.png") -}}
+        <meta name="msapplication-starturl" content="{{ $msApplicationStartURL }}" />
+        <meta name="msapplication-TileColor" content="{{ $msApplicationTileColor }}" />
+        <meta name="msapplication-TileImage" content="{{ $msApplicationTileImage }}" />
+    {{ end }}
+
     <!-- Atom / RSS -->
     {{ with .OutputFormats.Get "SectionsAtom" -}}
         <link rel="{{ .Rel }}" type="{{ .MediaType }}" href="{{ .Permalink }}" title="{{ $.Site.Title }}" />

static/manifest.json

@@ -3,14 +3,21 @@
     "short_name": "MemE",
     "icons": [
         {
-            "src": "./icons/android-chrome-512x512.png",
+            "src": "./icons/web-app-manifest-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "./icons/web-app-manifest-512x512.png",
             "sizes": "512x512",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ],
     "theme_color": "#fff",
     "background_color": "#fff",
     "display": "standalone",
     "orientation": "portrait-primary",
-    "start_url": "/"
+    "start_url": "./"
 }