前言介紹
- 這款 WordPress 外掛「SVG Favicon」是 2020-07-31 上架。
- 目前有 1000 個安裝啟用數。
- 上一次更新是 2024-05-30，距離現在已有 339 天。
- 外掛最低要求 WordPress 5.1 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4.30 以上。
- 有 6 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
SVG | favicon | dark mode | favicon.ico | svg favicon |
內容簡介
現在支援深色模式！安全地為您的網站增加SVG圖示！不要限制您的網站圖標只能使用.ico / png / jpg格式！在幾秒鐘內上傳您喜歡的向量應用程序中的很酷的向量圖形！現代瀏覽器通常支援SVG圖標。由定制器生成的圖標元不會被覆蓋，這可以讓舊瀏覽器在不支援SVG圖標的情況下有可回退的應對措施。
使用方式
在上傳SVG圖示之前，請確保其長寬比為1:1。對於Safari，請復制SVG文件，然後執行以下操作：
將其轉換為單色（最好是黑色）
將所有藝術品合併到一個圖層上
將其放置在透明背景上
viewBox屬性必須設置為 "0 0 16 16"
上傳：在SVG圖示標籤下，單擊“上傳SVG圖示”字段並上傳您的SVG圖示
清單：上傳SVG圖示後，您可以填寫相應的清單。這個步驟是可選的。如果您已經有了您的網站清單，請勿勾選“使用此站點清單”。
Safari：固定標籤圖示的上傳過程與上述相同。請注意，固定的標籤圖示應設置為100％的黑色，具有透明背景。蒙版圖標顏色將決定固定標籤圖示的顏色。
深色模式（新）：以下是使用 prefers-color-scheme 媒體查詢啟用SVG圖標深色模式的示例：
備註
由Online Web Fonts提供的藝術作品 - 授權
Mithril - 授權
SVG Sanitizer - 授權
Tippy.js - 授權
Spectrum - 授權
原文外掛簡介
NOW WITH DARK MODE! Safely add an SVG favicon to your site! Don’t limit your site favicon to the .ico/png/jpg formats! Upload cool vector art from your favorite vector app in seconds! Support is common for SVG favicons in modern browsers. Favicon meta generated by the customizer will not be over-written, giving older browsers a fallback in the event they lack support SVG favicons.
Usage
Before uploading your SVG favicon, make sure the aspect ratio is 1:1. For Safari, create a copy of your SVG and do the following:
Drop it to a single color (preferably black)
Merge art onto a single layer
Place it on a transparent background
viewBox attribute must be set to “0 0 16 16”
Uploading: Under the SVG Favicon tab, click the “Upload SVG Favicon” field and upload your SVG favicon
Manifest: After uploading your SVG favicon, you can fill out the corresponding manifest. This step is optional. If you already have your site manifest, leave “Use this site manifest” unchecked.
Safari: The upload process for a pinned tab icon is the same as above. Please note that pinned tab icons should be 100% black with a transparent background. The mask icon color will determine the color of the pinned tab icon.
Dark Mode (NEW): Here is an example of how to enable dark mode in your svg favicon using the prefers-color-scheme media query:
Credits
Artwork by Online Web Fonts – license
SVG Sanitizer – license
Tippy.js – license
Picker – license
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「SVG Favicon」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Personal Favicon 》「個人化 Favicon」是一個 WordPress 外掛程式，可以讓你客製化你部落格的瀏覽器圖示。。