ফেভিকন (.ico) বনাম PNG

.ico বিন্যাসটি বিশেষভাবে তৈরি করা হয়েছিল একটি একক বাইনারি কন্টেইনারে একাধিক আইকন আকার রাখার জন্য। একটি সু-নির্মিত favicon.ico-এ 16×16, 32×32, 48×48, এবং 64×64 পিক্সেলের ফ্রেম রয়েছে। যখন একটি ব্রাউজারে একটি ট্যাবের জন্য একটি ফ্যাভিকনের প্রয়োজন হয়, তখন এটি .ico ফাইলটি খোলে, ICO ডিরেক্টরিটি পড়ে এবং প্রয়োজনীয় প্রদর্শন আকারের সাথে সবচেয়ে ঘনিষ্ঠভাবে মেলে এমন ফ্রেম নির্বাচন করে। এই বহু-আকার ক্ষমতা হল PNG এর উপর .ico-এর সংজ্ঞায়িত সুবিধা৷

PNG হল একটি একক-চিত্র বিন্যাস। একটি PNG ফাইলে ঠিক একটি রেজোলিউশনে একটি ছবি থাকে৷ একা PNG দিয়ে একাধিক মাপ কভার করতে, আপনার একাধিক ফাইল এবং স্পষ্ট `sizes=` বৈশিষ্ট্য সহ একাধিক `<link>` ট্যাগ প্রয়োজন৷ এটি আরও ভার্বস কিন্তু প্রতিটি রেজোলিউশনে কোন ছবিটি পরিবেশন করা হবে তার উপর সুনির্দিষ্ট নিয়ন্ত্রণের অনুমতি দেয়। PNG যেকোনো প্রদত্ত রেজোলিউশনে BMP-এনকোডেড ICO ফ্রেমের চেয়ে ভাল ক্ষতিহীন কম্প্রেশন সমর্থন করে।

ব্রাউজার সামঞ্জস্য যেখানে .ico সিদ্ধান্তমূলকভাবে জয়লাভ করে। প্রতিটি ব্রাউজার — লিগ্যাসি IE, পুরানো Edge, প্রাচীন Safari সংস্করণ এবং অস্পষ্ট কুলুঙ্গি ব্রাউজারগুলি সহ — কোনও `<link>` ট্যাগ ছাড়াই ডোমেন রুট থেকে /favicon.ico আনে৷ এমনকি যদি আপনি লিঙ্ক ট্যাগ সম্পূর্ণরূপে বাদ দেন, ব্রাউজারগুলি একটি নিয়ম হিসাবে GET /favicon.ico চেষ্টা করবে৷ PNG-এর জন্য সঠিক MIME প্রকার সহ স্পষ্ট `<link rel='icon' type='image/png'>` ট্যাগ প্রয়োজন বা এটি উপেক্ষা করা হয়৷

.ico এবং PNG এর মধ্যে স্বচ্ছতা সমর্থন সমান। উভয় ফর্ম্যাট একটি 8-বিট আলফা চ্যানেল সমর্থন করে (পিক্সেল প্রতি সম্পূর্ণ স্বচ্ছতা)। যাইহোক, .ico শুধুমাত্র স্বচ্ছতা রক্ষা করে যখন এর অভ্যন্তরীণ ফ্রেমগুলি PNG কম্প্রেশন ব্যবহার করে, BMP নয়। পুরানো ICO এনকোডারগুলি কখনও কখনও BMP-তে ডিফল্ট হয়, যার সীমিত (1-বিট) স্বচ্ছতা রয়েছে। সর্বদা একটি আধুনিক জেনারেটর ব্যবহার করুন যা PNG-সংকুচিত .ico ফ্রেম তৈরি করে।

ফাইলের আকার তুলনা প্রসঙ্গের উপর নির্ভর করে। একটি একক 32×32 PNG একটি মাল্টি-সাইজ .ico ফাইলের চেয়ে ছোট যা 16, 32, 48 এবং 64 পিক্সেল ফ্রেমে বান্ডিল করে৷ যাইহোক, .ico চারটি পৃথক PNG ফাইল এবং চারটি লিঙ্ক ট্যাগ প্রতিস্থাপন করে। মোট পেলোডের জন্য, একটি ভাল-সংকুচিত মাল্টি-সাইজ .ico প্রায় সবসময়ই পৃথক পৃথক PNG-এর সমতুল্য সেটের চেয়ে ছোট।

PNG যেকোন পৃথক আকারে কম্প্রেশন দক্ষতার উপর জয়লাভ করে। PNG কম্প্রেশন অ্যালগরিদম (DEFLATE/zlib) ফ্ল্যাট-কালার লোগো এবং তীক্ষ্ণ প্রান্ত এবং সীমিত রঙের প্যালেট সহ আইকন-স্টাইলের শিল্পকর্মের জন্য বিশেষভাবে কার্যকর। সর্বোত্তম কম্প্রেশনে একটি 32×32 PNG লোগো 200 বাইটের কম হতে পারে। একটি .ico-এর মধ্যে সমতুল্য BMP ফ্রেম সবসময় 4 KB হয় ছবির বিষয়বস্তু নির্বিশেষে।

Google অনুসন্ধান ফেভিকন যোগ্যতার জন্য, .ico এবং PNG উভয়ই সমর্থিত। Google-এর ক্রলার প্রথমে আপনার HTML-এ লিঙ্ক করা ফ্যাভিকন নিয়ে আসে, অথবা /favicon.ico-এ ফিরে আসে। সর্বনিম্ন প্রয়োজনীয়তা হল 48×48 পিক্সেল এবং একটি সর্বজনীনভাবে অ্যাক্সেসযোগ্য URL৷ `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` এর সাথে সংযুক্ত একটি সঠিক আকারের PNG এটিকে সন্তুষ্ট করে এবং একই আকারের একটি .ico বান্ডিল করে।

ডার্ক মোড আচরণ ফরম্যাটের মধ্যে ভিন্ন। PNG ফাইলগুলি ব্যবহারকারীর রঙের স্কিমের সাথে খাপ খাইয়ে নিতে পারে না — আপনার প্রয়োজন হবে JavaScript লিংক ট্যাগ href ডায়নামিকভাবে অদলবদল করতে, যা ভঙ্গুর। .ico ফরম্যাটের কোনো ডার্ক-মোড ক্ষমতা নেই। ডার্ক-মোড ফেভিকন অভিযোজনের জন্য, শুধুমাত্র SVG এটিকে একটি এমবেডেড `@media (prefers-color-scheme: dark)` শৈলী ব্লকের মাধ্যমে সমর্থন করে। PNG এবং .ico একটি SVG ওভারলে দিয়ে যুক্ত করা উচিত।

সর্বোত্তম আধুনিক সেটআপ উভয় ফর্ম্যাটকে একত্রিত করে। সার্বজনীন ফলব্যাক হিসাবে `<link rel='icon' href='/favicon.ico'>` ব্যবহার করুন, রেটিনা স্পষ্টতার জন্য `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>`, এবং স্কেলযোগ্য ডার্ক-মোড সমর্থনের জন্য `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` ব্যবহার করুন৷ যে ব্রাউজারগুলি SVG ফ্যাভিকন বোঝে তারা SVG নির্বাচন করে; অন্যরা PNG পর্যন্ত পড়ে; প্রাচীন ব্রাউজার .ico পায়।

Windows OS ইন্টিগ্রেশন একটি .ico-শুধুমাত্র ডোমেন। ডেস্কটপ শর্টকাট, ফাইল এক্সপ্লোরার আইকন, এবং Windows টাস্কবার পিন সব .ico ফর্ম্যাট পড়ে। যদি আপনার ব্যবহারকারীদের কেউ আপনার সাইটটিকে Windows টাস্কবারে পিন করে বা আপনার URL-এ একটি ডেস্কটপ শর্টকাট তৈরি করে, শুধুমাত্র /favicon.ico শর্টকাট আইকন হিসেবে ব্যবহার করা হয়। এই প্রসঙ্গে PNG ফাইলগুলি সম্পূর্ণরূপে উপেক্ষা করা হয়েছে৷

180×180 apple-touch-icon-এর জন্য, PNG হল একমাত্র বৈধ ফর্ম্যাট৷ iOS হোম-স্ক্রীন আইকনগুলির জন্য .ico পড়ে না — এর জন্য বিশেষভাবে `<link rel='apple-touch-icon'>` এর মাধ্যমে লিঙ্ক করা একটি PNG প্রয়োজন৷ এটি এমন একটি ক্ষেত্রে যেখানে PNG শুধুমাত্র পছন্দের নয় কিন্তু প্রয়োজনীয়।

সার্ভার কনফিগারেশন উপেক্ষা করা উচিত নয়. অনেক ওয়েব সার্ভার .ico-কে একটি ভুল কন্টেন্ট টাইপ (`image/x-icon` এর পরিবর্তে `text/plain`) দিয়ে পরিবেশন করে, যদি স্পষ্টভাবে কনফিগার করা না থাকে। PNG ফাইলগুলির হোস্টিং প্ল্যাটফর্ম জুড়ে বিস্তৃত MIME প্রকার সমর্থন রয়েছে৷ আপনি যদি দেখেন আপনার favicon.ico লোড হচ্ছে না, পরীক্ষা করুন যে আপনার সার্ভার ICO অনুরোধের জন্য `Content-Type: image/x-icon` বা `image/vnd.microsoft.icon` ফেরত দিচ্ছে৷

favicon generator একই সাথে উভয় ফর্ম্যাট আউটপুট করে। আপনাকে বেছে নিতে হবে না — ডাউনলোড প্যাকেজে favicon.ico, 32×32 এবং 180×180 এ স্বতন্ত্র PNG ফাইল এবং সম্পূর্ণ আধুনিক স্ট্যাকের জন্য SVG অন্তর্ভুক্ত রয়েছে। এই প্যাকেজটি ব্যবহার করার অর্থ হল ICO বনাম PNG প্রশ্নের উত্তর স্বয়ংক্রিয়ভাবে দেওয়া হয়েছে: উভয়ই ব্যবহার করুন, প্রতিটি সেই প্রসঙ্গে যেখানে এটি উত্তীর্ণ হয়৷

SVG কভার করে এমন একটি সম্পূর্ণ বিন্যাসের তুলনার জন্য, best favicon format guide দেখুন। সেই নির্দেশিকা ব্যাখ্যা করে যে প্রতিটি ব্যবহারের ক্ষেত্রে কোন ফর্ম্যাটকে অগ্রাধিকার দিতে হবে — স্ট্যান্ডার্ড ওয়েবসাইট, PWA, ই-কমার্স স্টোর এবং ডেভেলপার টুল — এবং আপনার ফেভিকন স্ট্যাক বেছে নেওয়ার জন্য একটি সিদ্ধান্তের ম্যাট্রিক্স প্রদান করে৷