feat: update web app icons (#475)

Fixes #474.

Author: makisevon

config-examples/en/config.toml

@@ -554,24 +554,29 @@ 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"
-    safariMaskColor = "#2a6df4"
-    msApplicationTileColor = "#fff"
 
 
     ######################################

config-examples/zh-cn/config.toml

@@ -508,23 +508,24 @@ 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"
-    safariMaskColor = "#2a6df4"
-    msApplicationTileColor = "#fff"
 
 
     ######################################

config-examples/zh-tw/config.toml

@@ -508,23 +508,24 @@ 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"
-    safariMaskColor = "#2a6df4"
-    msApplicationTileColor = "#fff"
 
 
     ######################################

layouts/partials/head.html

@@ -50,25 +50,20 @@
     <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 }}" />
 
     <!-- Atom / RSS -->