Next.js এর জন্য ফেভিকন
Next.js 14+ App Router ফাইল-ভিত্তিক আইকন কনভেনশনগুলি চালু করেছে: /app ডিরেক্টরির ভিতরে favicon.ico বা icon.png ড্রপ করুন এবং Next.js সঠিক `<link>` ট্যাগগুলি স্বয়ংক্রিয়ভাবে নির্গত করে — কোনও ম্যানুয়াল হেড উপাদানের প্রয়োজন নেই৷ Pages Router প্রকল্পের জন্য, /public-এ favicon.ico রাখুন এবং _document.tsx থেকে লিঙ্ক করুন। favicon generator একটি সোর্স ইমেজ থেকে সম্পূর্ণ ফাইল সেট তৈরি করে, এবং best favicon size guide প্রতিটি প্রসঙ্গের জন্য কোন মাপ গুরুত্বপূর্ণ তা কভার করে।
App Router এর সাথে Next.js 13+ /app ডিরেক্টরিতে বিশেষ ফাইলের নামগুলিকে মেটাডেটা কনভেনশন হিসাবে বিবেচনা করে। favicon.ico, icon.png, icon.svg, এবং apple-icon.png নামের ফাইলগুলি Next.js মেটাডেটা সিস্টেম দ্বারা স্বয়ংক্রিয়ভাবে স্বীকৃত হয় এবং সঠিক প্রতিক্রিয়া শিরোনাম এবং `<link>` ট্যাগগুলির সাথে পরিবেশন করা হয়, layout.tsx বা মেটাডেটা রপ্তানিতে কোনও কনফিগারেশন ছাড়াই৷
ফাইল কনভেনশন ব্যবহার করতে, আপনার favicon.icoকে /app ডিরেক্টরির মধ্যে রাখুন (/public নয়)। Next.js এটিকে /favicon.ico রুটে পরিবেশন করে এবং সেই লেআউটটি শেয়ার করে এমন প্রতিটি পৃষ্ঠায় লিঙ্ক ট্যাগ ইনজেক্ট করে। বিশ্বব্যাপী প্রয়োগ করার জন্য আইকন ফাইলটি অবশ্যই আপনার রুট লেআউট.tsx-এর সমান হতে হবে।
App Router ব্যবহার করে উচ্চ-DPI আইকনের জন্য, /app-এর ভিতরে একটি icon.png রাখুন। Next.js এর মাত্রা পড়ে এবং উপযুক্ত `<link rel='icon' sizes='...' href='...'>` ট্যাগ তৈরি করে। একাধিক মাপ পরিবেশন করতে, বিভিন্ন সংখ্যাসূচক প্রত্যয় সহ একাধিক আইকন ফাইল রপ্তানি করুন: icon.png (32×32), icon@2x.png (64×64), অথবা একটি একক অসীম-স্কেলযোগ্য ফাইলের জন্য icon.svg ব্যবহার করুন।
App Router এছাড়াও iOS হোম-স্ক্রীন আইকনের জন্য একটি ডেডিকেটেড apple-icon.png ফাইল সমর্থন করে। Apple-icon.png (180×180) /app এর ভিতরে রাখুন এবং Next.js স্বয়ংক্রিয়ভাবে `<link rel='apple-touch-icon' href='...'>` নির্গত হয়। এটি সবচেয়ে পরিষ্কার পদ্ধতি - কোন ম্যানুয়াল মেটাডেটা রপ্তানির প্রয়োজন নেই।
আপনি যদি ফাইল কনভেনশনের পরিবর্তে কোডে ফেভিকন ঘোষণা করতে পছন্দ করেন, তাহলে layout.tsx থেকে একটি মেটাডেটা অবজেক্ট এক্সপোর্ট করুন। আইকন বৈশিষ্ট্য শর্টকাট, আইকন, আপেল এবং অন্যান্য ক্ষেত্র সহ একটি বস্তু গ্রহণ করে। উদাহরণ: `এক্সপোর্ট কনস্ট মেটাডেটা: মেটাডেটা = { আইকন: { আইকন: '/favicon.ico', apple: '/apple-touch-icon.png' } }`। লোকেল বা পরিবেশের উপর ভিত্তি করে আপনার গতিশীল আইকন পাথের প্রয়োজন হলে এই পদ্ধতিটি কার্যকর।
Pages Router প্রকল্পগুলির জন্য (Next.js 12 এবং নীচের, বা প্রকল্পগুলি যেগুলি App Router এ স্থানান্তরিত হয়নি), ফ্যাভিকন হ্যান্ডলিং ভিন্নভাবে কাজ করে। /public ডিরেক্টরিতে favicon.ico রাখুন — Next.js রুট URL-এ /public পরিবেশন করে। `<Head>` উপাদানের ভিতরে পৃষ্ঠা/_document.tsx-এ লিঙ্ক ট্যাগ যোগ করুন: `<link rel='icon' href='/favicon.ico' />`। এই `<Head>` হল নথি-স্তরের প্রধান, প্রতি-পৃষ্ঠা পরবর্তী/হেড আমদানি নয়।
পরবর্তী/হেড কম্পোনেন্ট ('পরবর্তী/হেড' থেকে হেড আমদানি করুন) Pages Router-এ প্রতি-পৃষ্ঠা আইকন ওভাররাইডের জন্য কাজ করে। আপনি যদি একটি নির্দিষ্ট পৃষ্ঠায় একটি ভিন্ন ফ্যাভিকন চান, তাহলে সেই পৃষ্ঠার উপাদানটিতে `<Head>` এর ভিতরে একটি `<link rel='icon'>` অন্তর্ভুক্ত করুন। প্রতি-পৃষ্ঠা ট্যাগটি নথি-স্তরের এককে ওভাররাইড করে। এটি একটি Next.js স্থাপনা থেকে পরিবেশিত মাল্টি-ব্র্যান্ড সাইটগুলির জন্য দরকারী৷
SVG ফেভিকনগুলি সম্পূর্ণরূপে Next.js App Router কনভেনশন দ্বারা সমর্থিত। icon.svg ফাইলটির নাম দিন এবং এটিকে /app এ রাখুন। Next.js `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>` নির্গত করে। যেহেতু Next.js ক্যাশে বাস্টিংয়ের জন্য স্ট্যাটিক ফাইলের নাম হ্যাশ করে, আপনাকে ফ্যাভিকন ক্যাশে অবৈধকরণ সম্পর্কে চিন্তা করার দরকার নেই — ফাইল পরিবর্তন করা হ্যাশ পরিবর্তন করে এবং ব্রাউজারগুলিকে রিফেচ করতে বাধ্য করে।
Next.js App Router-এ ওয়েব ম্যানিফেস্টটি /app-এ manifest.ts ফাইলের মাধ্যমে কনফিগার করা হয়েছে৷ একটি ডিফল্ট ফাংশন রপ্তানি করে একটি MetadataRoute.Manifest অবজেক্ট যা আপনার আইকন আকারগুলিকে অন্তর্ভুক্ত করে। Next.js এটিকে /manifest.webmanifest-এ application/manifest+json হিসেবে রেন্ডার করে। ম্যানিফেস্টে উল্লেখ করা 192×192 এবং 512×512 PNGগুলিকে /public-এ স্থাপন করা উচিত।
টার্বোপ্যাক (Next.js 14+-এ পরীক্ষামূলক বান্ডলার) /public-এর স্ট্যাটিক সম্পদগুলিকে ওয়েবপ্যাকের সাথে অভিন্নভাবে পরিচালনা করে। /public-এ ফ্যাভিকন ফাইলগুলিকে বান্ডিল ছাড়াই পরিবেশন করা হয়৷ /app ফাইলগুলির জন্য (আইকন কনভেনশন), Turbopack এগুলিকে মেটাডেটা সম্পদ হিসাবে প্রক্রিয়া করে — Turbopack এবং webpack এর মধ্যে স্যুইচ করার সময় কোন কনফিগারেশন পরিবর্তনের প্রয়োজন নেই৷
Next.js ISR (ক্রমবর্ধমান স্ট্যাটিক রিজেনারেশন) এবং প্রান্ত স্থাপনা ফেভিকন পরিবেশনকে প্রভাবিত করে না। ফেভিকন ফাইলগুলি হল স্ট্যাটিক সম্পদ যা CDN প্রান্ত থেকে পরিবেশিত হয়, ISR ক্যাশে থেকে নয়। এর অর্থ হল ফেভিকন আপডেটগুলি পৃষ্ঠা পুনর্বিবেচনার জন্য অপেক্ষা না করেই স্থাপনের পরপরই প্রচারিত হয়।
মাল্টি-লোকেল Next.js অ্যাপগুলির প্রায়ই লোকেল-সচেতন আইকনগুলির প্রয়োজন হয়৷ প্যারাম অবজেক্টের উপর ভিত্তি করে লোকেল-নির্দিষ্ট আইকন পাথ ফেরত দিতে layout.tsx-এ generateMetadata ফাংশন ব্যবহার করুন। এটি একটি App Router-শুধুমাত্র বৈশিষ্ট্য — Pages Router সাইটগুলির জন্য কাস্টম _document.tsx লজিক বা একটি কাস্টম সার্ভার প্রয়োজন প্রতি-লোকেল ফেভিকনগুলি অর্জন করতে৷
স্থাপনের পরে, favicon tester ব্যবহার করে আপনার Next.js ফেভিকনগুলি যাচাই করুন৷ পরীক্ষা করুন যে /favicon.ico, /icon.svg, এবং /apple-touch-icon.png সঠিক কন্টেন্ট-টাইপ হেডার সহ 200টি প্রতিক্রিয়া প্রদান করে। এছাড়াও Next.js সমস্ত প্রত্যাশিত লিঙ্ক ট্যাগ নির্গত হয়েছে তা নিশ্চিত করতে আপনার স্থাপন করা সাইটের `<head>` HTML পরিদর্শন করুন৷
এটি কিভাবে কাজ করে
- 1
আপনার ফেভিকন প্যাকেজ তৈরি করুন
[favicon generator](tool:favicon-generator)-এ একটি 512×512 PNG বা SVG আপলোড করুন৷ ডাউনলোড করুন favicon.ico, icon.svg, apple-touch-icon.png (180×180), এবং ম্যানিফেস্ট PNGs।
- 2
/app (App Router) এ favicon.ico রাখুন
layout.tsx এর পাশাপাশি আপনার প্রকল্পের /app ডিরেক্টরিতে favicon.ico অনুলিপি করুন। Next.js স্বয়ংক্রিয়ভাবে এটি পরিবেশন করে এবং লিঙ্ক ট্যাগ ইনজেক্ট করে। Pages Router-এর জন্য, এটিকে /public-এ রাখুন।
- 3
তীক্ষ্ণ রেন্ডারিংয়ের জন্য icon.svg যোগ করুন
আপনার SVG এর নাম পরিবর্তন করুন icon.svg এবং এটিকে /app (App Router) এ রাখুন। Next.js স্বয়ংক্রিয়ভাবে একটি SVG লিঙ্ক ট্যাগ নির্গত করে৷ Pages Router-এর জন্য, /public-এ রাখুন এবং _document.tsx-এ লিঙ্ক ট্যাগ যোগ করুন।
- 4
iOS ইনস্টলের জন্য apple-icon.png যোগ করুন
আপনার 180×180 PNG এর নাম পরিবর্তন করে Apple-icon.png করুন এবং এটিকে /app (App Router) এ রাখুন৷ Pages Router-এর জন্য, /public-এ apple-touch-icon.png রাখুন এবং _document.tsx-এ লিঙ্ক ট্যাগ যোগ করুন।
- 5
ওয়েব ম্যানিফেস্ট কনফিগার করুন
App Router-এর জন্য, /app/manifest.ts তৈরি করুন এবং 192×192 এবং 512×512 আইকন এন্ট্রি সহ ম্যানিফেস্ট মেটাডেটা রপ্তানি করুন৷ /public-এ PNGগুলি রাখুন। Pages Router-এর জন্য, /public-এ site.webmanifest রাখুন এবং _document.tsx-এ ম্যানিফেস্ট লিঙ্ক ট্যাগ যোগ করুন।
- 6
উত্পাদনের উপর যাচাই করুন
স্থাপনের পরে, আপনার লাইভ URL-এ উত্স দেখুন এবং সমস্ত লিঙ্ক ট্যাগ উপস্থিত রয়েছে তা নিশ্চিত করুন৷ [favicon tester](utility:favicon-tester) ব্যবহার করে প্রতিটি আইকন ইউআরএল 200 রিটার্ন দেয় সঠিক কন্টেন্ট টাইপ চেক করুন।
এখনই চেষ্টা করুন
একটি Next.js-প্রস্তুত ফেভিকন তৈরি করুন৷
ফেভিকন জেনারেটরসাধারণ প্রশ্ন
Next.js App Router-এ ফেভিকনগুলি কোথায় যায়?+
/app ডিরেক্টরির ভিতরে। favicon.ico, icon.png, icon.svg, এবং apple-icon.png নামের ফাইলগুলি স্বয়ংক্রিয়ভাবে স্বীকৃত এবং লিঙ্ক করা হয়েছে। একটি গ্লোবাল ফেভিকন /app এ যায়; একটি লেআউট-নির্দিষ্ট একটি সংশ্লিষ্ট লেআউট সাবডিরেক্টরিতে যায়।
Next.js Pages Router-এ ফেভিকনগুলি কোথায় যায়?+
/public ডিরেক্টরিতে। `<Head>` উপাদানের ভিতরে পৃষ্ঠা/_document.tsx-এ লিঙ্ক ট্যাগ যোগ করুন। Next.js রুট URL-এ /public ফাইল পরিবেশন করে — /public/favicon.ico https://yourdomain.com/favicon.ico-এ অ্যাক্সেসযোগ্য৷
App Router-এ একটি ফেভিকন যোগ করতে আমাকে কি layout.tsx সম্পাদনা করতে হবে?+
না, আপনি যদি ফাইল কনভেনশন ব্যবহার করেন (/app এ favicon.ico)। আপনি যদি কোড পছন্দ করেন, একটি আইকন বৈশিষ্ট্য সহ একটি মেটাডেটা বস্তু রপ্তানি করুন। উভয় পন্থা রেন্ডার করা HTML-এ অভিন্ন `<link>` ট্যাগ তৈরি করে।
Next.js কি SVG ফেভিকন সমর্থন করে?+
হ্যাঁ। App Router-এর জন্য /app-এ icon.svg রাখুন, অথবা Pages Router-এর জন্য _document.tsx-এ `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` যোগ করুন। App Router স্বয়ংক্রিয়ভাবে ফাইল কনভেনশন থেকে SVG লিঙ্ক ট্যাগ নির্গত করে।
আমি কিভাবে Next.js-এ apple-touch-icon যোগ করব?+
App Router-এর জন্য: Apple-icon.png (180×180) /app-এ রাখুন। Next.js স্বয়ংক্রিয়ভাবে apple-touch-icon লিঙ্ক ট্যাগ নির্গত করে৷ Pages Router-এর জন্য: /public-এ apple-touch-icon.png রাখুন এবং _document.tsx-এ লিঙ্ক ট্যাগ যোগ করুন।
Next.js ক্যাশে-বাস্ট ফেভিকন স্বয়ংক্রিয়ভাবে?+
/app-এ ফাইলগুলির জন্য, হ্যাঁ — Next.js সার্ভ করা ফাইলের নামটিতে একটি বিষয়বস্তু হ্যাশ যোগ করে, তাই প্রতিটি ফাইল পরিবর্তন একটি নতুন আনয়ন ট্রিগার করে৷ /public ফাইলগুলির জন্য, স্বয়ংক্রিয় ক্যাশে-বাস্টিং নেই; প্রয়োজনে ম্যানুয়ালি একটি ক্যোয়ারী স্ট্রিং যোগ করুন।
আমি কি Next.js-এ প্রতি পৃষ্ঠায় আলাদা ফ্যাভিকন ব্যবহার করতে পারি?+
হ্যাঁ। App Router-এ, একটি কাস্টম আইকন মান সহ নির্দিষ্ট রুটের page.tsx-এ একটি জেনারেট মেটাডেটা ফাংশন রপ্তানি করুন। Pages Router-এ, প্রতি-পৃষ্ঠা `<Head>` উপাদানের ভিতরে একটি `<link rel='icon'>` যোগ করুন — এটি নথি-স্তরের ডিফল্ট ওভাররাইড করে।