ফেভিকন ফরম্যাট কিভাবে কাজ করে
যখন একটি favicon বিরতি হয়, অনুমান করা সময় নষ্ট করে। ICO ডিরেক্টরি বোঝা, PNG-in-ICO কম্প্রেশন, SVG মিডিয়া প্রশ্ন, এবং ব্রাউজার নির্বাচন লজিক আপনাকে অভিপ্রায়ের সাথে ডিবাগ করতে দেয়৷ এই গভীর ডাইভটিতে প্রতিটি সাধারণ ব্যর্থতার মোডের জন্য বাইট-স্তরের আচরণ, উদাহরণ, প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী এবং সমস্যা সমাধানের পথ রয়েছে।
favicon অনুরোধ পাইপলাইন
আপনি যখন একটি পৃষ্ঠা লোড করেন, ব্রাউজারটি HTML <head> পার্স করে, <link rel="icon"> প্রার্থীদের আবিষ্কার করে এবং কিছু না মিললে /favicon.icoও আনতে পারে৷
প্রতিটি প্রার্থী ইঙ্গিত বহন করে: href URL, টাইপ MIME, সাইজ অ্যাট্রিবিউট, এবং SVG বিষয়বস্তুতে মিডিয়া প্রশ্ন।
নেটওয়ার্ক স্ট্যাক বাইট ডাউনলোড করে, ধারকটিকে ডিকোড করে, ট্যাবের জন্য একটি বিটম্যাপে রাস্টারাইজ করে এবং আক্রমনাত্মকভাবে ক্যাশে করে — প্রায়ই স্ট্যান্ডার্ড HTTP ক্যাশে হেডারগুলিকে উপেক্ষা করে।
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.
.ico ধারক
একটি .ico ফাইল এম্বেড করা ছবি তালিকাভুক্ত একটি ডিরেক্টরি হেডার দিয়ে শুরু হয়। প্রতিটি এন্ট্রি প্রস্থ, উচ্চতা, রঙের গভীরতা এবং বাইট অফসেট রেকর্ড করে।
0 এর প্রস্থ এবং উচ্চতা বাইট মানে 256 পিক্সেল - ফরম্যাট স্পেকের একটি ঐতিহাসিক ব্যঙ্গ।
ডিকোডাররা অফসেট খোঁজে, হয় একটি BMP বিটম্যাপ বা একটি PNG ব্লব, এবং UI টুলকিটে হ্যান্ড পিক্সেল পড়ে৷ অনুরোধ প্রতি শুধুমাত্র একটি ফ্রেম ডিকোড করা হয়.
.ico এর ভিতরে PNG
64×64 এবং বড় ফ্রেমের জন্য, PNG কম্প্রেশন ফ্ল্যাট আইকনে কোনো দৃশ্যমান ক্ষতি ছাড়াই নাটকীয়ভাবে পাত্রটিকে সঙ্কুচিত করে।
PNG ব্লব হল একটি সাধারণ PNG ফাইল, IHDR এবং IDAT খণ্ডগুলি সহ, ICO কাঠামোর ভিতরে নেস্ট করা।
যে জেনারেটরগুলি এখনও 256×256 এ BMP নির্গত করে তা স্পেক অনুযায়ী ভুল নয়, কিন্তু তারা ব্যান্ডউইথ নষ্ট করে। উপলব্ধ হলে PNG-সংকুচিত এন্ট্রি পছন্দ করুন।
SVG favicons
একটি SVG favicon ব্রাউজার SVG ইঞ্জিন দ্বারা ট্যাব আকারে রেন্ডার করা হয়, একটি পৃষ্ঠার ইনলাইন SVG এর মতো।
এমবেডেড CSS prefers-color-scheme রেফারেন্স করতে পারে, একটি ফাইলকে দ্বিতীয় নেটওয়ার্ক অনুরোধ ছাড়াই হালকা এবং অন্ধকার দেখাতে দেয়।
এক্সটার্নাল রেফারেন্স (ফন্ট, ফিল্টার, রিমোট ইমেজ) favicon প্রসঙ্গে ব্লক করা হতে পারে। SVG স্বয়ংসম্পূর্ণ রাখুন।
ব্রাউজার কিভাবে বাছাই করে
যখন একাধিক <link rel="icon"> ট্যাগ বিদ্যমান, ব্রাউজারগুলি টাইপ সমর্থন, আকারের মিল এবং কখনও কখনও ঘোষণার ক্রম অনুসারে প্রার্থীদের স্কোর করে।
Chromium সাধারণত SVG পছন্দ করে যখন type="image/svg+xml" সেট করা থাকে এবং ফাইল সফলভাবে লোড হয়।
iOS হোম স্ক্রিনের জন্য অ্যাপল-টাচ-আইকন PNG ব্যবহার করার সময় Safari এখনও কিছু প্রসঙ্গে ICO দেখাতে পারে — আলাদা কোড পাথ৷
প্রত্যেক প্রার্থী ব্যর্থ হলে, ব্রাউজার একটি জেনেরিক ডকুমেন্ট আইকন দেখায় এবং পরবর্তী নেভিগেশনে /favicon.ico পুনরায় চেষ্টা করতে পারে।
ডিবাগিং উদাহরণ
নেটওয়ার্ক ট্যাব favicon.svg এর জন্য 200 দেখায় কিন্তু ট্যাব ICO ব্যবহার করে: SVG ব্যর্থ MIME স্নিফ — সার্ভারে বিষয়বস্তু-প্রকার ঠিক করুন৷
ICO ডাউনলোড হয় কিন্তু ভুল আকার দেখায়: একটি হেক্স ভিউয়ারে খুলুন — আপনার ভিতরে শুধুমাত্র একটি 16×16 ফ্রেম থাকতে পারে।
ডার্ক মোড SVG Firefox-এ কাজ করে, Chrome নয়: <style>-এর ভিতরে CSS সিনট্যাক্স চেক করুন; Chrome অবৈধ নির্বাচকদের সম্পর্কে কঠোর৷
ম্যানিফেস্ট আইকন উপেক্ষা করা হয়েছে: JSON সিনট্যাক্স ত্রুটি — DevTools অ্যাপ্লিকেশন প্যানেলে site.webmanifest যাচাই করুন।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
favicon কি চিরকালের জন্য ক্যাশে করা হয়? প্রায়শই প্রোফাইল প্রতি দিনের জন্য, পৃষ্ঠা ক্যাশে থেকে স্বাধীন।
favicons কি CORS অনুসরণ করে? সাধারণত না — এগুলি CORS প্রিফ্লাইট ছাড়াই ছবির মতো লোড হয়।
আমি কি favicon এর জন্য WebP ব্যবহার করতে পারি? সীমিত সমর্থন; বিস্তৃত কভারেজের জন্য ICO, PNG, SVG এ লেগে থাকুন।
ICO এর ভিতরে 48×48 কেন? লিগ্যাসি Windows শেল আকার; বান্ডিল অন্তর্ভুক্ত সস্তা.
সমস্যা সমাধান
মাঝে মাঝে অনুপস্থিত আইকন: HTML পার্স এবং /favicon.ico আনার মধ্যে রেস — <head>-এর প্রথম দিকে <link> ঘোষণা করুন।
স্থানীয়ভাবে সঠিক, CDN-এ ভুল: .ico-এর জন্য stale edge cache — ফাইলের নামটি পরিস্কার করুন বা সংস্করণ করুন।
আইকন উল্টানো বা ভুল রং: উৎস PNG-এ EXIF ওরিয়েন্টেশন — ICO তৈরি করার আগে EXIF স্ট্রিপ করুন।
www এবং apex-এ দুটি ভিন্ন আইকন: পৃথক স্থাপনা — ফাইল একত্রিত করুন বা হোস্টনাম পুনঃনির্দেশ করুন।
সংক্ষিপ্ত বিন্যাস ইতিহাস
ইন্টারনেট এক্সপ্লোরার ফেভারিটে ফেভিকন 16×16 ICO ফাইল হিসেবে শুরু হয়েছে। ডি-ফ্যাক্টো /favicon.ico পাথ আটকে গেছে এমনকি ফরম্যাট বিকশিত হওয়ার সাথে সাথে।
PNG লিঙ্ক ট্যাগগুলি ডিসপ্লেগুলির ঘনত্ব অর্জনের সাথে সাথে এসেছে৷ Apple অ্যাপল-টাচ-আইকন iOS হোম স্ক্রিনের জন্য একটি পৃথক লিঙ্ক সম্পর্ক হিসাবে চালু করেছে।
SVG favicon ব্রাউজারগুলি ক্রোম UI-তে নিরাপদ SVG সাবসেট রেন্ডারিং প্রয়োগ করার পরে ট্র্যাকশন অর্জন করেছে, শুধুমাত্র পৃষ্ঠার সামগ্রীতে নয়।
ওয়েব অ্যাপ Chromium-এ ইনস্টলেবিলিটি অডিটের জন্য আনুষ্ঠানিক 192 এবং 512 PNG প্রয়োজনীয়তা প্রকাশ করে।
এই টাইমলাইন বোঝা ব্যাখ্যা করে যে কেন কোনো একক বিন্যাস জিতেছে না — প্রতিটি স্তর একটি সমস্যার সমাধান করেছে যা আগেরটি পারেনি।
favicon বাইট পরিদর্শনের জন্য সরঞ্জাম
Chrome DevTools নেটওয়ার্ক প্যানেল ফিল্টার রিসোর্স প্রকার Img দ্বারা বা ফাইলের নাম দ্বারা। ডিবাগ করার সময় ক্যাশে অক্ষম করুন।
curl -I https://yoursite.com/favicon.ico ব্রাউজার ক্যাশে হস্তক্ষেপ ছাড়াই স্থিতি, বিষয়বস্তু-প্রকার এবং ক্যাশে শিরোনাম প্রকাশ করে।
ইমেজ ম্যাজিক favicon.ico কমান্ড লাইনে এমবেডেড ফ্রেম এবং মাত্রা চিহ্নিত করে।
অনলাইন ICO বিশ্লেষক সফ্টওয়্যার ইনস্টল না করেই ডিরেক্টরি এন্ট্রি দেখায় — লক-ডাউন কর্পোরেট ল্যাপটপে দরকারী।
SVG-এর জন্য, একটি টেক্সট এডিটরে ফাইল খুলুন এবং নিশ্চিত করুন যে কোনও এক্সটার্নাল xlink:href পয়েন্ট অফ-ডোমেন নেই।
পুনর্জন্মের আগে এবং পরে বাইটের আকার তুলনা করুন। একটি 10× সাইজ ড্রপ মানে সাধারণত PNG কম্প্রেশন ICO এর ভিতরে BMP প্রতিস্থাপিত হয়।
MIME ধরনের সার্ভার পাঠাতে হবে
favicon.ico — image/x-আইকন বা image/vnd.microsoft.icon। ব্রাউজারগুলি সহনশীল কিন্তু সঠিক MIME প্রক্সিগুলিকে সাহায্য করে৷
favicon.svg — image/svg+xml. ভুল টেক্সট/প্লেইনের কারণে কিছু ইঞ্জিন SVG এড়িয়ে যায়।
PNG আইকন — চিত্র/পিএনজি। CDN স্তরে Gzip বা Brotli ঠিক আছে।
ভুল কনফিগার করা nginx ধরনের ব্লকগুলি SVG favicon স্থানীয়ভাবে কাজ করার একটি প্রধান কারণ (Vite dev সার্ভার) কিন্তু উৎপাদনে ব্যর্থ হয়।
যেখানে চশমা পড়তে
ICO কাঠামো প্রাথমিক Windows রিসোর্স ফরম্যাটে নথিভুক্ত করা হয়েছে এবং PNG-ইন-ICO ডি-ফ্যাক্টো স্ট্যান্ডার্ড দ্বারা আধুনিকীকরণ করা হয়েছে।
WHATWG HTML লিঙ্ক সংজ্ঞায়িত করে rel=icon আচরণ ব্রাউজারগুলি ভেন্ডর টুইকগুলির সাথে প্রয়োগ করে৷
W3C ওয়েব অ্যাপ ম্যানিফেস্ট ইনস্টল করার জন্য আইকন অ্যারে স্কিমা নির্দিষ্ট করে।
SVG faviconগুলি SVG ক্ষুদ্র উপসেট নিয়মগুলি অনুসরণ করে ব্রাউজারগুলি chrome UI-তে প্রয়োগ করে — প্রতিটি SVG 2 বৈশিষ্ট্য সমর্থিত নয়৷
স্পেস অসম্মত হলে, লক্ষ্য ব্রাউজারে পরীক্ষা করুন। ডি-ফ্যাক্টো আচরণ দশক-পুরোনো ব্লগ পোস্টের উপর জয়লাভ করে।
ব্রাউজার সংস্করণ থ্রেশহোল্ড সহ একটি স্থানীয় নোট ফাইল রাখুন যখন আপনার দল শুধুমাত্র লিগ্যাসি ICO ক্লায়েন্টদের জন্য সমর্থন বাদ দেয়।
ঘটনা প্রতিক্রিয়া প্লেবুক
যদি faviconগুলি স্থাপনের পরে সাইট-ব্যাপী বিরতি দেয়, তবে প্রথমে স্ট্যাটিক সম্পদগুলি ফিরিয়ে আনুন — HTML পরিবর্তনগুলি খুব কমই অপরাধী হয় যখন শুধুমাত্র আইকনগুলি ব্যর্থ হয়৷
ঘটনা শুরু হওয়ার পাঁচ মিনিটের মধ্যে favicon.ico এবং apple-touch-icon.png-এর জন্য CDN 404 লগ চেক করুন।
গিটে উত্পাদন এবং সর্বশেষ পরিচিত ভাল আর্টিফ্যাক্টের মধ্যে প্রতিক্রিয়া বাইটের তুলনা করুন।
পোস্ট-মর্টেম: মূল কারণটি MIME, অনুপস্থিত ফ্রেম, বা ক্যাশে ছিল কিনা তা নথি — তিনটি ভিন্ন সংশোধন।
একটি সিন্থেটিক মনিটর যোগ করুন যা HEAD-প্রতি ঘন্টায় /favicon.ico-এর অনুরোধ করে যদি আইকনগুলি বিশ্বাসের জন্য ব্যবসায়-গুরুত্বপূর্ণ হয়।
কল করার সময় ইঞ্জিনিয়ারদের শেখান যেখানে আইকন ফাইলগুলি আর্টিফ্যাক্ট স্থাপনে থাকে যাতে রোলব্যাক মিনিটের হয়, ঘন্টা নয়।