কিভাবে HTML এ একটি ফেভিকন যোগ করবেন
তিনটি ট্যাগ বেশিরভাগ সাইট কভার করে; পাঁচটি ট্যাগ আপনাকে একটি PWA-গ্রেড সেটআপ দেয়। এই টিউটোরিয়ালটি প্রতিটি বৈশিষ্ট্যের ব্যাখ্যা করে, সাধারণ স্ট্যাকের জন্য কপি-পেস্ট স্নিপেট দেখায়, প্রায়শই জিজ্ঞাসিত প্রশ্নের উত্তর দেয় এবং আইকন আটকে থাকা ক্যাশিং সমস্যাগুলির সমাধান করে।
সর্বনিম্ন ট্যাগ
সবচেয়ে ছোট বৈধ ঘোষণা হল <head>-এ একটি একক লাইন:
<link rel="icon" href="/favicon.ico">
ব্রাউজাররা rel="icon" কে ট্যাব প্রদর্শনের জন্য URL আনতে একটি ইঙ্গিত হিসাবে বিবেচনা করে। বর্তমান পৃষ্ঠার পথ নির্বিশেষে রুট-সম্পর্কিত পাথগুলি দিয়ে শুরু / বেঁচে থাকে।
এমনকি এই ট্যাগ সহ, অনেক ক্লায়েন্ট এখনও স্বয়ংক্রিয়ভাবে /favicon.ico অনুসন্ধান করে। অন্তর্নিহিত অনুরোধের জন্য ফাইলটি সাইট রুটে রাখুন।
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
আধুনিক প্রস্তাবিত সেট
ডেস্কটপ, iOS, এবং ডার্ক-মোড ট্যাব জুড়ে চটকদার রেন্ডারিংয়ের জন্য, ব্যবহার করুন:
<link rel="icon" href="/favicon.ico" sizes="any">৷
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
অর্ডার সম্পূর্ণতা কম বিষয়. ব্রাউজারগুলি সর্বোত্তম সমর্থিত প্রকার বেছে নেয়: যেখানে পাওয়া যায় সেখানে SVG, অন্যথায় একটি মিলে যাওয়া PNG বা ICO ফ্রেম৷
SVG লাইনে type="image/svg+xml" যোগ করুন যাতে MIME স্নিফিং কখনই ফাইলটিকে ভুল লেবেল না করে।
PWA ইন্সটল প্রম্পট
আপনার ম্যানিফেস্ট লিঙ্ক করুন: <link rel="manifest" href="/site.webmanifest">।
site.webmanifest এর ভিতরে, src, আকার, প্রকার এবং উদ্দেশ্য সহ আইকন ঘোষণা করুন। ন্যূনতম দরকারী এন্ট্রি হল 192×192 এবং 512×512 PNG ফাইল।
ঐচ্ছিক থিম পোলিশ: <meta name="theme-color" content="#0f172a"> ইনস্টল প্রবাহের সময় আপনার ব্র্যান্ডের সাথে Android স্ট্যাটাস বারকে সারিবদ্ধ করে।
কপি-পেস্ট উদাহরণ
প্লেইন HTML সাইট — <head> এর ভিতরে পেস্ট করুন:
<link rel="icon" href="/favicon.ico" sizes="any">৷
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js অ্যাপ রাউটার — মেটাডেটা বা ম্যানুয়াল <head> ব্লকের ভিতরে app/layout.tsx-এ একই লাইন যোগ করুন। ফাইলগুলি/পাবলিক লাইভ।
Create React App —/public-এ আইকন রাখুন এবং public/index.html সম্পাদনা করুন। CRA প্রোডাকশন বিল্ডে ডোমেইন রুটে পাবলিক/সার্ভ করে।
প্রতিটি বৈশিষ্ট্য বোঝা
rel="icon" একজন favicon প্রার্থীকে চিহ্নিত করে৷ rel="apple-touch-icon" হল iOS-নির্দিষ্ট হোম-স্ক্রীন আইকন৷ rel="manifest" PWA মেটাডেটা সহ JSON-এর দিকে নির্দেশ করে৷
সাইজ ব্রাউজারকে বলে যে কোন রেজোলিউশন একটি PNG প্রতিনিধিত্ব করে। আপনি যখন একাধিক মাপ স্পষ্টভাবে ঘোষণা করেন তখন এটি PNG আইকনের জন্য প্রয়োজনীয়।
href উৎপাদনে পৌঁছাতে হবে। favicon-এর জন্য থার্ড-পার্টি CDN-এ হটলিংক করা এড়িয়ে চলুন — আপনি রিব্র্যান্ডের সময় সম্পূর্ণ নিয়ন্ত্রণ চান।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
আমি কি href এ পরম URL ব্যবহার করতে পারি? হ্যাঁ, কিন্তু রুট-রিলেটিভ /favicon.ico স্টেজিং এবং প্রোডাকশন ডোমেন জুড়ে সহজ।
আমার কি rel="shortcut icon" এবং rel="icon" দুটোই দরকার? নং. rel="icon" মানক; শর্টকাট অপ্রচলিত।
<head> ঠিক কোথায়? <html> এর সরাসরি সন্তান, <body> এর আগে। কিছু ফ্রেমওয়ার্ক এটি লেআউট উপাদানগুলির মাধ্যমে ইনজেক্ট করে।
favicons কি CDN-এ লাইভ করা উচিত? তারা করতে পারে, কিন্তু মাইগ্রেট করার সময় সমস্ত <link> URL একসাথে আপডেট করে। রুট-রিলেটিভ পাথ সেই সমস্যা এড়ায়।
সমস্যা সমাধান
আইকন হোমপেজে কাজ করে কিন্তু /blog/slug নয়: আপনি লিডিং স্ল্যাশ ছাড়াই favicon.ico এর মতো আপেক্ষিক href ব্যবহার করেছেন৷ পরিবর্তে /favicon.ico ব্যবহার করুন।
Safari পুরানো আইকন দেখায়: ওয়েবসাইট ডেটা সাফ করুন বা একবার ফাইলের নাম পরিবর্তন করুন। Safari ক্যাশে HTML এর থেকে favicon সেকেন্ড বেশি।
বৈধ HTML কিন্তু নেটওয়ার্ক ট্যাবে 404: ফাইল সার্ভার রুটে স্থাপন করা হয়নি বা ভুল ক্ষেত্রে (Favicon.ico বনাম favicon.ico লিনাক্সে)।
SVG উপেক্ষা করা হয়েছে: অনুপস্থিত type="image/svg+xml" বা সার্ভার ভুল সামগ্রী-প্রকার পাঠায়। nginx বা Apache এ MIME ম্যাপিং ঠিক করুন।
ফ্রেমওয়ার্ক-নির্দিষ্ট বসানো
Vite / Vue / React SPA: /public-এ আইকন রাখুন এবং index.html-এ /favicon.ico উল্লেখ করুন। ডেভ সার্ভার এবং প্রোডাকশন উভয়ই ডোমেইন রুটে সার্ভ/পাবলিক তৈরি করে।
Next.js অ্যাপ রাউটার: মেটাডেটা এপিআই-এর মাধ্যমে /অ্যাপে আইকন যোগ করুন বা /পাবলিক-এ স্ট্যাটিক ফাইল রাখুন। উভয় জায়গায় ডুপ্লিকেট ট্যাগ এড়িয়ে চলুন.
Nuxt: রুট জুড়ে কেন্দ্রীভূত ট্যাগ পরিচালনার জন্য nuxt.config.ts-এ /public ব্যবহার করুন বা app.head.link কনফিগার করুন।
SvelteKit: স্ট্যাটিক/ফোল্ডার ম্যাপে স্থির সম্পদ। পুরো অ্যাপের জন্য app.html <head> একবার আপডেট করুন।
Astro: পাবলিক/ ডিরেক্টরি এবং আপনার লেআউটে একটি শেয়ার্ড হেড কম্পোনেন্ট নিশ্চিত করে যে প্রতিটি পৃষ্ঠায় কপি-পেস্ট ড্রিফ্ট ছাড়াই অভিন্ন আইকন ট্যাগ অন্তর্ভুক্ত রয়েছে।
WordPress এবং অন্যান্য CMS ব্যবহারকারীদের ম্যানুয়াল ট্যাগের প্রয়োজন নাও হতে পারে — আমাদের WordPress টিউটোরিয়াল দেখুন যদি কোর আপনার জন্য Site Icon মার্কআপ তৈরি করে।
আপনার HTML সেটআপ যাচাই করা হচ্ছে
স্থাপন করা HTML আপনার রেপোর সাথে মেলে তা নিশ্চিত করতে স্থানীয় হোস্ট নয়, প্রোডাকশনে পৃষ্ঠার উত্স দেখুন৷ CI পাইপলাইনগুলি কখনও কখনও পরিবেশ প্রতি বিভিন্ন লেআউট ইনজেক্ট করে।
<link href> এ ফিরে আসা প্রতিটি আইকন URL আনতে কার্ল ব্যবহার করুন। সঠিক বিষয়বস্তু-দৈর্ঘ্য সহ একটি 200 স্ট্যাটাস মানে পথটি বাস্তব, নিছক ঘোষিত নয়।
W3C মার্কআপ বৈধতা favicon-এর জন্য ঐচ্ছিক, কিন্তু অবৈধ <head> নেস্টিং (<body> এর ভিতরে ট্যাগ) ব্রাউজারগুলিকে আপনার আইকনগুলিকে সম্পূর্ণরূপে উপেক্ষা করতে পারে৷
যদি কোন ব্যাপার ইন্সটল করে তাহলে Lighthouse PWA অডিট চালান — এটি ট্যাবগুলি সূক্ষ্ম দেখালেও ম্যানিফেস্ট আইকনগুলি অনুপস্থিত ফ্ল্যাগ করে৷
পৃষ্ঠাটি বুকমার্ক করুন, ব্রাউজারটি সম্পূর্ণভাবে বন্ধ করুন, পুনরায় খুলুন এবং নিশ্চিত করুন যে বুকমার্ক বারটি এখনও আপনার চিহ্ন দেখায়। এটি ক্রমাগত favicon ক্যাশে আচরণ পরীক্ষা করে।
নিরাপত্তা শিরোনাম এবং আইকন পাথ
বিষয়বস্তু-নিরাপত্তা-নীতি ডিফল্ট-src একই উত্স থেকে favicon লোডগুলিকে ব্লক করে না৷ ক্রস-অরিজিন আইকন URL-এর জন্য সুস্পষ্ট img-src বা ডিফল্ট-src ভাতা প্রয়োজন।
Subresource Integrity খুব কমই favicon-এ প্রয়োগ করা হয়। একই-অরিজিন হোস্টিং সবচেয়ে সহজ সুরক্ষিত ডিফল্ট হিসেবে রয়ে গেছে।
যদি আইকনগুলি একটি CDN সাবডোমেনে থাকে, তাহলে href-এ পরম https:// URL গুলি ব্যবহার করুন এবং CORS অপ্রাসঙ্গিক তা নিশ্চিত করুন — faviconগুলি ছবি হিসাবে লোড হয়, আনয়ন নয়৷
ডেটা এড়িয়ে চলুন: HTML উৎপাদনে URI favicons। তারা HTML ক্যাশে ব্লোট করে, CDN ক্যাশিং বাইপাস করে এবং CSP কে জটিল করে।
ট্যাগ অর্ডার এবং ডুপ্লিকেট
একই href ওয়েস্ট বাইট সহ ডুপ্লিকেট rel=icon ট্যাগ কিন্তু খুব কমই রেন্ডারিং ভাঙে। ডুপ্লিকেট বিরোধপূর্ণ hrefগুলি ডিবাগিংকে বিভ্রান্ত করে — পুরানো ট্যাগগুলি সরান৷
কিছু WordPress থিম Site Icon ট্যাগ প্রিন্ট করে যখন প্লাগইন অন্য সেট যোগ করে। প্লাগইন ইনস্টল করার পরে ডুপ্লিকেট সনাক্ত করতে ভিউ সোর্স ব্যবহার করুন।
মাথায় বড় স্ক্রিপ্ট ব্লক হওয়ার আগে আইকন লিঙ্কগুলি রাখুন। আইকন কম অগ্রাধিকার ডাউনলোড হওয়া সত্ত্বেও প্রাথমিক আবিষ্কার প্রথম রঙ করতে সাহায্য করে।
HTML5-এর জন্য অকার্যকর উপাদানগুলির উপর স্ল্যাশ বন্ধ করার প্রয়োজন নেই। <link ...> এবং <link ... /> উভয়ই বৈধ।
উত্তরাধিকার এবং প্রান্ত মামলা
IE শর্তাধীন মন্তব্য মৃত. অপ্রচলিত ব্রাউজারগুলির জন্য আইকন ট্যাগগুলি মোড়ানো করবেন না।
মাথার বেস ট্যাগ আপেক্ষিক href রেজোলিউশন পরিবর্তন করে। আইকন পাথগুলি থেকে শুরু হয় / অনাক্রম্য; বেস সেট করা হলে আপেক্ষিক favicon.ico নেস্টেড রুটে বিরতি দেয়।
Shadow DOM এবং ওয়েব উপাদানগুলি favicon পৃষ্ঠাকে শ্যাডো রুটে উত্তরাধিকারী করে না — নথি-স্তরের আইকন এখনও ট্যাবে প্রযোজ্য।
iframe এম্বেড এম্বেড করা নথি favicon দেখায়, অভিভাবক নয়। প্রতিটি ফ্রেমের নিজস্ব ট্যাগ প্রয়োজন যদি আপনি উভয়ই নিয়ন্ত্রণ করেন।
স্থানীয় ফাইল:// পরীক্ষা /favicon.ico সমাধান নাও করতে পারে। বাস্তবসম্মত আইকন আচরণের জন্য একটি স্থানীয় ডেভ সার্ভার ব্যবহার করুন।
বুকমার্কলেট এবং ব্রাউজার এক্সটেনশনগুলি অন্য ব্যবহারকারীদের জন্য আপনার সাইট favicon পরিবর্তন করতে পারে না — শুধুমাত্র আপনার স্থানীয় ক্রোম৷ জাহাজ সঠিক ট্যাগ সার্ভার-সাইড.