favicon, icon, and apple-icon (網站圖示、應用程式圖示和 Apple 圖示)
favicon、icon 或 apple-icon 檔案慣例允許您設定應用程式的圖示。
它們可用於新增應用程式圖示，這些圖示會顯示在網頁瀏覽器分頁、手機主畫面和搜尋引擎結果等位置。
設定應用程式圖示有兩種方法
影像檔案 (.ico, .jpg, .png)
將 favicon、icon 或 apple-icon 影像檔案放置在 /app 目錄中，即可使用影像檔案設定應用程式圖示。favicon 影像只能位於 app/ 的頂層。
Next.js 會評估檔案並自動將適當的標籤新增至應用程式的 <head> 元素。
| 檔案慣例 | 支援的檔案類型 | 有效位置 |
|---|---|---|
網站圖示 (favicon) | .ico | app/ |
圖示 (icon) | .ico、.jpg、.jpeg、.png、.svg | app/**/* |
蘋果圖示 (apple-icon) | .jpg、.jpeg、.png | app/**/* |
favicon
在根目錄 /app 路徑區段中新增一個 favicon.ico 圖示檔案。
<head> 輸出
<link rel="icon" href="/favicon.ico" sizes="any" />icon
新增一個 icon.(ico|jpg|jpeg|png|svg) 圖示檔案。
<head> 輸出
<link
rel="icon"
href="/icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>apple-icon
新增一個 apple-icon.(jpg|jpeg|png) 圖示檔案。
<head> 輸出
<link
rel="apple-touch-icon"
href="/apple-icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>注意事項:
- 您可以透過在檔案名稱後面加上數字後綴來設定多個圖示。例如，
icon1.png、icon2.png等等。編號檔案將按字典順序排序。- 網站圖示只能在根目錄
/app區段中設定。如果您需要更精細的控制，可以使用icon。- 適當的
<link>標籤和屬性，例如rel、href、type和sizes，會根據評估檔案的圖示類型和中繼資料來決定。- 例如，一個 32 x 32 像素的
.png檔案將具有type="image/png"和sizes="32x32"屬性。- 當擴展名為
.svg或檔案的圖片大小未確定時，圖示會加上sizes="any"。更多詳細資訊請參閱這本 網站圖示手冊。
使用程式碼 (.js, .ts, .tsx) 產生圖示
除了使用圖像檔案之外，您也可以使用程式碼產生圖示。
透過建立預設匯出函式的 icon 或 apple-icon 路由來產生應用程式圖示。
| 檔案慣例 | 支援的檔案類型 |
|---|---|
圖示 (icon) | .js、.ts、.tsx |
蘋果圖示 (apple-icon) | .js、.ts、.tsx |
產生圖示最簡單的方法是使用 next/og 中的 ImageResponse API。
app/icon.tsx
import { ImageResponse } from 'next/og'
// Image metadata
export const size = {
width: 32,
height: 32,
}
export const contentType = 'image/png'
// Image generation
export default function Icon() {
return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
fontSize: 24,
background: 'black',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
A
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported icons size metadata
// config to also set the ImageResponse's width and height.
...size,
}
)
}<head> 輸出
<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />注意事項:
- 預設情況下，產生的圖示會進行靜態最佳化（在建置時產生並快取），除非它們使用動態 API 或未快取的資料。
- 您可以使用
generateImageMetadata在同一個檔案中產生多個圖示。- 您無法產生
favicon圖示。請改用icon或 favicon.ico 檔案。- 應用程式圖示是特殊的路由處理程式，預設會被快取，除非它使用動態 API 或動態設定選項。
屬性
預設匯出的函式會接收以下屬性
params（選用）
一個包含從根區段到 icon 或 apple-icon 所在區段的動態路由參數物件。
app/shop/[slug]/icon.tsx
export default function Icon({ params }: { params: { slug: string } }) {
// ...
}| 路由 | 網址 | params |
|---|---|---|
app/shop/icon.js | /shop | 未定義 |
app/shop/[slug]/icon.js | /shop/1 | { slug: '1' } |
app/shop/[tag]/[item]/icon.js | /shop/1/2 | { tag: '1', item: '2' } |
回傳值
預設匯出的函式應該回傳 Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response。
注意事項：
ImageResponse符合此回傳類型。
設定匯出
size
icon.tsx | apple-icon.tsx
export const size = { width: 32, height: 32 }
export default function Icon() {}<head> 輸出
<link rel="icon" sizes="32x32" />contentType
icon.tsx | apple-icon.tsx
export const contentType = 'image/png'
export default function Icon() {}<head> 輸出
<link rel="icon" type="image/png" />路由區段設定
icon 和 apple-icon 是專門的路由處理器，可以使用與頁面和佈局相同的路由區段設定選項。