從文字、表情符號或圖片建立網站圖示。以 ICO、PNG、SVG 格式下載。
將圖像拖放到此處或點擊瀏覽
PNG、JPG、SVG — 推薦512×512像素或更大
| Size | Filename | Use case |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (most common) |
| 32×32 | favicon-32x32.png | Browser tab (HiDPI), taskbar shortcut |
| 48×48 | favicon.ico (embedded) | Windows taskbar pinned sites |
| 57×57 | favicon-57x57.png | iOS non-retina home screen (legacy) |
| 72×72 | favicon-72x72.png | iPad non-retina (legacy) |
| 96×96 | favicon-96x96.png | Android, Google TV |
| 114×114 | favicon-114x114.png | iPhone retina (legacy) |
| 144×144 | favicon-144x144.png | iPad retina, Windows 8 tile |
| 152×152 | favicon-152x152.png | iPad retina (iOS 7+) |
| 180×180 | apple-touch-icon.png | iPhone / iPad modern (iOS 8+) |
| 192×192 | android-chrome-192x192.png | Android Chrome, PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA splash screen, maskable icon |
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
現代瀏覽器需要：16×16和32×32（瀏覽器標籤/快捷方式）、48×48（Windows工作列）、57×57和72×72（iOS非視網膜）、96×96（Android Chrome）、114×114和144×144（iOS/Android視網膜）、152×152和180×180（iOS主畫面）、192×192和512×512（PWA啟動畫面/可遮罩）。
使用512×512像素或更大的正方形PNG或SVG以獲得最佳結果。避免使用邊緣附近有重要細節的圖像，因為它們可能會在圓形/圓角格式中被裁剪。SVG是理想的，因為它可以無損縮放。
是的，如果您希望您的網站可以作為漸進式網路應用程式（PWA）安裝。webmanifest包含應用程式啟動畫面的名稱、圖示路徑和背景色。
將所有生成的檔案放置在您的網站根目錄中，並將這些標籤添加到HTML的head中：'<'link rel='icon' href='/favicon.ico'>、'<'link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>、'<'link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>、'<'link rel='manifest' href='/site.webmanifest'>。