SVG বনাম ICO আইকন

SVG favicon হল একক XML নথি যা অতিরিক্ত বাইট ছাড়াই যেকোন ট্যাব আকারে স্কেল করে। ICO ফাইলগুলি হল বাইনারি পাত্রে এক বা একাধিক প্রাক-রাস্টারাইজড ফ্রেম ধারণ করে৷

আধুনিক Chromium, Firefox, এবং Safari ট্যাবে SVG রেন্ডার করতে পারে। Windows শেল, পুরানো এম্বেড, এবং অন্তর্নিহিত /favicon.ico নিয়ে আসা এখনও রাস্টার ICO ডেটা আশা করে।

প্রশ্নটি SVG বা ICO নয় — এটি SVG প্লাস ICO, SVG সক্ষম ব্রাউজারগুলির জন্য তালিকাভুক্ত এবং 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.

একটি ফাইল 16×16 থেকে 256×256 লজিক্যাল পিক্সেল কভার করে। বজায় রাখার জন্য কোন মিপম্যাপ সেট করা হয়নি।

সাধারণ চিহ্নগুলির জন্য ফাইলের আকার প্রায়শই 2KB-এর নিচে হয়, একটি ছয়-ফ্রেমের .ico থেকে অনেক ছোট।

এমবেডেড CSS @media (prefers-color-scheme: অন্ধকার) এর অধীনে ফিলগুলিকে উল্টাতে পারে, আলাদা রাতের সম্পদ রপ্তানি না করেই আপনাকে অভিযোজিত ট্যাব দেয়৷

SVG হল পাঠ্য। আপনি অন্য কোন উৎস সম্পদের মত Git-এ favicon পরিবর্তন করতে পারেন।

আপনি HTML থেকে বাদ দিলেও ব্রাউজার /favicon.ico অনুরোধ করে। সেই অনুরোধটিকে অবশ্যই একটি বৈধ আইকন ধারক ফেরত দিতে হবে, SVG এর নাম পরিবর্তন করে .ico নয়৷

Windows পিন, আউটলুক লিঙ্ক অনফর্লিং, এবং কিছু RSS পাঠক SVG সম্পূর্ণরূপে উপেক্ষা করে। ICO-শুধু-পাথগুলি ব্যবহার করার জন্য মোটামুটি 5% ইম্প্রেশন আশা করুন৷

ICO আপনাকে অনুমানযোগ্য পিক্সেলও দেয়। জটিল SVG ফিল্টার ইঞ্জিন জুড়ে ভিন্নভাবে রেন্ডার হতে পারে; রাস্টার ফলব্যাক চেহারা স্থির করে।

সর্বাধিক সামঞ্জস্যের জন্য প্রথমে ICO ঘোষণা করুন, তারপরে উন্নতির জন্য SVG ঘোষণা করুন:

<link rel="icon" href="/favicon.ico" sizes="any">৷

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

টাইপ এবং MIME সঠিক হলে সক্ষম ব্রাউজারগুলি SVG পছন্দ করে৷ অন্যরা ভাঙা ছবি গ্লিফ ছাড়াই ICO-এ ফিরে আসে।

একটি 180×180 PNG অ্যাপল-টাচ-আইকনের সাথে পেয়ার করুন কারণ iOS হোম-স্ক্রীন আইকনগুলির জন্য SVG ব্যবহার করে না৷

একরঙা লেটারমার্ক: একক <পাথ> এবং ডার্ক-মোড ফিল সোয়াপ সহ SVG। Windows শর্টকাটগুলির জন্য একই আকার থেকে ICO তৈরি হয়েছে৷

গ্রেডিয়েন্ট লোগো: SVG এর জন্য সরলীকরণ (শুধুমাত্র ফ্ল্যাট ফিল)। ওয়েবসাইটে মার্কেটিং গ্রেডিয়েন্ট রাখুন, 16×16 ট্যাবে নয়।

লিগ্যাসি IE প্রয়োজনীয়তা সহ সরকার বা এন্টারপ্রাইজ সাইট: ICO কে অগ্রাধিকার দিন; বিশ্লেষণে নগণ্য IE ট্রাফিক দেখানোর পরেই SVG যোগ করুন।

কঠোর ব্র্যান্ডের রঙের সাথে ডিজাইন সিস্টেম: রেপোতে SVG সঞ্চয় করুন, প্রতিটি রিলিজ ট্যাগে .ico পুনরুত্থিত করতে CI কাজ চালান।

আমি কি শুধুমাত্র SVG ব্যবহার করতে পারি? আপনি যদি Windows শর্টকাট এবং অন্তর্নিহিত .ico নিয়ে আসা সম্পর্কে চিন্তা করেন না।

Safari কি SVG favicon সমর্থন করে? ডেস্কটপে Safari 15+ করে। iOS হোম স্ক্রিনে এখনও PNG প্রয়োজন৷

SVG প্রথম পেইন্ট ধীর হবে? একটি 1–2KB SVG হিরো ছবির তুলনায় নগণ্য৷

আমি কি SVG এর ভিতরে একটি বিটম্যাপ এম্বেড করতে পারি? আপনি পারেন, কিন্তু আপনি স্কেলেবিলিটি হারাবেন — পরিবর্তে ICO ব্যবহার করুন।

ডার্ক মোডে SVG favicon অদৃশ্য: ফিল ট্যাব ব্যাকগ্রাউন্ডের সাথে মেলে। স্পষ্ট পূরণ বা prefers-color-scheme নিয়ম যোগ করুন।

Chrome ICO ব্যবহার করে, SVG নয়: type="image/svg+xml" চেক করুন এবং সার্ভারের বিষয়বস্তু-প্রকারটি image/svg+xml তা যাচাই করুন।

SVG জ্যাগড দেখাচ্ছে: আপনি জটিল ফিল্টার রাস্টারাইজ করেছেন। পাথ সহজ করুন বা ট্যাবের জন্য ICO এর উপর নির্ভর করুন।

বিশাল SVG ফাইল: SVGO দিয়ে রপ্তানি করুন; ইলাস্ট্রেটর মেটাডেটা এবং অব্যবহৃত ডিফগুলি সরান।

viewBox বর্গক্ষেত্র এবং কেন্দ্রে রাখুন। অ-বর্গক্ষেত্র viewBoxes লেটারবক্স বৃত্তাকার বা বর্গাকার ট্যাব ক্রপগুলিতে অপ্রত্যাশিতভাবে আপনার চিহ্ন।

ফিল্টার, মাস্ক এবং বিদেশী অবজেক্ট এম্বেডের চেয়ে সহজ ফিল পছন্দ করুন। ফেভিকন রেন্ডারিং কনটেক্সট স্ট্রিপ ফিচার পূর্ণ-পৃষ্ঠা SVG অনুমতি দেয়।

ইনলাইন সব শৈলী. এক্সটার্নাল স্টাইলশীট শুধুমাত্র favicon-এর অনুরোধের জন্য লোড নাও হতে পারে।

স্থাপন করার আগে একই মেশিনে হালকা এবং অন্ধকার উভয় OS সেটিংসে prefers-color-scheme নিয়মগুলি পরীক্ষা করুন৷

ফাইলের আকার সঙ্কুচিত করতে রক্ষণশীল প্লাগইনগুলির সাথে SVGO চালান, কিন্তু viewBox এবং সমালোচনামূলক পাথ ডেটা অক্ষত রাখুন৷

অ্যাপ্লিকেশন কোডের মত সংস্করণ-নিয়ন্ত্রণ favicon.svg। পুল অনুরোধে বাইনারি ICO তুলনা করে ভিন্ন XML বিট।

SVG পার্স খরচ হিরো ইমেজের তুলনায় ছোট, কিন্তু ইলাস্ট্রেটর (100KB+) থেকে বিশাল SVG রপ্তানি এখনও প্রতিটি ট্যাবে বাইট নষ্ট করে।

ব্রাউজার HTML-এ HTTP ক্যাশে-নিয়ন্ত্রণ থেকে আলাদাভাবে favicon কে ক্যাশে করে। favicon.svg এর নাম পরিবর্তন করে favicon-v2.svg ফোর্স রিফ্রেশ করে যখন মার্কেটিং এর দাবি রাখে।

পরিষেবা কর্মীরা যারা HTML ক্যাশে আইকন প্রতিক্রিয়াগুলিকে চিরতরে স্ট্যাল-হোয়াইল-রিভ্যালিডেট-এর সাথে ক্যাশে করা উচিত নয় — রিব্র্যান্ডে ক্যাশে কীগুলি বাম্প করুন৷

HTTP/2 মাল্টিপ্লেক্সিং মানে তিনটি ছোট আইকন ফাইল একটি জলপ্রপাত সমস্যা নয়। জাহাজ সঠিক বিন্যাস; SVG এবং ICO এক ফাইলে মার্জ করবেন না।

ফ্যাভিকনগুলি ট্যাবগুলিতে আলংকারিক - তাদের HTML-এ Alt পাঠ্যের প্রয়োজন নেই৷ অর্থপূর্ণ সাইটের নাম এখনও <title> এর অন্তর্গত।

কম কনট্রাস্ট SVG চিহ্নগুলি UI ক্রোমের জন্য WCAG ব্যর্থ হয় যেভাবে তারা পৃষ্ঠা সামগ্রীতে ব্যর্থ হয়৷ #fff এবং #323232 উভয় ব্যাকগ্রাউন্ডে পরীক্ষা বৈসাদৃশ্য।

শুধুমাত্র রঙের ব্র্যান্ডের চিহ্নগুলি ব্যবহারকারীদের রঙ-দর্শনের অভাবের সাথে বিভ্রান্ত করে। 16×16 সিলুয়েটে একটি স্বতন্ত্র আকৃতি যোগ করুন, শুধুমাত্র হিউ শিফট নয়।

Git-এ favicon.svg সঞ্চয় করুন। রিলিজ ট্যাগে, favicon.ico তৈরি করতে একটি হেডলেস স্ক্রিপ্ট বা ম্যানুয়াল জেনারেটর ধাপ চালান এবং বাইনারি কমিট করুন বা আর্টিফ্যাক্ট স্থাপনে সংযুক্ত করুন।

ব্যর্থ CI যদি favicon.ico favicon.svg mtime এর চেয়ে পুরানো হয় — লোগো টুইকের পরে ভুলে যাওয়া পুনর্জন্ম ধরা দেয়।

প্রিভিউ এনভায়রনমেন্টগুলিকে মার্জ করার আগে 404s ধরতে প্রোডাকশন হিসাবে একই আইকন পাথ ব্যবহার করা উচিত।

আপনার স্টাইল গাইডে ডকুমেন্ট: SVG হল উৎস, ICO আর্টিফ্যাক্ট তৈরি করা হয়েছে, PNG আকার রপ্তানি লক্ষ্য।

ন্যূনতম স্ট্রোক ওজন এবং প্যাডিং 16x16 নির্দিষ্ট করুন যাতে বহিরাগত সংস্থাগুলি অফ-ব্র্যান্ডের চিহ্ন পাঠাতে না পারে৷

ব্র্যান্ড পিডিএফ-এ হালকা এবং অন্ধকার স্ক্রিনশট অন্তর্ভুক্ত করুন। মার্কেটিং দলগুলো লেটারহেডের মতো প্রায়ই ট্যাব রেফার করে।

সংস্করণ favicon বৈশিষ্ট্যগুলি লঞ্চের সাথে সাথে আইকন পরিবর্তন হলে সেমভার ট্যাগের সাথে মানানসই পণ্য রিলিজ।

ত্রৈমাসিক অডিট চালান: যদি বিশ্লেষণগুলি আপনার শ্রোতাদের মধ্যে 98% এর উপরে SVG সমর্থন দেখায়, তবুও ICO রাখুন — এন্টারপ্রাইজ ইনস্টলের জন্য দীর্ঘ পুচ্ছ বিষয়।

প্রথমে favicon.ico স্থাপন করুন এবং অন্তর্নিহিত /favicon.ico রিটার্ন 200 অনুরোধ যাচাই করুন।

স্টেজিং এ সঠিক MIME সহ favicon.svg যোগ করুন; কন্টেন্ট-টাইপ ইমেজ/এসভিজি+এক্সএমএল কিনা তা স্বয়ংক্রিয়ভাবে চালান।

উৎপাদনে পাঠান, CDN শুদ্ধ করুন, তিনটি ব্রাউজার হার্ড-রিফ্রেশ করুন, Chromium-এ SVG ট্যাব নিশ্চিত করুন এবং ICO ফলব্যাক যেখানে প্রত্যাশিত।

এক সপ্তাহের জন্য সমর্থন টিকিট নিরীক্ষণ করুন — QA Windows শর্টকাটগুলি এড়িয়ে গেলে আইকন রিব্র্যান্ডের ঠিক পরে ক্লাস্টার ইস্যু করে।

আপনার রিলিজ টিকিটে বেসলাইন স্ক্রিনশট রেকর্ড করুন যাতে কোড পর্যালোচনার সময় ভবিষ্যতের রিগ্রেশনগুলি স্পষ্ট হয়।