Next.js में फ़ेविकॉन कॉन्फ़िगर करना
मॉडर्न फ़्रेमवर्क के लिए मॉडर्न मेटा टैग स्ट्रेटेजी की ज़रूरत होती है। Next.js में अपने ब्राउज़र आइकन को ठीक से कॉन्फ़िगर करें।
तरीका 1: Next.js ऐप राउटर (मेटाडेटा API)
मॉडर्न Next.js (वर्जन 13+ ऐप राउटर) में, आप अपनी आइकन फ़ाइलों को सीधे अपने ऐप डायरेक्टरी के रूट में रख सकते हैं:
app/favicon.ico(ऑटोमैटिक लेगेसी फ़ॉलबैक मैपिंग)app/icon.png(डायनैमिक रूप से फ़ेविकॉन लिंक जेनरेट करता है)app/apple-icon.png(Apple होम स्क्रीन आइकन के लिए इस्तेमाल होता है)
इसके अलावा, आप मेटाडेटा API का इस्तेमाल करके अपनी रूट layout.js फ़ाइल में आइकन डिक्लेयर कर सकते हैं:
export const metadata = {
title: 'My App',
icons: {
icon: '/favicon-32x32.png',
shortcut: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
};तरीका 2: पेज राउटर या HTML लिंक
अगर आप पेज राउटर इस्तेमाल कर रहे हैं, तो पेज डायरेक्टरी के अंदर अपनी _document.js फ़ाइल को एडिट करें और स्टैंडर्ड मेटा मार्कअप शामिल करें:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}