Nuxt এর জন্য ফেভিকন
Nuxt আপনার সাইট রুটে /public থেকে স্ট্যাটিক ফাইল পরিবেশন করে, তাই /public/favicon.ico স্বয়ংক্রিয়ভাবে /favicon.ico হয়ে যায়। মাল্টি-সাইজ বা SVG আইকনের জন্য, nuxt.config.ts বা app.vue-এ useHead() এর মাধ্যমে লিঙ্ক ট্যাগ যোগ করুন।
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Favicon Generator দিয়ে আপনার ফেভিকন প্যাক তৈরি করুন — 512×512 উৎস থেকে favicon.ico, favicon.svg, এবং apple-touch-icon.png রপ্তানি করুন৷ এগুলিকে আপনার Nuxt প্রকল্পের /public ফোল্ডারে ফেলে দিন৷
Nuxt 3 ডোমেইন রুটে /public-এ সব কিছু পরিবেশন করে কোনো অতিরিক্ত কনফিগারেশন ছাড়াই। ব্রাউজারগুলি ডিফল্টরূপে /favicon.ico এর অনুরোধ করে, তাই সেখানে ফাইলটি স্থাপন করা সবচেয়ে সাধারণ ক্ষেত্রে কভার করে৷
প্রতিটি আইকন ভেরিয়েন্টের উপর সুস্পষ্ট নিয়ন্ত্রণের জন্য, app.head.link-এর অধীনে nuxt.config.ts-এ লিঙ্ক ট্যাগ যোগ করুন — অথবা app.vue-এ useHead({ link: [...] }) এ কল করুন। উভয় পন্থা প্রতিটি পৃষ্ঠার <head> এ ট্যাগ ইনজেক্ট করে।
স্থাপন করার পরে, একটি ব্যক্তিগত উইন্ডোতে আপনার প্রোডাকশন URL খুলুন এবং /favicon.ico নিশ্চিত করতে Favicon Checker চালান এবং আপনার <link rel="icon"> পাথ 200 ফেরত দেয়। ক্যাশেড ডেভ আইকনগুলি একটি সাধারণ কারণ যা একটি Nuxt ফ্যাভিকন স্থাপনের পরে প্রদর্শিত হয় না।
যদি ট্যাব আইকনটি কাজ করে কিন্তু Google Search এখনও একটি ফাঁকা ফেভিকন দেখায়, আপনার লাইভ হোমপেজটি কমপক্ষে 48×48 এর একটি বর্গাকার আইকন লিঙ্ক করে তা যাচাই করুন৷ ক্রল এবং আকারের নিয়মের জন্য আমাদের Google ফেভিকন প্রয়োজনীয়তা নির্দেশিকা দেখুন।
Nuxt বহু-আকারের .ico ফাইলগুলি স্বয়ংক্রিয়ভাবে তৈরি করে না — আপনাকে অবশ্যই সেগুলি সরবরাহ করতে হবে৷ PWA ইনস্টল প্রম্পট এবং উচ্চ-DPI ট্যাবের জন্য app.head-এ লিঙ্ক করা PNG ফলব্যাকগুলি ব্যবহার করুন৷
এটি কিভাবে কাজ করে
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
/public এ যোগ করুন
আপনার Nuxt /public ফোল্ডারে favicon.ico (এবং ঐচ্ছিক favicon.svg, apple-touch-icon.png) কপি করুন।
- 3
কনফিগার করুন এবং যাচাই করুন
প্রয়োজনে nuxt.config.ts-এ app.head.link এন্ট্রি যোগ করুন, স্থাপন করুন, তারপর আপনার লাইভ URL-এ Favicon Checker চালান৷
এখনই চেষ্টা করুন
Generate a Nuxt-ready favicon
ফেভিকন জেনারেটরসাধারণ প্রশ্ন
আমি কিভাবে Nuxt 3 এ একটি ফেভিকন যোগ করব?+
/public-এ favicon.ico রাখুন, তারপর ঐচ্ছিকভাবে app.head.link-এর অধীনে nuxt.config.ts-এ বা app.vue-এ useHead()-এর মাধ্যমে <link rel="icon"> ট্যাগ যোগ করুন।
একটি Nuxt প্রকল্পে ফেভিকন কোথায় যায়?+
/public ডিরেক্টরি। সেখানে ফাইলগুলি আপনার ডোমেন রুট থেকে পরিবেশিত হয় — /public/favicon.ico /favicon.ico এ উপলব্ধ৷
কেন আমার Nuxt ফেভিকন দেখাচ্ছে না?+
সাধারণ কারণগুলি: ফাইল /public-এ নয়, app.head-এ ভুল পথ, dev থেকে ব্রাউজার ক্যাশে, বা স্থাপন করা URL-এর পরিবর্তে লোকালহোস্ট চেক করা৷ একটি ছদ্মবেশী উইন্ডোতে পরীক্ষা করুন।
আমি কি ফেভিকনের জন্য nuxt.config.ts বা useHead() ব্যবহার করব?+
হয় কাজ করে। nuxt.config.ts স্ট্যাটিক সাইট-ওয়াইড আইকনগুলির জন্য সেরা; app.vue-এ useHead() যদি আইকনগুলি রানটাইম অবস্থা বা প্রতি-রুট লজিকের উপর নির্ভর করে।
আমি কি Nuxt এ একটি SVG ফেভিকন ব্যবহার করতে পারি?+
হ্যাঁ — /public-এ favicon.svg রাখুন এবং app.head.link-এ { rel: 'icon', টাইপ করুন: 'image/svg+xml', href: '/favicon.svg' } যোগ করুন।