কিভাবে একটি ফেভিকন তৈরি করবেন
একটি আধুনিক favicon একটি 16×16 চিত্রের চেয়ে বেশি। এই নির্দেশিকাটি উত্স প্রস্তুতি, মাল্টি-সাইজ জেনারেশন, HTML সেটআপ, বাস্তব-বিশ্বের উদাহরণ, এবং বেশিরভাগ দলকে ট্রিপ আপ করে এমন সমস্যার সমাধান করে।
একটি favicon কি?
একটি favicon হল ছোট আইকন ব্রাউজার যা ট্যাব, বুকমার্ক বার, ইতিহাস তালিকা এবং ঠিকানা বারে প্রদর্শন করে। ফোনে এটি হোম-স্ক্রীন আইকনে পরিণত হয় যখন কেউ আপনার সাইট সংরক্ষণ করে। Windows-এ এটি টাস্কবার পিন এবং ডেস্কটপ শর্টকাটগুলিতে প্রদর্শিত হয়।
শব্দটি ফেভারিট আইকন থেকে এসেছে, কিন্তু কাজটি একটি একক 16×16 GIF ছাড়িয়ে গেছে। আজকের favicon হল একটি ছোট সম্পদ পরিবার: একটি রুট-লেভেল favicon.ico, ঐচ্ছিক SVG এবং PNG ভেরিয়েন্ট, iOS-এর জন্য একটি অ্যাপল-টাচ-আইকন এবং ইনস্টলযোগ্য PWAগুলির জন্য ম্যানিফেস্ট আইকন৷
ব্যবহারকারীরা খুব কমই একটি ভাল favicon-এ মন্তব্য করেন, কিন্তু তারা অবিলম্বে একটি অনুপস্থিত বা ঝাপসা লক্ষ্য করেন। একটি খাস্তা আইকন পলিশের সংকেত দেয় এবং আপনার ট্যাবটিকে বিশটি খোলা পৃষ্ঠার মধ্যে সনাক্তযোগ্য করে তোলে।
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.
আপনার উৎস ইমেজ প্রস্তুত
একটি বর্গাকার ছবি থেকে শুরু করুন কমপক্ষে 512×512 পিক্সেল। SVG একটি বর্গক্ষেত্র viewBox আদর্শ কারণ এটি আপনার রপ্তানি করা প্রতিটি রাস্টার আকারে পরিষ্কারভাবে স্কেল করে।
পাতলা স্ট্রোক, সূক্ষ্ম টাইপোগ্রাফি এবং জটিল গ্রেডিয়েন্ট এড়িয়ে চলুন। 16×16-এ, হেয়ারলাইনের বিবরণ ধূসর মাশে একত্রিত হয়। চিহ্নটি সরলীকরণ করুন: কম আকার, উচ্চ বৈসাদৃশ্য, গ্লাইফের চারপাশে আরও প্যাডিং।
যদি আপনার লোগো অনুভূমিক হয়, তাহলে একটি বর্গাকার ক্রপ তৈরি করুন যা ওয়ার্ডমার্ক ছাড়াই প্রতীকটিকে কেন্দ্র করে। 8px উচ্চতার নীচের লেটারফর্মগুলি খুব কমই ডাউনস্কেলিং থেকে বেঁচে থাকে।
রাস্টার আপনার একমাত্র বিকল্প হলে স্বচ্ছতার সাথে PNG-32 রপ্তানি করুন। একটি বেকড-ইন সাদা পটভূমি অন্ধকার ব্রাউজার ক্রোমে এবং রঙিন মোবাইল লঞ্চারগুলিতে ভুল দেখাবে৷
একটি মাল্টি-সাইজ .ico তৈরি করুন
একটি favicon.ico ফাইলের মধ্যে 16, 32, 48, 64, 128, এবং 256 পিক্সেল ফ্রেম বান্ডেল করুন। ব্রাউজার এবং Windows ডাইরেক্টরি হেডার পড়ে এবং শুধুমাত্র তাদের প্রয়োজনীয় আকার ডিকোড করে।
আপনার সাইটের রুটে favicon.ico রাখুন (/favicon.ico)। এমনকি যদি আপনি আধুনিক <link> ট্যাগ ঘোষণা করেন, ক্রলার এবং পুরানো ক্লায়েন্টরা এখনও নিয়ম অনুসারে সেই পথটি অনুসন্ধান করে।
আমাদের favicon জেনারেটর এক সেকেন্ডের মধ্যে প্রতিটি আকারের ক্লায়েন্ট-সাইড রাস্টারাইজ করে। আপনার সোর্স ইমেজ কখনই ব্রাউজার ছেড়ে যায় না, চিহ্নটি একটি অপ্রকাশিত পণ্যের লোগো হলে তা গুরুত্বপূর্ণ।
HTML ট্যাগ যোগ করুন
সম্পূর্ণ 2026 সেটআপের জন্য এই ট্যাগগুলিকে <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">
<link rel="manifest" href="/site.webmanifest">
SVG লাইনটি Chromium এবং Firefox-এ তীক্ষ্ণ ট্যাব দেয়। .ico লাইনটি Safari ফলব্যাক, Windows শর্টকাট এবং RSS পাঠককে কভার করে যা SVG উপেক্ষা করে।
বাস্তব বিশ্বের উদাহরণ
স্ট্যাটিক মার্কেটিং সাইট: আপনার লোগোমার্কের একটি 512×512 PNG আপলোড করুন, favicon.ico প্লাস একটি 180×180 অ্যাপল-টাচ-আইকন তৈরি করুন, চারটি <link> লাইন যোগ করুন, /public বা ওয়েব রুটে স্থাপন করুন। মোট সময়: পাঁচ মিনিটের নিচে।
React / Vite অ্যাপ: /public-এ আইকন রাখুন, index.html-এ রুট-রিলেটিভ পাথ দিয়ে তাদের উল্লেখ করুন। Vite কপি/পাবলিক নির্মাণের সময় অপরিবর্তিত, তাই /favicon.ico উৎপাদনে সঠিকভাবে সমাধান করে।
WordPress: ম্যানুয়াল HTML এড়িয়ে যান — চেহারা → কাস্টমাইজ → সাইট আইডেন্টিটি → Site Icon ব্যবহার করুন। একটি 512×512 উৎস আপলোড করুন; WordPress স্বয়ংক্রিয়ভাবে সঠিক ট্যাগ নির্গত করে। ক্যাশে-বাস্টিং টিপসের জন্য আমাদের WordPress টিউটোরিয়াল দেখুন।
ডার্ক-মোড ব্র্যান্ড: একটি SVG এক্সপোর্ট করুন যার ফিল @media (prefers-color-scheme: অন্ধকার) এর ভিতরে সুইচ করে। SVG লোড করে না এমন ক্লায়েন্টদের জন্য এটি একটি নিরপেক্ষ .ico ফলব্যাকের সাথে যুক্ত করুন৷
প্রতিটি ব্রাউজারে যাচাই করুন
Chrome, Safari, Firefox, এবং Edge-এ হার্ড-রিফ্রেশ (Ctrl+Shift+R বা Cmd+Shift+R)। সাধারন রিলোড প্রায়ই ক্যাশে করা favicon দিন ধরে রাখে।
চারটি পৃষ্ঠ পরীক্ষা করুন: ব্রাউজার ট্যাব, বুকমার্ক বার, iOS-এ হোম স্ক্রিনে যোগ করুন এবং একটি পিন করা Windows টাস্কবার আইকন৷ প্রতিটি পৃষ্ঠ আপনার বান্ডিল থেকে একটি ভিন্ন রেজোলিউশন অনুরোধ করতে পারে.
DevTools → নেটওয়ার্ক খুলুন, ico বা png দ্বারা ফিল্টার করুন, পুনরায় লোড করুন এবং আপনার ঘোষিত প্রতিটি আইকন URL এর জন্য 200 টি প্রতিক্রিয়া নিশ্চিত করুন৷ apple-touch-icon.png-এ একটি একক 404 একটি সাধারণ মিস।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
আমার কাছে SVG থাকলে কি এখনও favicon.ico দরকার? হ্যাঁ। .ico কে সার্বজনীন ফলব্যাক হিসাবে রাখুন। SVG একটি বর্ধন, প্রতিস্থাপন নয়।
ন্যূনতম কার্যকর favicon কত? /favicon.ico-এ একটি বহু-আকারের favicon.ico। অন্য সবকিছু হাই-ডিপিআই স্ক্রীন এবং মোবাইল হোম স্ক্রিনে স্বচ্ছতা উন্নত করে।
আমি কি একটি JPG ব্যবহার করতে পারি? আপনি পারেন, কিন্তু আপনি স্বচ্ছতা হারাবেন। ইন্টারফেস আইকনগুলির জন্য PNG বা SVG প্রায় সবসময়ই ভাল।
কত ঘন ঘন আমার favicon আপডেট করা উচিত? যখনই আপনার ব্র্যান্ড চিহ্ন পরিবর্তিত হয়। আক্রমনাত্মক ব্রাউজার ক্যাশে পরাস্ত করতে একবার <link> ট্যাগগুলিতে একটি ?v=2 প্রশ্ন করুন৷
সমস্যা সমাধান
আইকন স্থাপনের পরে আপডেট হয় না: ব্রাউজারগুলি HTML এর থেকে স্বাধীনভাবে favicon কে ক্যাশে করে। হার্ড-রিফ্রেশ করুন, সাইট ডেটা সাফ করুন বা অস্থায়ীভাবে আইকন URLগুলিতে ?v=2 যুক্ত করুন৷
অস্পষ্ট ট্যাব আইকন: আপনার উত্সটি খুব ছোট বা অ-বর্গাকার ছিল৷ 512×512 বা SVG থেকে পুনরুত্পাদন করুন; যাচাই করুন .ico আসলে একটি 32×32 ফ্রেম রয়েছে৷
লোগোর চারপাশে সাদা বাক্স: উৎসটির একটি অস্বচ্ছ পটভূমি ছিল। স্বচ্ছতার সাথে পুনরায় রপ্তানি করুন এবং PNG-সংকুচিত এন্ট্রিগুলির সাথে .ico পুনরুত্পাদন করুন৷
স্থানীয়ভাবে কাজ করে কিন্তু উৎপাদনে নয়: নিশ্চিত ফাইলগুলি পাবলিক ওয়েব রুটে বসে, শুধুমাত্র src/ এ নয়। লিনাক্স সার্ভারে CDN ক্যাশে এবং কেস-সংবেদনশীল পাথ পরীক্ষা করুন।
ধাপে ধাপে চেকলিস্ট
512×512 বা বড় আকারে একটি বর্গাকার মাস্টার রপ্তানি বা সনাক্ত করুন। আপনার ডিজাইন ফাইলে স্বচ্ছতা, sRGB কালার প্রোফাইল এবং কোনো লুকানো ব্যাকগ্রাউন্ড লেয়ার নিশ্চিত করুন।
একটি ক্লায়েন্ট-সাইড favicon জেনারেটরের মাধ্যমে মাস্টার চালান। প্রযোজ্য হলে favicon.ico, favicon.svg ডাউনলোড করুন, apple-touch-icon.png, এবং একটি পাসে PNGগুলি প্রকাশ করুন।
আপনার সর্বজনীন ওয়েব রুটে সমস্ত ফাইল আপলোড করুন। স্ট্যাটিক হোস্টে মানে index.html এর মতো একই ফোল্ডার; ফ্রেমওয়ার্কে, /public বা /static ডিরেক্টরি ব্যবহার করুন যা /-এ ম্যাপ করে।
রেন্ডার-ব্লকিং স্ক্রিপ্টের আগে <head>-এ প্রস্তাবিত <link> ব্লক আটকান। প্রাথমিক স্থান নির্ধারণ ব্রাউজারগুলিকে প্রথম পেইন্টে আইকনগুলি আবিষ্কার করতে সহায়তা করে৷
Chrome, Safari, এবং Firefox জুড়ে হার্ড রিফ্রেশ দিয়ে যাচাই করুন। একটি ট্যাব পিন করুন, পৃষ্ঠাটি বুকমার্ক করুন এবং iOS ট্র্যাফিক আপনার কাছে গুরুত্বপূর্ণ হলে একটি আসল iPhone-এ হোম স্ক্রীনে যোগ করুন পরীক্ষা করুন৷
আপনার README বা ডিজাইন সিস্টেমে সেট করা আইকনটিকে নথিভুক্ত করুন যাতে পরবর্তী রিব্র্যান্ডটি ইমেলে পাওয়া কাউকে পাওয়া 32×32 PNG থেকে শুরু না হয়।
এড়াতে সাধারণ ভুল
একটি 16×16 স্লটে স্কেল করা একটি সম্পূর্ণ অনুভূমিক লোগো ব্যবহার করে - পাঠ্যটি অপাঠ্য নয়েজ হয়ে যায়। প্রতীকে ক্রপ করুন।
একটি সঠিক মাল্টি-সাইজ ডিরেক্টরি ছাড়াই শুধুমাত্র একটি 16×16 PNG এর নাম পরিবর্তন করে .ico করা হয়েছে — Windows এবং রেটিনা ট্যাবগুলি আপস্কেল এবং ব্লার৷
অ্যাপল-টাচ-আইকন ভুলে যাওয়া ডেস্কটপ ট্যাবগুলিতে আচ্ছন্ন থাকা — iOS ব্যবহারকারীরা মোবাইল ওয়েব ট্র্যাফিকের একটি বড় অংশ৷
<link href> কে একটি CDN পাথে নির্দেশ করা যা পরিবেশ-সচেতন বিল্ড ছাড়া স্টেজিং এবং উৎপাদনের মধ্যে পার্থক্য করে।
ধরে নিলে WordPress, Shopify, বা Webflow একটি কম-রেজোলিউশন সোর্স আপলোডকে জাদুকরীভাবে ঠিক করবে৷ আবর্জনা ভিতরে, প্রতিটি আকারে আবর্জনা আউট.