diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
index 8333d45d..e0918ef7 100644
--- a/config-examples/en/config.toml
+++ b/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
diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
index d8c1bf7a..93de63d0 100644
--- a/config-examples/zh-cn/config.toml
+++ b/config-examples/zh-cn/config.toml
@@ -508,12 +508,7 @@ 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/ 目录下，
@@ -521,11 +516,34 @@ uglyURLs = false
# 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）、社交网络发现
diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
index 290db16b..4fba3056 100644
--- a/config-examples/zh-tw/config.toml
+++ b/config-examples/zh-tw/config.toml
@@ -508,12 +508,7 @@ 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/ 目錄下，
@@ -521,11 +516,34 @@ uglyURLs = false
# 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）、社交網路發現
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fcf7ba95..a897df8e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -50,27 +50,37 @@
- {{- $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" -}}
-
-
-
+
+
+
+
-
-
-
+ {{ if .Site.Params.enableSafariMask }}
+ {{- $safariMaskIcon := "icons/safari-pinned-tab.svg" -}}
+ {{- $safariMaskColor := .Site.Params.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") -}}
+
+
+
+ {{ end }}
+
{{ with .OutputFormats.Get "SectionsAtom" -}}
diff --git a/static/icons/favicon-96x96.png b/static/icons/favicon-96x96.png
new file mode 100644
index 00000000..ab5e9504
Binary files /dev/null and b/static/icons/favicon-96x96.png differ
diff --git a/static/icons/favicon.svg b/static/icons/favicon.svg
new file mode 100644
index 00000000..f16c9798
--- /dev/null
+++ b/static/icons/favicon.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/static/icons/web-app-manifest-192x192.png b/static/icons/web-app-manifest-192x192.png
new file mode 100644
index 00000000..b024e176
Binary files /dev/null and b/static/icons/web-app-manifest-192x192.png differ
diff --git a/static/icons/android-chrome-512x512.png b/static/icons/web-app-manifest-512x512.png
similarity index 100%
rename from static/icons/android-chrome-512x512.png
rename to static/icons/web-app-manifest-512x512.png
diff --git a/static/manifest.json b/static/manifest.json
index 48e0607b..1eb0b815 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -3,13 +3,20 @@
"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",
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
"display": "standalone",
"orientation": "portrait-primary",
"start_url": "/"