/品牌中心/資產
BRAND MASTER · ASSETS

SERAMONX 官方識別與資產中心

SERAMONX 的小服務,貼合日常的需求與習慣,每一個都真的幫得上忙。

Fits your life

01

標誌與識別

Mark · Color · Usage

標誌本體

主標誌依環境提供不同色版,各自放在它設計用的真實底色上,底色不隨頁面主題變化。

SERAMONX seramonx_logo_dark.svg(深色環境 · 白標誌),1069×1069 向量,畫布 288 CSS px
seramonx_logo_dark.svg1069×1069 向量(viewBox)。此處畫布 288 CSS px,墨跡寬約 179.7 CSS px。透明底,標誌色 #FFFFFF,置於其設計用的底色 #09090B 上;檔案已內建淨空,上色區域即檔案範圍。
下載 dark
SERAMONX seramonx_logo_light.svg(淺色環境 · 黑標誌),1069×1069 向量,畫布 288 CSS px
seramonx_logo_light.svg1069×1069 向量(viewBox)。此處畫布 288 CSS px,墨跡寬約 179.7 CSS px。透明底,標誌色 #09090B,置於其設計用的底色 #FFFFFF 上;檔案已內建淨空,上色區域即檔案範圍。
下載 light

色票

深色環境 · 白標誌#FFFFFF on #09090B
極光白 · Aurora White標誌色 #FFFFFF,對底色 曜石黑 · Obsidian Black #09090B 的對比度為 19.9:1。
淺色環境 · 黑標誌#09090B on #FFFFFF
曜石黑 · Obsidian Black標誌色 #09090B,對底色 極光白 · Aurora White #FFFFFF 的對比度為 19.9:1。
標誌與底色的對比深色環境 · 白標誌 19.9:1;淺色環境 · 黑標誌 19.9:1(依 WCAG 相對亮度公式計算)。各色版皆達 WCAG AAA 級(7:1)門檻。WCAG 對標誌本身豁免,本專案以 4.5:1 作為標誌與底色的品牌門檻:皆達 4.5:1 的品牌門檻。

版本選用對照

依情境選擇檔案。深色環境 · 白標誌、淺色環境 · 黑標誌的標誌皆為透明底,須放在對應的底色上。

深色環境 · 白標誌用於 #09090B 底色的介面或印刷品;標誌色 #FFFFFF。檔名含「dark」的版本。
淺色環境 · 黑標誌用於 #FFFFFF 底色的介面或印刷品;標誌色 #09090B。檔名含「light」的版本。
寬度足夠且需出現品牌名橫向組合:導覽列、文件頁首、簡報封面。seramonx_lockup_h_dark.svg、seramonx_lockup_h_light.svg
正方形或直式版面直向組合。seramonx_lockup_v_dark.svg、seramonx_lockup_v_light.svg
品牌名已在旁邊,或空間很小單獨母標。依墨跡寬選用:不足 14.5 CSS px 不使用;14.5–21.4 用 Micro16;21.5–106 用 Micro;107 以上用主標誌。檔案:seramonx_logo_dark.svg、seramonx_logo_light.svg
只需文字純字標:文末署名、頁尾。seramonx_wordmark_dark.svg、seramonx_wordmark_light.svg
瀏覽器分頁、App 圖示、選單列使用各平台專用檔,見第 02 章依使用場景取用。

組合標與字標

SERAMONX seramonx_lockup_h_dark.svg(深色環境 · 白標誌),891×231.5 向量,畫布 300 CSS px
深色環境 · 白標誌
SERAMONX seramonx_lockup_h_light.svg(淺色環境 · 黑標誌),891×231.5 向量,畫布 300 CSS px
淺色環境 · 黑標誌
橫向組合標標誌在左、字標在右。檔案 seramonx_lockup_h_dark.svg、seramonx_lockup_h_light.svg(891×231.5 向量)。此處畫布寬 300 CSS px;檔案已內建淨空。
下載 dark下載 light
SERAMONX seramonx_lockup_v_dark.svg(深色環境 · 白標誌),682.5×684.5 向量,畫布 220 CSS px
深色環境 · 白標誌
SERAMONX seramonx_lockup_v_light.svg(淺色環境 · 黑標誌),682.5×684.5 向量,畫布 220 CSS px
淺色環境 · 黑標誌
直向組合標標誌在上、字標在下。檔案 seramonx_lockup_v_dark.svg、seramonx_lockup_v_light.svg(682.5×684.5 向量)。此處畫布寬 220 CSS px;檔案已內建淨空。
下載 dark下載 light
SERAMONX seramonx_wordmark_dark.svg(深色環境 · 白標誌),682.5×200 向量,畫布 260 CSS px
深色環境 · 白標誌
SERAMONX seramonx_wordmark_light.svg(淺色環境 · 黑標誌),682.5×200 向量,畫布 260 CSS px
淺色環境 · 黑標誌
純字標僅有字標。檔案 seramonx_wordmark_dark.svg、seramonx_wordmark_light.svg(682.5×200 向量)。此處畫布寬 260 CSS px;檔案已內建淨空。
下載 dark下載 light

小尺寸表現

同一圖形在 16 到 64 格位的實際樣貌。

SERAMONX seramonx_micro16_dark.svg(深色環境 · 白標誌),24×24 向量,16 格位,畫布 24 CSS px
16 格 · Micro16 · 墨跡 14.5
SERAMONX seramonx_micro_dark.svg(深色環境 · 白標誌),48×48 向量,24 格位,畫布 36 CSS px
24 格 · Micro · 墨跡 21.7
SERAMONX seramonx_micro_dark.svg(深色環境 · 白標誌),48×48 向量,32 格位,畫布 48 CSS px
32 格 · Micro · 墨跡 28.9
SERAMONX seramonx_micro_dark.svg(深色環境 · 白標誌),48×48 向量,48 格位,畫布 72 CSS px
48 格 · Micro · 墨跡 43.4
SERAMONX seramonx_micro_dark.svg(深色環境 · 白標誌),48×48 向量,64 格位,畫布 96 CSS px
64 格 · Micro · 墨跡 57.9
SERAMONX seramonx_micro16_light.svg(淺色環境 · 黑標誌),24×24 向量,16 格位,畫布 24 CSS px
16 格 · Micro16 · 墨跡 14.5
SERAMONX seramonx_micro_light.svg(淺色環境 · 黑標誌),48×48 向量,24 格位,畫布 36 CSS px
24 格 · Micro · 墨跡 21.7
SERAMONX seramonx_micro_light.svg(淺色環境 · 黑標誌),48×48 向量,32 格位,畫布 48 CSS px
32 格 · Micro · 墨跡 28.9
SERAMONX seramonx_micro_light.svg(淺色環境 · 黑標誌),48×48 向量,48 格位,畫布 72 CSS px
48 格 · Micro · 墨跡 43.4
SERAMONX seramonx_micro_light.svg(淺色環境 · 黑標誌),48×48 向量,64 格位,畫布 96 CSS px
64 格 · Micro · 墨跡 57.9
16 / 24 / 32 / 48 / 64 格位「格位」指圖形所在的圖示格大小,圖形約佔其 91%;因檔案已內建淨空,畫布為格位的 1.5 倍。各圖以 CSS 實際尺寸並排,未放大;說明標出各圖墨跡的實際 CSS px。兩級 Micro 的原因:16 格共 256 個像素,32 格共 1024 個像素,相差 4 倍。16 格放不下冠羽與細緻翼羽,故另有去除冠羽、加粗骨幹的簡化版;24 格起改用保留冠羽的輕量版。

使用規範

標誌的放置、最小尺寸、底色與禁用事項。數值為建議值或品牌規範,各項標示其依據。

淨空已內建

官方檔案已內建所需的淨空。請直接放置,勿裁掉檔案邊緣的空白,也勿讓文字、圖片或其他元素進入這個範圍。

淨空為四周各 0.5X,自標誌墨跡外緣量起。X 在含字標的資產(橫向組合、直向組合、純字標)為字高,在單獨母標為中央 X 骨幹的高度。

正確示範

正確
SERAMONX seramonx_logo_light.svg(淺色環境 · 黑標誌),1069×1069 向量,正確示範,畫布 216 CSS px,虛線為檔案邊界
淺色底使用黑標誌虛線為檔案邊界示意,即內建淨空的外緣;請直接放置,不再另加距離。
正確
SERAMONX seramonx_logo_dark.svg(深色環境 · 白標誌),1069×1069 向量,正確示範,畫布 216 CSS px,虛線為檔案邊界
深色底使用白標誌虛線為檔案邊界示意,即內建淨空的外緣;請直接放置,不再另加距離。
正確
SERAMONX seramonx_lockup_h_light.svg(淺色環境 · 黑標誌),891×231.5 向量,正確示範,畫布 300 CSS px,虛線為檔案邊界
橫向組合原樣放置虛線為檔案邊界示意,即內建淨空的外緣;請直接放置,不再另加距離。

最小使用尺寸

以 CSS px 為單位,網頁無法確定讀者的螢幕密度時,以 1 倍密度為保守基準。

含字標的資產:字高 16 CSS px 以上預設版檔案畫布寬度的下限:橫向組合 143、直向組合 110、純字標 110 CSS px。組合標內的圖形不換用 Micro,下限以字高為準。 建議值,依導覽列實際用法校準
單獨母標:依墨跡寬選用版本墨跡寬不足 14.5 CSS px 不使用;14.5 至 21.4 用 Micro16;21.5 至 106 用 Micro;107 以上用主標誌。墨跡寬為標誌圖形本身的寬度,不含內建淨空。 建議值,依實測的切換點

底色

深色底純黑與深色底使用白標誌。
淺色底純白與淺色底使用黑標誌。
其他單色底黑與白兩者取對比較高者,且對比須達 4.5:1。此為品牌自訂門檻,WCAG 對標誌本身豁免。
中灰帶約 #5A5A5A 至 #999999 的中灰,黑白兩者的對比都偏低,建議不要直接放置,改墊實心底板。#5A5A5A · 深色環境 · 白標誌 6.9:1 · 淺色環境 · 黑標誌 2.9:1#777777 · 深色環境 · 白標誌 4.5:1 · 淺色環境 · 黑標誌 4.4:1#999999 · 深色環境 · 白標誌 2.8:1 · 淺色環境 · 黑標誌 7.0:1對比由 WCAG 相對亮度公式計算,為各色版標誌色對該灰色的對比。
照片、漸層、圖紋、影片先墊實心底板(深色配白標誌,白色配黑標誌),底板內緣到標誌墨跡至少 0.5X。使用預設版檔案時,底板與檔案同大即可。

禁用清單

以下示範一律以 CSS 現場套用在官方檔案上,僅供說明,不提供下載;另存圖片仍取得正確的官方檔案。標示「錯誤」的畫面不是官方資產。

錯誤禁用 1
改成黑白以外的顏色母標的辨識度來自固定的黑白雙生;一上色就會被讀成某個旗下服務的標誌。依據:品牌規範
錯誤禁用 2
錯誤示範:拉伸,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
拉伸、壓扁、非等比縮放46° 羽刃傾角與左右對稱軸會被扭曲。依據:品牌規範
錯誤禁用 3
錯誤示範:旋轉,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
旋轉、傾斜、透視46° 順流角與 X 骨幹的垂直定錨會失準。依據:品牌規範
錯誤禁用 4
錯誤示範:加異色輪廓線,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
加異色輪廓線或外框會填掉部件之間的負空間,形成牢籠般的外框。依據:品牌規範
錯誤禁用 5
錯誤示範:加陰影,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
對標誌本體加陰影、光暈、浮雕或材質會使負空間邊緣混濁,小尺寸時成為灰塊,並破壞黑白雙生。依據:品牌規範
錯誤禁用 6
錯誤示範:旁邊改用其他字體重打品牌名稱,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)SERAMONX
改用其他字體重打品牌名稱字標是專屬向量,線寬與字距皆為固定值。依據:品牌規範
錯誤禁用 7
錯誤示範:拆開部件(左段),官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)錯誤示範:拆開部件(中段),官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)錯誤示範:拆開部件(右段),官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
自行拆開、移動、刪除或增加部件四個部件為一體,拆開後就不是熾羽之刃。依據:品牌規範
錯誤禁用 8
錯誤示範:放在低對比背景上(對比 2.6:1),官方 seramonx_logo_dark.svg 經 CSS 處理(不可使用)
放在低對比或花俏的背景上對比低於 4.5:1,或圖紋穿過負空間時,輪廓無法辨識。 對比 2.6:1。依據:品牌規範
錯誤禁用 9
錯誤示範:自行重排組合標(標誌縮小置於字標上方),官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)錯誤示範:自行重排組合標(字標),官方 seramonx_wordmark_light.svg 經 CSS 處理(不可使用)
自行重排組合標標誌與字標的間距、底足對齊與翼展比例是校準過的固定關係,請只用官方組合檔。依據:品牌規範
錯誤禁用 10
錯誤示範:裁切標誌的下半部,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)
裁切標誌的任何部分,或裁掉檔案內建的淨空翼尖與雙足是外輪廓的辨識點,淨空也是合規的一部分。依據:品牌規範
禁用 11
重繪、描摹或以點陣自動向量化會產生散點與曲率突波,偏離原始曲線;一律取用官方檔案。依據:品牌規範
錯誤禁用 12
錯誤示範:讓文字進入淨空範圍並疊在標誌上,官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)限時優惠 50%
讓文字、圖片或按鈕進入淨空範圍,或疊在標誌上讀者無法分辨哪個部分屬於標誌。依據:量測推導,屬建議
錯誤禁用 13
錯誤示範:縮到最小尺寸以下(畫布 12 CSS px),官方 seramonx_micro16_light.svg 經 CSS 處理(不可使用)畫布 12 CSS px · 錯誤
SERAMONX seramonx_micro16_light.svg(淺色環境 · 黑標誌),24×24 向量,正確對照,畫布 24 CSS px畫布 24 CSS px · 正確對照
縮到最小尺寸以下線寬或刀羽不足 1 像素,會發灰成塊。依據:量測推導,屬建議
錯誤禁用 14
錯誤示範:墨跡寬不足仍用主標誌(畫布 40 CSS px),官方 seramonx_logo_light.svg 經 CSS 處理(不可使用)主標誌 40 CSS px · 錯誤
SERAMONX seramonx_micro_light.svg(淺色環境 · 黑標誌),48×48 向量,正確對照,畫布 36 CSS pxMicro 36 CSS px · 正確對照
單獨使用母標時,墨跡寬不足 107 px 仍用 Display 版羽冠刀羽低於約 1.3 px,會發灰成柱;請改用 Micro。依據:量測推導,屬建議

品牌緣由

SERAMONX 取意熾天使的守護與輕盈(SERA)、突破常規的爆發力(MON)、融合與定錨(X)。母標只用黑白,色彩留給旗下服務。

SERAMONX 由三個字根組成。SERA 取自六翼熾天使,象徵守護、光芒與輕盈,化為標誌頂端挺拔的羽冠與朝天舒展的雙翼。MON 代表突破常規的爆發力,化為雙翼 46° 的和風刀刃反曲弧線,銳利而帶有俯衝的速度感。X 是未知數,也是融合與交會,化為標誌中央頂天立地的 X 骨幹,定錨整個圖形。三者合而為母標「熾羽之刃」(The Seraph Blade)。

母標只以黑白呈現:深色環境用極光白,淺色環境用曜石黑。色彩則留給旗下各項服務,各自詮釋所屬領域;母標始終保持同一個形狀,作為整個體系的錨點。

02

依使用場景取用

By Scene

每個場景先呈現情境,再列出該情境用到的檔案、檔案像素與顯示尺寸。情境畫面為 CSS 搭建的示意,並非真實截圖;圖檔本身是實際資產。情境畫面中各介面元件的顯示尺寸與圓角形狀為 CSS 示意值,並非各平台實際尺寸或曲線。 未查證,暫定或示意

網站與瀏覽器

瀏覽器分頁與書籤列

訪客在分頁標題旁與書籤列看到的 16 CSS px 小圖示,淺色與深色瀏覽器介面都要能清楚辨識。

示意 · CSS 模擬
SERAMONX favicon.svg,分頁標題旁SERAMONX
SERAMONX favicon.svg,書籤列SERAMONX
SERAMONX favicon.svg,分頁標題旁SERAMONX
SERAMONX favicon.svg,書籤列SERAMONX

模擬畫面中的 16 CSS px 圖示取自 favicon-16x16.png(1 倍)與 favicon-32x32.png(2 倍),由瀏覽器依螢幕密度挑檔。favicon.svg 為 32 格的輕量版,縮到 16 CSS px 時筆劃偏軟。Safari 對 SVG favicon 的支援尚未驗證,因此保留 favicon.ico 與 apple-touch-icon 作為備援。 未查證,暫定或示意

用到的檔案
SERAMONX favicon.svg(深色環境 · 白標誌),32×32 向量,顯示 16 CSS px
favicon.svg32×32 向量(viewBox) · 顯示 16 CSS px分頁與書籤列的圖示位置為 16 CSS px;向量檔以 32 格繪製,高密度螢幕自動以更高密度渲染。自帶底座,不依賴作業系統深淺色。
下載
SERAMONX favicon.ico,16 px 幀,1:1
16 px
SERAMONX favicon.ico,24 px 幀,1:1
24 px
SERAMONX favicon.ico,32 px 幀,1:1
32 px
SERAMONX favicon.ico,48 px 幀,1:1
48 px
favicon.ico內含 16 / 24 / 32 / 48 px 幀不支援 SVG 圖示的瀏覽器備援,由瀏覽器自內含幀擇一。
下載
SERAMONX favicon-16x16.png(深色環境 · 白標誌),16×16 px,顯示 16 CSS px
favicon-16x16.png16×16 px · 顯示 16 CSS px(1 倍)點陣幀,此處 1:1 顯示。
下載
SERAMONX favicon-24x24.png(深色環境 · 白標誌),24×24 px,顯示 24 CSS px
favicon-24x24.png24×24 px · 顯示 24 CSS px(1 倍)點陣幀,此處 1:1 顯示。
下載
SERAMONX favicon-32x32.png(深色環境 · 白標誌),32×32 px,顯示 32 CSS px
favicon-32x32.png32×32 px · 顯示 32 CSS px(1 倍)點陣幀,此處 1:1 顯示。
下載
SERAMONX favicon-48x48.png(深色環境 · 白標誌),48×48 px,顯示 48 CSS px
favicon-48x48.png48×48 px · 顯示 48 CSS px(1 倍)點陣幀,此處 1:1 顯示。
下載

網站導覽列

網站頂端導覽列的品牌位置;依導覽列的明暗,放入對應色版的橫向組合標。

示意 · CSS 模擬
SERAMONX seramonx_lockup_h_dark.svg,導覽列品牌位置,高 38 CSS px
SERAMONX seramonx_lockup_h_light.svg,導覽列品牌位置,高 38 CSS px
用到的檔案
SERAMONX seramonx_lockup_h_dark.svg,顯示 146×38 CSS px
seramonx_lockup_h_dark.svg891×231.5 向量(viewBox) · 顯示 146 CSS px畫布高 38 CSS px,字高約 16.4 CSS px,達到字高 16 CSS px 以上的下限;檔案已內建淨空,不必再自行留白。
下載
SERAMONX seramonx_lockup_h_light.svg,顯示 146×38 CSS px
seramonx_lockup_h_light.svg891×231.5 向量(viewBox) · 顯示 146 CSS px畫布高 38 CSS px,字高約 16.4 CSS px,達到字高 16 CSS px 以上的下限;檔案已內建淨空,不必再自行留白。
下載

社群連結預覽

網址貼到聊天室或社群時顯示的預覽卡,圖片取自 Open Graph 設定。

示意 · CSS 模擬
SERAMONX og-image-dark.png,連結預覽卡,寬 320 CSS px
SERAMONX
example.com
SERAMONX og-image-light.png,連結預覽卡,寬 320 CSS px
SERAMONX
example.com

各平台連結卡片的顯示寬度不同,此處以 320 CSS px 示意。 未查證,暫定或示意

用到的檔案
SERAMONX og-image-dark.png(深色環境 · 白標誌),1200×630 px,顯示 320 CSS px
og-image-dark.png1200×630 px · 顯示 320 CSS px(3.8 倍)連結預覽卡通用比例;依網站主題擇一。
下載
SERAMONX og-image-light.png(淺色環境 · 黑標誌),1200×630 px,顯示 320 CSS px
og-image-light.png1200×630 px · 顯示 320 CSS px(3.8 倍)連結預覽卡通用比例;依網站主題擇一。
下載
SERAMONX seramonx_og_card_dark.svg(深色環境 · 白標誌),1200×630 向量,顯示 240 CSS px
seramonx_og_card_dark.svg1200×630 向量(viewBox) · 顯示 240 CSS pxOG 卡的向量來源,需要重新輸出點陣圖時使用。
下載
SERAMONX seramonx_og_card_light.svg(淺色環境 · 黑標誌),1200×630 向量,顯示 240 CSS px
seramonx_og_card_light.svg1200×630 向量(viewBox) · 顯示 240 CSS pxOG 卡的向量來源,需要重新輸出點陣圖時使用。
下載

加到主畫面(網頁)

iOS 主畫面

訪客把網站加到 iOS 主畫面時,圖示取自 apple-touch-icon,系統自行套用圓角。

示意 · CSS 模擬
SERAMONX apple-touch-icon.png,iOS 主畫面圖示,顯示 60 CSS pxSERAMONX

iOS 主畫面圖示以 60pt 顯示,@3x 為 180 px。 次級來源,未取得官方原文 iOS 圖示為單一 1024×1024 方形圖像,不自帶遮罩;系統套用圓角並自動縮出主畫面、設定、通知等尺寸,App Store 使用同一張圖像。 官方文件原文已查證 情境畫面中各介面元件的顯示尺寸與圓角形狀為 CSS 示意值,並非各平台實際尺寸或曲線。 未查證,暫定或示意

用到的檔案
SERAMONX apple-touch-icon.png(深色環境 · 白標誌),180×180 px,顯示 60 CSS px
apple-touch-icon.png180×180 px · 顯示 60 CSS px(3 倍)顯示 60 CSS px;檔案為滿版方形,圓角由系統套用,此處以 CSS 圓角示意。
下載

Android 與 PWA 圖示

網站安裝為 PWA 或加到 Android 主畫面時,系統依機型套用不同遮罩;主體必須落在安全區內。

示意 · CSS 模擬
SERAMONX icon-maskable-512.png,套用圓形遮罩,顯示 72 CSS px
圓形
SERAMONX icon-maskable-512.png,套用圓角方形遮罩,顯示 72 CSS px
圓角方形
SERAMONX icon-maskable-512.png,套用小圓角方形遮罩,顯示 72 CSS px
小圓角方形

PWA Maskable 圖示的安全區為圓心置中、半徑 40%(直徑 80%)的圓,圓內不得有透明像素;主體置於安全區內,套用圓形或圓角方形遮罩時不被裁切。 官方文件原文已查證 Android 啟動圖示為 48dp,xxxhdpi(4 倍)為 192 px。 次級來源,未取得官方原文 情境畫面中各介面元件的顯示尺寸與圓角形狀為 CSS 示意值,並非各平台實際尺寸或曲線。 未查證,暫定或示意

用到的檔案
SERAMONX icon-maskable-512.png(深色環境 · 白標誌),512×512 px,顯示 72 CSS px
icon-maskable-512.png512×512 px · 顯示 72 CSS px(7.1 倍)自適應圖示,顯示 72 CSS px;示意三種遮罩(圓形與兩種圓角方形),主體位於安全區內,不被裁切。
下載
SERAMONX android-chrome-192x192.png(深色環境 · 白標誌),192×192 px,顯示 48 CSS px
android-chrome-192x192.png192×192 px · 顯示 48 CSS px(4 倍)啟動圖示用的尺寸,顯示 48 CSS px。
下載
SERAMONX android-chrome-512x512.png(深色環境 · 白標誌),512×512 px,顯示 128 CSS px
android-chrome-512x512.png512×512 px · 顯示 128 CSS px(4 倍)manifest 宣告的大尺寸圖示。
下載
site.webmanifest文字檔宣告名稱、顏色與圖示清單;自適應圖示須獨立宣告為 maskable。
下載

macOS App

選單列

常駐型 App 在 macOS 選單列的單色圖示。範本圖示只含黑色與透明,由系統依選單列的明暗自動上色。

示意 · CSS 模擬
SERAMONX seramonx_menubar_template_18.png,選單列範本圖示,顯示 18 CSS px
SERAMONX seramonx_menubar_template_18.png,選單列範本圖示,顯示 18 CSS px,深色選單列中由系統上為白色

深色選單列中的圖示,是系統把黑色範本圖示反相為白色的示意。macOS 選單列範本圖示只含黑色與透明,由系統依選單列的明暗自動上色;18、36 px 為社群慣例尺寸,官方原文未給 pt 尺寸。 次級來源,未取得官方原文 macOS 與 Windows 各介面(Dock、Launchpad、Finder、工作列、檔案總管、關於視窗、安裝視窗)的顯示尺寸為示意值。 未查證,暫定或示意

用到的檔案
SERAMONX seramonx_menubar_template_18.png,選單列範本圖示,顯示 18 CSS px
seramonx_menubar_template_18.png18×18 px · 顯示 18 CSS px(1 倍)範本圖示,只含黑色與透明,由系統依選單列自動上色,顯示 18 CSS px。原生 macOS App 請用此檔。
下載
SERAMONX seramonx_menubar_template_36.png,選單列範本圖示,顯示 18 CSS px
seramonx_menubar_template_36.png36×36 px · 顯示 18 CSS px(2 倍)範本圖示,只含黑色與透明,由系統依選單列自動上色,顯示 18 CSS px,為 2 倍密度檔案。原生 macOS App 請用此檔。
下載
SERAMONX seramonx_menubar_dark_18.png(深色環境 · 白標誌),18×18 px,顯示 18 CSS px
seramonx_menubar_dark_18.png18×18 px · 顯示 18 CSS px(1 倍)白色或黑色的單色圖示 PNG,顯示 18 CSS px。僅供網頁、文件示意;原生 macOS App 請用 template。
下載
SERAMONX seramonx_menubar_dark_36.png(深色環境 · 白標誌),36×36 px,顯示 18 CSS px
seramonx_menubar_dark_36.png36×36 px · 顯示 18 CSS px(2 倍)白色或黑色的單色圖示 PNG,顯示 18 CSS px。僅供網頁、文件示意;原生 macOS App 請用 template。
下載
SERAMONX seramonx_menubar_dark.svg(深色環境 · 白標誌),18×18 向量,顯示 18 CSS px
seramonx_menubar_dark.svg18×18 向量(viewBox) · 顯示 18 CSS px單色向量版本。僅供網頁、文件示意;原生 macOS App 請用 template。
下載
SERAMONX seramonx_menubar_light_18.png(淺色環境 · 黑標誌),18×18 px,顯示 18 CSS px
seramonx_menubar_light_18.png18×18 px · 顯示 18 CSS px(1 倍)白色或黑色的單色圖示 PNG,顯示 18 CSS px。僅供網頁、文件示意;原生 macOS App 請用 template。
下載
SERAMONX seramonx_menubar_light_36.png(淺色環境 · 黑標誌),36×36 px,顯示 18 CSS px
seramonx_menubar_light_36.png36×36 px · 顯示 18 CSS px(2 倍)白色或黑色的單色圖示 PNG,顯示 18 CSS px。僅供網頁、文件示意;原生 macOS App 請用 template。
下載
SERAMONX seramonx_menubar_light.svg(淺色環境 · 黑標誌),18×18 向量,顯示 18 CSS px
seramonx_menubar_light.svg18×18 向量(viewBox) · 顯示 18 CSS px單色向量版本。僅供網頁、文件示意;原生 macOS App 請用 template。
下載

Dock、Launchpad 與 Finder

App 安裝後,圖示同時出現在 Dock、Launchpad 與 Finder,各處的顯示尺寸不同,由 .icns 內含的多個尺寸幀分別提供。

示意 · CSS 模擬
文件SERAMONX icon_128x128.png,Finder 圖示檢視,顯示 64 CSS pxSERAMONX下載
SERAMONX icon_32x32.png,Finder 清單檢視,顯示 16 CSS pxSERAMONX
SERAMONX icon_256x256.png,Launchpad,顯示 96 CSS pxSERAMONX
SERAMONX icon_128x128.png,Dock,顯示 64 CSS px

macOS 與 Windows 各介面(Dock、Launchpad、Finder、工作列、檔案總管、關於視窗、安裝視窗)的顯示尺寸為示意值。 未查證,暫定或示意

用到的檔案
SERAMONX icon_512x512.png,.icns 的 512 px 幀作為代表圖,顯示 96 CSS px
seramonx.icns內含 10 個尺寸幀,最大 1024×1024 pxmacOS App 圖示檔,系統依顯示位置自行挑選幀;此處以 512 px 幀作為代表圖。
下載
SERAMONX icon_128x128.png(深色環境 · 白標誌),128×128 px,顯示 64 CSS px
icon_128x128.png128×128 px · 顯示 64 CSS px(2 倍)Dock 與 Finder 圖示檢視,顯示 64 CSS px,為 2 倍密度。
下載
SERAMONX icon_256x256.png(深色環境 · 白標誌),256×256 px,顯示 96 CSS px
icon_256x256.png256×256 px · 顯示 96 CSS px(2.7 倍)Launchpad,顯示 96 CSS px。
下載
SERAMONX icon_32x32.png(深色環境 · 白標誌),32×32 px,顯示 16 CSS px
icon_32x32.png32×32 px · 顯示 16 CSS px(2 倍)Finder 清單檢視,顯示 16 CSS px,為 2 倍密度。
下載

關於視窗與安裝視窗

App 的「關於」視窗與下載後的安裝視窗(拖曳到「應用程式」),以大尺寸圖示呈現品牌。

示意 · CSS 模擬
SERAMONX seramonx_app_icon_dark.svg,關於視窗,顯示 128 CSS pxSERAMONX
SERAMONX seramonx_app_icon_light.svg,關於視窗,顯示 128 CSS pxSERAMONX
SERAMONX icon_256x256.png,安裝視窗,顯示 128 CSS pxSERAMONX應用程式

macOS 與 Windows 各介面(Dock、Launchpad、Finder、工作列、檔案總管、關於視窗、安裝視窗)的顯示尺寸為示意值。 未查證,暫定或示意 macOS 現行標準為 1024×1024 方形圖,圓角、陰影與高光由系統處理,不自行繪製;macOS 15 以前的舊式 .icns 另行保留。macOS 26 是否替舊式圖示加上系統背景尚未實機驗證。 官方文件原文已查證

用到的檔案
SERAMONX icon_256x256.png(深色環境 · 白標誌),256×256 px,顯示 128 CSS px
icon_256x256.png256×256 px · 顯示 128 CSS px(2 倍)舊式(macOS 15 以前)iconset 幀,安裝視窗與關於視窗,顯示 128 CSS px,為 2 倍密度。
下載
SERAMONX seramonx_app_icon_dark.svg(深色環境 · 白標誌),1024×1024 向量,顯示 128 CSS px
seramonx_app_icon_dark.svg1024×1024 向量(viewBox) · 顯示 128 CSS px舊式(macOS 15 以前)向量版 App 圖示(含底座與投影),關於視窗以此呈現,顯示 128 CSS px。
下載
SERAMONX seramonx_app_icon_light.svg(淺色環境 · 黑標誌),1024×1024 向量,顯示 128 CSS px
seramonx_app_icon_light.svg1024×1024 向量(viewBox) · 顯示 128 CSS px舊式(macOS 15 以前)向量版 App 圖示(含底座與投影),關於視窗以此呈現,顯示 128 CSS px。
下載
SERAMONX seramonx_macos_icon_1024.png(深色環境 · 白標誌),1024×1024 px,顯示 128 CSS px
seramonx_macos_icon_1024.png1024×1024 px · 顯示 128 CSS px(8 倍)現行標準(macOS 26 起):1024 方形圖,圓角與陰影由系統套用,不可自行繪製;上方示意以舊式圖示呈現,供支援 macOS 15 以前時使用。
下載
SERAMONX seramonx_macos_icon_layer_fg.svg(深色環境 · 白標誌),1024×1024 向量,顯示 128 CSS px
seramonx_macos_icon_layer_fg.svg1024×1024 向量(viewBox) · 顯示 128 CSS px前景圖層向量,供在 Icon Composer 組裝現行標準圖示時使用。
下載

Windows App

工作列與檔案總管

Windows 的 App 圖示出現在工作列、檔案總管的圖示檢視與清單檢視,.ico 內含多個尺寸幀,系統依位置擇一。

示意 · CSS 模擬
文件SERAMONX seramonx.ico,檔案總管圖示檢視,取 48 px 幀,顯示 48 CSS pxSERAMONX下載
SERAMONX seramonx.ico,檔案總管清單檢視,取 16 px 幀,顯示 16 CSS pxSERAMONX
SERAMONX seramonx.ico,工作列,取 24 px 幀,顯示 24 CSS px

macOS 與 Windows 各介面(Dock、Launchpad、Finder、工作列、檔案總管、關於視窗、安裝視窗)的顯示尺寸為示意值。 未查證,暫定或示意

用到的檔案
SERAMONX seramonx.ico,16 px 幀,1:1
16 px
SERAMONX seramonx.ico,24 px 幀,1:1
24 px
SERAMONX seramonx.ico,32 px 幀,1:1
32 px
SERAMONX seramonx.ico,48 px 幀,1:1
48 px
SERAMONX seramonx.ico,64 px 幀,1:1
64 px
seramonx.ico內含 16 / 24 / 32 / 48 / 64 / 128 / 256 px 幀工作列取 24 px 幀(顯示 24 CSS px)、檔案總管圖示檢視取 48 px 幀(顯示 48 CSS px)、清單檢視取 16 px 幀(顯示 16 CSS px)。預覽為內含幀的 1:1 顯示。
下載

iOS 原生 App

iOS 主畫面、設定與 App Store

iOS 原生 App 的圖示出現在主畫面、設定清單與 App Store 商品頁;同一張 1024 方形圖像由系統縮放並套用圓角。

示意 · CSS 模擬
SERAMONX seramonx_ios_icon_1024.png,主畫面,顯示 60 CSS pxSERAMONX
SERAMONX seramonx_ios_icon_1024.png,設定清單,顯示 29 CSS pxSERAMONX
SERAMONX seramonx_ios_icon_1024.png,App Store 商品頁,顯示 120 CSS px
SERAMONX
SERAMONX seramonx_ios_icon_1024.png,預設外觀,顯示 60 CSS px預設
SERAMONX seramonx_ios_icon_dark_1024.png,深色外觀,顯示 60 CSS px深色
SERAMONX seramonx_ios_icon_tinted_1024.png,單色調外觀,顯示 60 CSS px單色調

iOS 圖示為單一 1024×1024 方形圖像,不自帶遮罩;系統套用圓角並自動縮出主畫面、設定、通知等尺寸,App Store 使用同一張圖像。 官方文件原文已查證 App Store 圖示不可含透明度(alpha 通道),本專案的 iOS 預設圖示以不含 alpha 通道的 RGB PNG 輸出。 官方來源,但頁面非現行或非直接 情境畫面中各介面元件的顯示尺寸與圓角形狀為 CSS 示意值,並非各平台實際尺寸或曲線。 未查證,暫定或示意

用到的檔案
SERAMONX seramonx_ios_icon_1024.png(深色環境 · 白標誌),1024×1024 px,顯示 60 CSS px
seramonx_ios_icon_1024.png1024×1024 px · 顯示 60 CSS px(17.1 倍)同一張 1024 方形圖像:主畫面顯示 60 CSS px,設定清單顯示 29 CSS px,App Store 商品頁顯示 120 CSS px,皆由系統或頁面縮放;不自帶圓角與透明度。
下載
SERAMONX seramonx_ios_icon_dark_1024.png(深色環境 · 白標誌),1024×1024 px,顯示 60 CSS px
seramonx_ios_icon_dark_1024.png1024×1024 px · 顯示 60 CSS px(17.1 倍)深色外觀,透明底,由系統底色透出。
下載
SERAMONX seramonx_ios_icon_tinted_1024.png(深色環境 · 白標誌),1024×1024 px,顯示 60 CSS px
seramonx_ios_icon_tinted_1024.png1024×1024 px · 顯示 60 CSS px(17.1 倍)單色調外觀,灰階圖像。
下載
SERAMONX seramonx_icon_layer_fg.svg(深色環境 · 白標誌),1024×1024 向量,顯示 60 CSS px
seramonx_icon_layer_fg.svg1024×1024 向量(viewBox) · 顯示 60 CSS px前景圖層向量,供在 Icon Composer 組裝圖示時使用。
下載

Android 原生 App

Android 自適應圖示、通知與 Google Play

Android 原生 App 的圖示由前景與背景兩層合成,系統依機型套用遮罩;通知列使用單色小圖示;Google Play 商店頁使用 512 圖示。

示意 · CSS 模擬
SERAMONX seramonx_adaptive_bg_432.png,背景層,顯示 108 CSS pxSERAMONX seramonx_adaptive_fg_432.png,前景層,顯示 108 CSS px
圓形
SERAMONX seramonx_adaptive_bg_432.png,背景層,顯示 108 CSS pxSERAMONX seramonx_adaptive_fg_432.png,前景層,顯示 108 CSS px
圓角方形
單色主題化
SERAMONX seramonx_notification_96.png,通知列,顯示 24 CSS px
SERAMONX seramonx_play_icon_512.png,Google Play 商店頁,顯示 96 CSS px
SERAMONX

Android 自適應圖示的前景、背景與單色各為 108×108 dp 的圖層,安全區為中央 66×66 dp,四邊各 18 dp 保留給遮罩與特效;各密度像素為 108 dp 乘以密度倍率(xxxhdpi 為 432 px)。 由官方數值推導 自適應圖示的可見區為 72×72 dp,由 108 dp 扣除四邊各 18 dp 推得。 由官方數值推導 Android 通知小圖示,系統只讀取透明度並以白色繪製,因此使用白色加透明的單色圖像;24 dp 對應 24、36、48、72、96 px。 由官方數值推導 通知小圖示的全尺寸為 24 dp,內部可見範圍約 22 dp。 次級來源,未取得官方原文 Google Play 商店圖示為 512×512、32-bit PNG,使用滿版方形;Play 會自行套用圓角與投影。 官方文件原文已查證

用到的檔案
SERAMONX seramonx_adaptive_fg.svg(深色環境 · 白標誌),108×108 向量,顯示 108 CSS px
seramonx_adaptive_fg.svg108×108 向量(viewBox) · 顯示 108 CSS px前景層。圖層以 108 CSS px 顯示,遮罩只露出中央可見區(見下方依據)。
下載
SERAMONX seramonx_adaptive_fg_432.png(深色環境 · 白標誌),432×432 px,顯示 108 CSS px
seramonx_adaptive_fg_432.png432×432 px · 顯示 108 CSS px(4 倍)前景層。圖層以 108 CSS px 顯示,遮罩只露出中央可見區(見下方依據)。
下載
SERAMONX seramonx_adaptive_bg.svg(深色環境 · 白標誌),108×108 向量,顯示 108 CSS px
seramonx_adaptive_bg.svg108×108 向量(viewBox) · 顯示 108 CSS px背景層,與前景層合成後再套用遮罩。
下載
SERAMONX seramonx_adaptive_bg_432.png(深色環境 · 白標誌),432×432 px,顯示 108 CSS px
seramonx_adaptive_bg_432.png432×432 px · 顯示 108 CSS px(4 倍)背景層,與前景層合成後再套用遮罩。
下載
SERAMONX seramonx_adaptive_mono.svg,108×108 向量,顯示 108 CSS px
seramonx_adaptive_mono.svg108×108 向量(viewBox) · 顯示 108 CSS px單色圖層,供系統主題化圖示著色。
下載
SERAMONX seramonx_adaptive_mono_432.png,432×432 px,顯示 108 CSS px
seramonx_adaptive_mono_432.png432×432 px · 顯示 108 CSS px(4 倍)單色圖層,供系統主題化圖示著色。
下載
SERAMONX seramonx_notification.svg,24×24 向量,顯示 24 CSS px
seramonx_notification.svg24×24 向量(viewBox) · 顯示 24 CSS px通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px。
下載
SERAMONX seramonx_notification_24.png,24×24 px,顯示 24 CSS px
seramonx_notification_24.png24×24 px · 顯示 24 CSS px(1 倍)通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px。
下載
SERAMONX seramonx_notification_36.png,36×36 px,顯示 24 CSS px
seramonx_notification_36.png36×36 px · 顯示 24 CSS px(1.5 倍)通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px,為 1.5 倍密度版本。
下載
SERAMONX seramonx_notification_48.png,48×48 px,顯示 24 CSS px
seramonx_notification_48.png48×48 px · 顯示 24 CSS px(2 倍)通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px,為 2 倍密度版本。
下載
SERAMONX seramonx_notification_72.png,72×72 px,顯示 24 CSS px
seramonx_notification_72.png72×72 px · 顯示 24 CSS px(3 倍)通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px,為 3 倍密度版本。
下載
SERAMONX seramonx_notification_96.png,96×96 px,顯示 24 CSS px
seramonx_notification_96.png96×96 px · 顯示 24 CSS px(4 倍)通知列小圖示,白色加透明的單色圖像,顯示 24 CSS px,為 4 倍密度版本。
下載
SERAMONX seramonx_play_icon_512.png(深色環境 · 白標誌),512×512 px,顯示 96 CSS px
seramonx_play_icon_512.png512×512 px · 顯示 96 CSS px(5.3 倍)Google Play 商店頁圖示,顯示 96 CSS px;滿版方形,圓角與投影由商店套用。
下載

瀏覽器擴充套件

擴充功能管理頁與安裝流程

瀏覽器擴充套件的圖示出現在擴充功能自身頁面的分頁、擴充功能管理頁,以及安裝流程。

示意 · CSS 模擬
SERAMONX icon-16.png,擴充功能自身頁面的分頁,顯示 16 CSS pxSERAMONX
擴充功能自身頁面,16 CSS px
SERAMONX action-16.png,瀏覽器工具列,顯示 16 CSS px
瀏覽器工具列,16 CSS px
SERAMONX icon-48.png,擴充功能管理頁,顯示 48 CSS pxSERAMONX
擴充功能管理頁,48 CSS px
SERAMONX icon-128.png,安裝流程,顯示 128 CSS pxSERAMONX
安裝流程,128 CSS px

擴充套件圖示:128 用於安裝流程與商店頁,48 用於擴充功能管理頁,16 用作擴充功能頁面的 favicon;32 見於官方範例 manifest,用途原文未說明;工具列圖示另以 manifest 的 action 指定。 官方文件原文已查證 擴充套件不支援 SVG 圖示,工具列圖示為 16 DIP,另提供 24、32 px 供縮放。 官方文件原文已查證

用到的檔案
SERAMONX icon-16.png(深色環境 · 白標誌),16×16 px,顯示 16 CSS px
icon-16.png16×16 px · 顯示 16 CSS px(1 倍)擴充功能自身頁面的圖示位置,1:1 顯示。
下載
SERAMONX icon-32.png(深色環境 · 白標誌),32×32 px,顯示 32 CSS px
icon-32.png32×32 px · 顯示 32 CSS px(1 倍)補充尺寸,1:1 顯示。
下載
SERAMONX icon-48.png(深色環境 · 白標誌),48×48 px,顯示 48 CSS px
icon-48.png48×48 px · 顯示 48 CSS px(1 倍)擴充功能管理頁,1:1 顯示。
下載
SERAMONX icon-128.png(深色環境 · 白標誌),128×128 px,顯示 128 CSS px
icon-128.png128×128 px · 顯示 128 CSS px(1 倍)安裝流程與商店頁,1:1 顯示;圖案四周帶透明邊距。
下載
SERAMONX action-16.png(深色環境 · 白標誌),16×16 px,顯示 16 CSS px
action-16.png16×16 px · 顯示 16 CSS px(1 倍)工具列圖示,顯示 16 CSS px,由 manifest 的 action 指定。
下載
SERAMONX action-24.png(深色環境 · 白標誌),24×24 px,顯示 16 CSS px
action-24.png24×24 px · 顯示 16 CSS px(1.5 倍)工具列圖示,顯示 16 CSS px,為 1.5 倍密度版本,由 manifest 的 action 指定。
下載
SERAMONX action-32.png(深色環境 · 白標誌),32×32 px,顯示 16 CSS px
action-32.png32×32 px · 顯示 16 CSS px(2 倍)工具列圖示,顯示 16 CSS px,為 2 倍密度版本,由 manifest 的 action 指定。
下載

擴充套件商店頁

擴充套件上架商店時使用的 128 圖示,圖案四周帶透明邊距;與 manifest 的 128 圖示為同一個檔案。

示意 · CSS 模擬
SERAMONX icon-128.png,商店頁,顯示 128 CSS px,圖案四周帶透明邊距
SERAMONX

Chrome 線上應用程式商店的 128×128 圖示,圖案為 96×96,四邊各留 16 px 透明邊距;同一檔案兼作 manifest 的 128 圖示。 官方文件原文已查證

用到的檔案
SERAMONX icon-128.png(深色環境 · 白標誌),128×128 px,顯示 128 CSS px
icon-128.png128×128 px · 顯示 128 CSS px(1 倍)商店頁圖示,1:1 顯示;虛線為圖案範圍示意。
下載

文件、簡報與印刷

文件、簡報、信件與上傳平台

文件頁首、簡報封面、信件署名,以及需上傳點陣圖的平台。優先使用向量;平台只收點陣時才用 PNG。未提供組合標或字標的服務,以單獨母標取代。

示意 · CSS 模擬
SERAMONX seramonx_lockup_h_light.svg,文件頁首,顯示 200 CSS px
文件頁首
SERAMONX seramonx_logo_dark.svg,簡報封面,顯示 180 CSS px
簡報封面
SERAMONX seramonx_wordmark_light.svg,信件署名,顯示 160 CSS px
信件署名
上傳標誌
SERAMONX seramonx_logo_light_512.png,上傳平台預覽,顯示 176 CSS px
上傳點陣圖的平台
用到的檔案
SERAMONX seramonx_lockup_h_light.svg(淺色環境 · 黑標誌),891×231.5 向量,顯示 200 CSS px
seramonx_lockup_h_light.svg891×231.5 向量(viewBox) · 顯示 200 CSS px文件頁首與橫向版面,顯示 200 CSS px 寬。檔案已內建淨空。
下載
SERAMONX seramonx_logo_dark.svg(深色環境 · 白標誌),1069×1069 向量,顯示 180 CSS px
seramonx_logo_dark.svg1069×1069 向量(viewBox) · 顯示 180 CSS px簡報封面,顯示 180 CSS px 寬,墨跡寬約 112.3 CSS px。
下載
SERAMONX seramonx_wordmark_light.svg(淺色環境 · 黑標誌),682.5×200 向量,顯示 160 CSS px
seramonx_wordmark_light.svg682.5×200 向量(viewBox) · 顯示 160 CSS px信件署名等只需文字的位置,顯示 160 CSS px 寬。
下載
SERAMONX seramonx_logo_light_512.png(淺色環境 · 黑標誌),512×512 px,顯示 176 CSS px
seramonx_logo_light_512.png512×512 px · 顯示 176 CSS px(2.9 倍)平台只收點陣圖時使用,透明底,顯示 176 CSS px。
下載
SERAMONX seramonx_h_light_800.png(淺色環境 · 黑標誌),800×208 px,顯示 240 CSS px
seramonx_h_light_800.png800×208 px · 顯示 240 CSS px(3.3 倍)需要橫向組合的點陣版本時使用,透明底,顯示 240 CSS px 寬。
下載
03

全部檔案清單

All Files

完整索引,收合時不佔版面。路徑為相對於資產套件根目錄的路徑。

展開全部檔案(111 筆)

基礎模組:標誌向量、Micro、PNG 與緊貼裁切版(48)

seramonx_logo_dark.svg1069×1069 向量主標誌 Display 版,用於較大尺寸的版面、印刷與簡報(深色環境 · 白標誌)文件、簡報、信件與上傳平台、標誌與識別下載
seramonx_logo_light.svg1069×1069 向量主標誌 Display 版,用於較大尺寸的版面、印刷與簡報(淺色環境 · 黑標誌)標誌與識別下載
seramonx_logo_dark_trim.svg667×523.8 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 201 個單位)。主標誌 Display 版,用於較大尺寸的版面、印刷與簡報(深色環境 · 白標誌)進階用途,不屬於情境下載
seramonx_logo_light_trim.svg667×523.8 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 201 個單位)。主標誌 Display 版,用於較大尺寸的版面、印刷與簡報(淺色環境 · 黑標誌)進階用途,不屬於情境下載
seramonx_micro16_dark.svg24×24 向量單獨母標的最小一級(簡化版,去除羽冠),用於最小的圖示位置(深色環境 · 白標誌)標誌與識別下載
seramonx_micro16_light.svg24×24 向量單獨母標的最小一級(簡化版,去除羽冠),用於最小的圖示位置(淺色環境 · 黑標誌)標誌與識別下載
seramonx_micro_dark.svg48×48 向量單獨母標的小尺寸一級(輕量版),用於中小尺寸的圖示位置(深色環境 · 白標誌)標誌與識別下載
seramonx_micro_light.svg48×48 向量單獨母標的小尺寸一級(輕量版),用於中小尺寸的圖示位置(淺色環境 · 黑標誌)標誌與識別下載
seramonx_logo_dark_1024.png1024×1024 px主標誌 PNG 1024 px,透明底,供簡報、文件與需上傳點陣圖的平台(深色環境 · 白標誌)規格備援尺寸下載
seramonx_logo_dark_256.png256×256 px主標誌 PNG 256 px,透明底,供簡報、文件與需上傳點陣圖的平台(深色環境 · 白標誌)規格備援尺寸下載
seramonx_logo_dark_512.png512×512 px主標誌 PNG 512 px,透明底,供簡報、文件與需上傳點陣圖的平台(深色環境 · 白標誌)規格備援尺寸下載
seramonx_logo_light_1024.png1024×1024 px主標誌 PNG 1024 px,透明底,供簡報、文件與需上傳點陣圖的平台(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_logo_light_256.png256×256 px主標誌 PNG 256 px,透明底,供簡報、文件與需上傳點陣圖的平台(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_logo_light_512.png512×512 px主標誌 PNG 512 px,透明底,供簡報、文件與需上傳點陣圖的平台(淺色環境 · 黑標誌)文件、簡報、信件與上傳平台下載
seramonx_lockup_h_dark.svg891×231.5 向量橫向組合標,網站導覽列、文件頁首與橫向版面(深色環境 · 白標誌)網站導覽列、標誌與識別下載
seramonx_lockup_h_light.svg891×231.5 向量橫向組合標,網站導覽列、文件頁首與橫向版面(淺色環境 · 黑標誌)網站導覽列、文件、簡報、信件與上傳平台、標誌與識別下載
seramonx_lockup_v_dark.svg682.5×684.5 向量直向組合標,方形或直式版面(深色環境 · 白標誌)標誌與識別下載
seramonx_lockup_v_light.svg682.5×684.5 向量直向組合標,方形或直式版面(淺色環境 · 黑標誌)標誌與識別下載
seramonx_lockup_h_dark_trim.svg791×131 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。橫向組合標,網站導覽列、文件頁首與橫向版面(深色環境 · 白標誌)進階用途,不屬於情境下載
seramonx_lockup_h_light_trim.svg791×131 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。橫向組合標,網站導覽列、文件頁首與橫向版面(淺色環境 · 黑標誌)進階用途,不屬於情境下載
seramonx_lockup_v_dark_trim.svg582.5×584.3 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。直向組合標,方形或直式版面(深色環境 · 白標誌)進階用途,不屬於情境下載
seramonx_lockup_v_light_trim.svg582.5×584.3 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。直向組合標,方形或直式版面(淺色環境 · 黑標誌)進階用途,不屬於情境下載
seramonx_h_dark_1200.png1200×312 px橫向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_h_dark_1600.png1600×416 px橫向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_h_dark_400.png400×104 px橫向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_h_dark_800.png800×208 px橫向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_h_light_1200.png1200×312 px橫向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_h_light_1600.png1600×416 px橫向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_h_light_400.png400×104 px橫向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_h_light_800.png800×208 px橫向組合標 PNG,透明底(淺色環境 · 黑標誌)文件、簡報、信件與上傳平台下載
seramonx_v_dark_1200.png1200×1204 px直向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_v_dark_1600.png1600×1605 px直向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_v_dark_400.png400×401 px直向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_v_dark_800.png800×802 px直向組合標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_v_light_1200.png1200×1204 px直向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_v_light_1600.png1600×1605 px直向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_v_light_400.png400×401 px直向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_v_light_800.png800×802 px直向組合標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_wordmark_dark.svg682.5×200 向量純字標,僅需文字或標誌已另行出現時使用(深色環境 · 白標誌)標誌與識別下載
seramonx_wordmark_light.svg682.5×200 向量純字標,僅需文字或標誌已另行出現時使用(淺色環境 · 黑標誌)文件、簡報、信件與上傳平台、標誌與識別下載
seramonx_wordmark_dark_trim.svg582.5×100 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。純字標,僅需文字或標誌已另行出現時使用(深色環境 · 白標誌)進階用途,不屬於情境下載
seramonx_wordmark_light_trim.svg582.5×100 向量進階:緊貼裁切版,無內建淨空,使用時須自行遵守淨空規則(四周各 0.5X,即 50 個單位)。純字標,僅需文字或標誌已另行出現時使用(淺色環境 · 黑標誌)進階用途,不屬於情境下載
seramonx_wordmark_dark_1200.png1200×352 px純字標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_wordmark_dark_300.png300×88 px純字標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_wordmark_dark_600.png600×176 px純字標 PNG,透明底(深色環境 · 白標誌)規格備援尺寸下載
seramonx_wordmark_light_1200.png1200×352 px純字標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_wordmark_light_300.png300×88 px純字標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載
seramonx_wordmark_light_600.png600×176 px純字標 PNG,透明底(淺色環境 · 黑標誌)規格備援尺寸下載

web 模組:Web 與 PWA(15)

favicon.svg32×32 向量瀏覽器分頁圖示(向量),自帶底座瀏覽器分頁與書籤列下載
favicon.ico16 / 24 / 32 / 48 px傳統瀏覽器分頁圖示,內含多個尺寸幀瀏覽器分頁與書籤列下載
favicon-16x16.png16×16 pxFavicon 點陣幀 16 px瀏覽器分頁與書籤列下載
favicon-24x24.png24×24 pxFavicon 點陣幀 24 px瀏覽器分頁與書籤列下載
favicon-32x32.png32×32 pxFavicon 點陣幀 32 px瀏覽器分頁與書籤列下載
favicon-48x48.png48×48 pxFavicon 點陣幀 48 px瀏覽器分頁與書籤列下載
apple-touch-icon.png180×180 pxiOS 主畫面圖示(網頁加到主畫面)iOS 主畫面下載
android-chrome-192x192.png192×192 pxAndroid/PWA 圖示 192 pxAndroid 與 PWA 圖示下載
android-chrome-512x512.png512×512 pxAndroid/PWA 圖示 512 pxAndroid 與 PWA 圖示下載
icon-maskable-512.png512×512 pxPWA 自適應(maskable)圖示Android 與 PWA 圖示下載
site.webmanifest文字檔Web App Manifest,宣告名稱、顏色與圖示清單Android 與 PWA 圖示下載
og-image-dark.png1200×630 px社群連結預覽卡(深色環境 · 白標誌)社群連結預覽下載
og-image-light.png1200×630 px社群連結預覽卡(淺色環境 · 黑標誌)社群連結預覽下載
seramonx_og_card_dark.svg1200×630 向量社群分享卡向量來源,文字已轉為路徑(深色環境 · 白標誌)社群連結預覽下載
seramonx_og_card_light.svg1200×630 向量社群分享卡向量來源,文字已轉為路徑(淺色環境 · 黑標誌)社群連結預覽下載

desktop-native 模組:桌面 App(24)

seramonx_macos_icon_1024.png1024×1024 pxmacOS 現行標準 App 圖示(1024 方形,不自帶圓角與陰影,由系統套用遮罩)關於視窗與安裝視窗下載
seramonx_macos_icon_layer_fg.svg1024×1024 向量macOS Icon Composer 前景圖層(向量,透明底)關於視窗與安裝視窗下載
seramonx.icns最大 1024×1024 px【舊式,macOS 15 以前】macOS App 圖示檔Dock、Launchpad 與 Finder下載
icon_128x128.png128×128 px【舊式,macOS 15 以前】macOS iconset 幀 128 pxDock、Launchpad 與 Finder下載
icon_128x128@2x.png256×256 px【舊式,macOS 15 以前】macOS iconset 幀 256 px規格備援尺寸下載
icon_16x16.png16×16 px【舊式,macOS 15 以前】macOS iconset 幀 16 px規格備援尺寸下載
icon_16x16@2x.png32×32 px【舊式,macOS 15 以前】macOS iconset 幀 32 px規格備援尺寸下載
icon_256x256.png256×256 px【舊式,macOS 15 以前】macOS iconset 幀 256 pxDock、Launchpad 與 Finder、關於視窗與安裝視窗下載
icon_256x256@2x.png512×512 px【舊式,macOS 15 以前】macOS iconset 幀 512 px規格備援尺寸下載
icon_32x32.png32×32 px【舊式,macOS 15 以前】macOS iconset 幀 32 pxDock、Launchpad 與 Finder下載
icon_32x32@2x.png64×64 px【舊式,macOS 15 以前】macOS iconset 幀 64 px規格備援尺寸下載
icon_512x512.png512×512 px【舊式,macOS 15 以前】macOS iconset 幀 512 px規格備援尺寸下載
icon_512x512@2x.png1024×1024 px【舊式,macOS 15 以前】macOS iconset 幀 1024 px規格備援尺寸下載
seramonx_app_icon_dark.svg1024×1024 向量【舊式,macOS 15 以前】桌面 App 圖示向量,含底座與投影(深色環境 · 白標誌)關於視窗與安裝視窗下載
seramonx_app_icon_light.svg1024×1024 向量【舊式,macOS 15 以前】桌面 App 圖示向量,含底座與投影(淺色環境 · 黑標誌)關於視窗與安裝視窗下載
seramonx.ico16 / 24 / 32 / 48 / 64 / 128 / 256 pxWindows App 圖示檔,內含多個尺寸幀工作列與檔案總管下載
seramonx_menubar_template_18.png18×18 pxmacOS 選單列範本圖示 18 px(黑色加透明,由系統上色)選單列下載
seramonx_menubar_template_36.png36×36 pxmacOS 選單列範本圖示 36 px(黑色加透明,由系統上色)選單列下載
seramonx_menubar_dark.svg18×18 向量macOS 選單列圖示向量,單色;僅供網頁、文件示意;原生 macOS App 請用 template(深色環境 · 白標誌)選單列下載
seramonx_menubar_light.svg18×18 向量macOS 選單列圖示向量,單色;僅供網頁、文件示意;原生 macOS App 請用 template(淺色環境 · 黑標誌)選單列下載
seramonx_menubar_dark_18.png18×18 pxmacOS 選單列圖示 PNG 18 px,單色透明底;僅供網頁、文件示意;原生 macOS App 請用 template(深色環境 · 白標誌)選單列下載
seramonx_menubar_dark_36.png36×36 pxmacOS 選單列圖示 PNG 36 px,單色透明底;僅供網頁、文件示意;原生 macOS App 請用 template(深色環境 · 白標誌)選單列下載
seramonx_menubar_light_18.png18×18 pxmacOS 選單列圖示 PNG 18 px,單色透明底;僅供網頁、文件示意;原生 macOS App 請用 template(淺色環境 · 黑標誌)選單列下載
seramonx_menubar_light_36.png36×36 pxmacOS 選單列圖示 PNG 36 px,單色透明底;僅供網頁、文件示意;原生 macOS App 請用 template(淺色環境 · 黑標誌)選單列下載

mobile-native 模組:行動 App(17)

seramonx_ios_icon_1024.png1024×1024 pxiOS App 圖示(1024,同時作為 App Store 圖示)iOS 主畫面、設定與 App Store下載
seramonx_ios_icon_dark_1024.png1024×1024 pxiOS 深色外觀圖示(透明底)iOS 主畫面、設定與 App Store下載
seramonx_ios_icon_tinted_1024.png1024×1024 pxiOS 單色調外觀圖示(灰階)iOS 主畫面、設定與 App Store下載
seramonx_icon_layer_fg.svg1024×1024 向量iOS 圖示前景圖層(向量,透明底)iOS 主畫面、設定與 App Store下載
seramonx_adaptive_fg.svg108×108 向量Android 自適應圖示前景層Android 自適應圖示、通知與 Google Play下載
seramonx_adaptive_fg_432.png432×432 pxAndroid 自適應圖示前景層Android 自適應圖示、通知與 Google Play下載
seramonx_adaptive_bg.svg108×108 向量Android 自適應圖示背景層Android 自適應圖示、通知與 Google Play下載
seramonx_adaptive_bg_432.png432×432 pxAndroid 自適應圖示背景層Android 自適應圖示、通知與 Google Play下載
seramonx_adaptive_mono.svg108×108 向量Android 單色(主題化)圖示Android 自適應圖示、通知與 Google Play下載
seramonx_adaptive_mono_432.png432×432 pxAndroid 單色(主題化)圖示Android 自適應圖示、通知與 Google Play下載
seramonx_notification.svg24×24 向量Android 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_notification_24.png24×24 pxAndroid 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_notification_36.png36×36 pxAndroid 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_notification_48.png48×48 pxAndroid 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_notification_72.png72×72 pxAndroid 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_notification_96.png96×96 pxAndroid 通知小圖示(單色)Android 自適應圖示、通知與 Google Play下載
seramonx_play_icon_512.png512×512 pxGoogle Play 商店圖示Android 自適應圖示、通知與 Google Play下載

extension 模組:瀏覽器擴充套件(7)

icon-16.png16×16 px瀏覽器擴充套件 manifest 圖示 16 px擴充功能管理頁與安裝流程下載
icon-32.png32×32 px瀏覽器擴充套件 manifest 圖示 32 px擴充功能管理頁與安裝流程下載
icon-48.png48×48 px瀏覽器擴充套件 manifest 圖示 48 px擴充功能管理頁與安裝流程下載
icon-128.png128×128 px擴充套件 128 圖示(manifest 與商店共用,圖案四周帶透明邊距)擴充功能管理頁與安裝流程、擴充套件商店頁下載
action-16.png16×16 px擴充套件工具列圖示 16 px擴充功能管理頁與安裝流程下載
action-24.png24×24 px擴充套件工具列圖示 24 px擴充功能管理頁與安裝流程下載
action-32.png32×32 px擴充套件工具列圖示 32 px擴充功能管理頁與安裝流程下載
04

接入指南

Integration

Web

<head> 片段
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#09090B">
<meta property="og:image" content="https://example.com/og-image-dark.png">
路徑採站台根目錄的通用寫法,請依專案實際的靜態資源路徑調整;og:image 建議使用完整網址。 Safari 對 SVG favicon 的支援尚未驗證,因此保留 favicon.ico 與 apple-touch-icon 作為備援。 未查證,暫定或示意
Web App Manifest · site.webmanifest
{
  "name": "SERAMONX",
  "short_name": "SERAMONX",
  "description": "SERAMONX 的小服務,貼合日常的需求與習慣,每一個都真的幫得上忙。",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#09090B",
  "theme_color": "#09090B",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
內容取自 site.webmanifest。圖示的 src 相對於清單檔所在位置。

瀏覽器擴充套件

manifest.json 的 icons
"icons": {
  "16": "icon-16.png",
  "32": "icon-32.png",
  "48": "icon-48.png",
  "128": "icon-128.png"
}
圖示路徑相對於擴充套件的 manifest.json;各尺寸用途見第 02 章的擴充套件場景。

桌面 App

macOS 提供 seramonx.icns,以及 10 幀的 iconset;Windows 提供 seramonx.ico,內含 16、24、32、48、64、128、256 px 幀。放置位置與打包方式依宿主專案的建置設定決定。

數值依據與查證狀態

頁面中的平台數值與規格說法,其來源與查證等級如下。未查證者僅為示意或暫定值。