favicon، icon و apple-icon در Next.js — تنظیم آیکون‌های اپلیکیشن با فایل یا کد

۱. انواع آیکون‌ها در Next.js

Next.js از سه نوع آیکون پشتیبانی می‌کند:

favicon: برای تب مرورگر
icon: برای آیکون عمومی اپلیکیشن
apple-icon: برای صفحه اصلی دستگاه‌های اپل

۲. روش‌های تنظیم آیکون

دو روش برای تنظیم آیکون وجود دارد:

استفاده از فایل تصویری (.ico، .jpg، .png)
تولید آیکون با کد (.js، .ts، .tsx)

۳. استفاده از فایل تصویری

نوع فایل	فرمت‌های پشتیبانی‌شده	محل معتبر
favicon	.ico	فقط در app/
icon	.ico، .jpg، .png، .svg	در هر مسیر داخل app
apple-icon	.jpg، .png	در هر مسیر داخل app

نمونه خروجی در <head>:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon?...generated" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-icon?...generated" type="image/png" sizes="180x180" />

۴. تولید آیکون با کد

برای تولید آیکون با کد، از API ImageResponse در next/og استفاده کنید:

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    <div style={{
      fontSize: 24,
      background: 'black',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'white',
    }}>
      A
    </div>,
    { ...size }
  )
}

نکات مهم:

آیکون‌های تولیدشده به‌صورت پیش‌فرض در زمان build بهینه‌سازی و کش می‌شوند
نمی‌توان favicon را با کد تولید کرد — فقط با فایل .ico
می‌توان چند آیکون را با پسوند عددی مانند icon1.png، icon2.png تعریف کرد

۵. پارامترهای ورودی و خروجی

تابع export شده می‌تواند پارامترهای داینامیک مسیر را دریافت کند:

export default async function Icon({ params }) {
  const { slug } = await params
}

خروجی تابع باید یکی از انواع زیر باشد:

Blob
ArrayBuffer
TypedArray
ReadableStream
Response

۶. تنظیمات متادیتا

می‌توانید متادیتای آیکون را با export کردن متغیرهای زیر تنظیم کنید:

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

جمع‌بندی

Next.js با پشتیبانی از فایل‌های تصویری و تولید آیکون با کد، امکان تنظیم آیکون‌های اپلیکیشن را به‌صورت منعطف فراهم می‌کند. با استفاده از conventions مناسب و APIهای قدرتمند، می‌توانید تجربه کاربری حرفه‌ای و قابل شخصی‌سازی برای اپلیکیشن خود بسازید.