PixRinse截圖展示英文版應用。預設名稱和設定項也提供應用內的本地化版本。
從這組設定開始
在 PixRinse 中選擇 Favicon 全套，再按接收平臺的實際要求檢查以下設定。
| 網站圖示 PNG | 16 / 32 / 48 px |
|---|---|
| Apple Touch 圖示 PNG | 180 px |
| Web 應用程式 PNG | 192 / 512 px |
| 顏色 | sRGB |
具體操作步驟
準備正方形標誌原圖
使用至少與您需要的最大圖示一樣大的來源。簡化可能在 16 px 處消失的細節。
選擇Favicon 全套
查看六種尺寸。此範本使用居中覆蓋規則，因此可能會裁切非方形來源。
檢查最小的輸出
檢查 16 和 32 px 檔案的實際大小。自動調整大小無法取代對複雜品牌標誌進行刻意的光學調整。
匯出圖片並在網頁中引用
將 PNG 檔案新增至您的網站，並在 HTML 頭和 Web 應用程式清單中引用相關大小。
本教程的實際檔案
這個案例的實際結果
1024 × 1024 方形標記會產生六個 PNG，而不會出現非方形來源警告。每個匯出的檔案都包含一個 sRGB 設定檔。
- 正方形原圖
- 1024 × 1024
- PNG 匯出
- 6
- 色彩配置檔案
- 每個輸出上都有 sRGB
| 文件 | 格式 | 像素 | 位元組 |
|---|---|---|---|
| android-chrome-192x192.png | PNG | 192 × 192 | 26,980 |
| android-chrome-512x512.png | PNG | 512 × 512 | 174,868 |
| apple-touch-icon.png | PNG | 180 × 180 | 23,839 |
| favicon-16x16.png | PNG | 16 × 16 | 692 |
| favicon-32x32.png | PNG | 32 × 32 | 1,751 |
| favicon-48x48.png | PNG | 48 × 48 | 3,093 |
根據所示的範例文件進行測量。您的結果取決於您的原件和設定。本演練在方形或透明樣本畫布上使用擁有的 PixRinse 藝術品。
常見問題
它會建立favicon.ico嗎？
不會。內建預設匯出六個按規則命名的 PNG 檔案。
寬徽標有效嗎？
建議使用正方形原圖。填滿畫布的規則可能裁掉寬圖的一部分，請仔細檢查預覽。