স্বচ্ছ ফেভিকন গাইড

ব্রাউজার ট্যাব, বুকমার্ক বার, এবং মোবাইল লঞ্চারগুলি অপ্রত্যাশিত ব্যাকগ্রাউন্ডে বসে — সাদা, গাঢ় ধূসর, ঝাপসা ওয়ালপেপার, বা ব্র্যান্ডের আভা।

একটি favicon একটি বেকড-ইন সাদা বর্গক্ষেত্র ডার্ক মোডে একটি স্টিকারের মতো দেখায়৷ স্বচ্ছ আলফা UI ক্রোমকে আপনার চিহ্নের চারপাশে দেখাতে দেয়।

স্বচ্ছতা অসারতা নয়। এইভাবে আধুনিক ইন্টারফেস আইকনগুলিকে উপাদান, সাবলীল এবং Safari ট্যাব ডিজাইনে মিশ্রিত করে।

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.

আপনার লোগোটি আলফা সহ PNG-32 হিসাবে রপ্তানি করুন, বা পটভূমি আয়তক্ষেত্র স্তর ছাড়াই SVG৷

বেশিরভাগ হোয়াইট-বক্স বাগ উৎস ফাইলে উদ্ভূত হয়, favicon কনভার্টার নয়। টুলটিকে দোষারোপ করার আগে ফটোশপ লেয়ার বা Figma ফিল চেক করুন।

যদি আপনাকে JPG থেকে শুরু করতেই হয়, তাহলে ব্যাকগ্রাউন্ড ম্যানুয়ালি কেটে ফেলুন বা একটি কঠিন ফিল গ্রহণ করুন — JPG এর কোনো আলফা চ্যানেল নেই।

.ico-এর ভিতরে PNG-সংকুচিত এন্ট্রিগুলি সম্পূর্ণ আলফা সংরক্ষণ করে৷ পুরানো এনকোডারগুলির মধ্যে অসঙ্কুচিত BMP এন্ট্রিগুলি প্রায়শই স্বচ্ছতা হ্রাস করে।

একটি জেনারেটর ব্যবহার করুন যা প্রতি ফ্রেমে PNG কম্প্রেশন বাছাই করে যখন আকার 64×64 ছাড়িয়ে যায়। এটি 2026 টুলিং-এ আদর্শ অনুশীলন।

ফাইল এক্সপ্লোরার প্রিভিউতে হালকা এবং গাঢ় উভয় ডেস্কটপ পটভূমিতে .ico খোলার মাধ্যমে স্বচ্ছতা যাচাই করুন।

রাস্টার ICO হল স্থির — একটি চিহ্ন ডিজাইন করুন যা পিক্সেল পুনর্লিখন ছাড়াই হালকা এবং অন্ধকার উভয় ট্যাবে পড়ে৷

SVG মানিয়ে নিতে পারে: ফিলগুলি উল্টাতে বা অ্যাকসেন্ট রঙগুলি অদলবদল করতে <style>@media (prefers-color-scheme: dark) { ... }</style> এম্বেড করুন৷

কিছু দল ডার্ক-মোড SVG প্লাস একটি নিরপেক্ষ .ico ফলব্যাক ক্লায়েন্টদের জন্য পাঠায় যেগুলি কখনই SVG নিয়ে আসে না। এটি অভিযোজিত এবং উত্তরাধিকার পথ কভার করে।

শুধুমাত্র নীল লোগোমার্ক: স্বচ্ছ PNG উৎস → মাল্টি-সাইজ .ico → সাদা Safari ট্যাব এবং গাঢ় Firefox ট্যাবে সঠিক দেখায়৷

কালো শব্দচিহ্ন: একটি সূক্ষ্ম আলোর রূপরেখা যোগ করুন বা SVG অন্ধকার-মোড CSS ব্যবহার করুন; খাঁটি কালো অন্ধকার ট্যাবে অদৃশ্য হয়ে যায়।

বৃত্তাকার ব্যাজ লোগো: বর্গাকার ক্যানভাসের ভিতরে 10% প্যাডিং রাখুন যাতে অ্যান্টি-অ্যালাইজড প্রান্তগুলি ক্লিপ না হয়।

ইমোজি-স্টাইল আইকন: স্বচ্ছ কোণ সহ সমতল রঙ; গ্রেডিয়েন্ট এড়িয়ে চলুন যেটি 16x16 এ ব্যান্ড করুন।

প্রতিটি ব্রাউজার কি ICO আলফাকে সম্মান করে? আধুনিক ব্রাউজারগুলি তখন করে যখন ফ্রেমগুলি PNG-সংকুচিত হয়।

স্বচ্ছতা কি অনুসন্ধান ফলাফলের বিপরীতে আঘাত করবে? Google আপনার আইকনটি সাদাতে রাখতে পারে; যাইহোক স্পষ্টতা পরীক্ষা করুন।

আমি একটি আধা-স্বচ্ছ আভা ব্যবহার করতে পারি? নরম চকচকে খুব কমই 16×16 বেঁচে থাকে — প্রভাব সরলীকরণ করে।

সাদা ভরাট কি কখনও ঠিক আছে? শুধুমাত্র যদি আপনার ব্র্যান্ড চিহ্নটি ইচ্ছাকৃতভাবে একটি কঠিন বর্গাকার টালি হয়।

ICO এক্সপোর্টের পরে সাদা বাক্স: উৎসে ব্যাকগ্রাউন্ড লেয়ার সক্রিয় ছিল, বা টুল ব্যবহার করা হয়েছে BMP এনকোডিং। PNG-32 পুনরায় রপ্তানি করুন এবং পুনরায় তৈরি করুন।

অন্ধকার ট্যাবে অদৃশ্য আইকন: স্বচ্ছ ব্যাকগ্রাউন্ডে গাঢ় গ্লিফ। SVG হালকা করুন বা একটি সূক্ষ্ম স্ট্রোক যোগ করুন।

লোগোর চারপাশে ফ্রিঞ্জ পিক্সেল: প্রিমাল্টিপ্লাইড আলফা সমস্যা — স্ট্যান্ডার্ড আলফা সহ ডিজাইন টুল থেকে পুনরায় রপ্তানি করুন।

Chrome তে স্বচ্ছতা কিন্তু Edge নয়: Edge ক্যাশে পুরানো ICO৷ একবার হার্ড-রিফ্রেশ বা বাম্প ফাইলের নাম।

এক বা দুটি রঙ সহ সিলুয়েট চিহ্নগুলি ডাউনস্কেলিংয়ে সেরাভাবে বেঁচে থাকে। টুইটার বার্ড ভাবুন, ফটোগ্রাফিক টেক্সচার নয়।

আপনার মাস্টারে আউটলাইন শৈলীর স্ট্রোক প্রস্থ কমপক্ষে 2px 16×16 এ প্রয়োজন - পাতলা স্ট্রোকগুলি অদৃশ্য হয়ে যায়।

গ্রেডিয়েন্ট খুব কমই 16×16 বেঁচে থাকে; ওয়েবসাইট গ্রেডিয়েন্ট রাখলেও favicon ভেরিয়েন্টের জন্য একটি কঠিন ব্র্যান্ডের রঙে সমতল করুন।

প্যাডিং: বর্গাকার ক্যানভাসের ভিতরে 10-15% খালি জায়গা ছেড়ে দিন যাতে OS মাস্কগুলি কোণে ক্লিপ না করে।

লঞ্চের আগে পূর্বরূপ সরঞ্জামগুলিতে #ffffff এবং #1e1e1e উভয় ব্যাকগ্রাউন্ডে পরীক্ষা করুন।

Figma: স্বচ্ছতা সক্ষম সহ 512×512 এ PNG রপ্তানি করুন; বাউন্ডিং বক্স পূরণ অক্ষম করুন।

ফটোশপ: স্বচ্ছতার সাথে ওয়েব PNG-24 এর জন্য সংরক্ষণ ব্যবহার করুন; ফাইলের আকার গুরুত্বপূর্ণ হলে ICC বাতিল করুন।

ইলাস্ট্রেটর: উপস্থাপনা বৈশিষ্ট্য সহ SVG রপ্তানি করুন, তারপর favicon ব্যবহারের আগে SVGO দিয়ে সরল করুন৷

স্কেচ: নিশ্চিত করুন যে আর্টবোর্ড পটভূমি একটি সাদা আয়তক্ষেত্র হিসাবে রপ্তানি করা হয় না।

ক্যানভা মুক্ত রপ্তানি কখনও কখনও স্বচ্ছতাকে সমতল করে — ফাইলটিকে বিশ্বাস করার আগে macOS-এ পূর্বরূপ যাচাই করুন৷

ব্রাউজার ট্যাব আইকনগুলি প্রধান ফোকাস, কিন্তু স্বচ্ছ PNG উত্সগুলি Android-এ PWA স্প্ল্যাশ কম্পোজিটিং উন্নত করে৷

কিছু RSS পাঠক রঙিন সারিগুলিতে favicon ফিড প্রদর্শন করে — স্বচ্ছতা মিশ্রিত; সাদা বাক্স বাগ মত দেখায়.

PDF রপ্তানি এবং মুদ্রণ CSS favicon সম্পূর্ণরূপে উপেক্ষা করুন। প্রিন্ট ব্র্যান্ডিংয়ের জন্য favicon স্বচ্ছতার উপর নির্ভর করবেন না।

মোতায়েন করার আগে আধা-স্বচ্ছ ফ্রিঞ্জ পিক্সেল সনাক্ত করতে আমাদের favicon প্রিভিউ ইউটিলিটি বা যেকোনো ইমেজ এডিটর চেকারবোর্ড ব্যবহার করুন।

32×32 সমমানে 400% এ জুম করুন। লোগোর চারপাশে ধূসর হ্যালোস মানে ব্যাকগ্রাউন্ড সম্পূর্ণরূপে সরানো হয়নি।

যখন হ্যালো অব্যাহত থাকে তখন ভেক্টর থেকে পুনরায় রপ্তানি হয় — রাস্টার এডিটরগুলিতে ম্যানুয়াল ইরেজার খুব কমই প্রতিটি ICO ফ্রেমে স্কেল করে।

ফটোগ্রাফিক লোগোগুলি খুব কমই favicon হিসাবে কাজ করে এমনকি আলফা দিয়েও - একটি মনোগ্রাম বা প্রতীকে সরলীকরণ করে৷

ব্যস্ত ফটোতে ভারী অ্যান্টি-অ্যালাইজড প্রান্তগুলি 16×16-এ শোরগোলপূর্ণ হ্যালো তৈরি করে। ভেক্টর সিলুয়েট এটি ঠিক করে।

যদি ব্র্যান্ড নির্দেশিকা একটি ভরা বর্গাকার টাইল বাধ্যতামূলক করে, তাহলে স্বচ্ছতার বিরুদ্ধে লড়াই করার পরিবর্তে অস্বচ্ছতা-মুক্ত নকশা গ্রহণ করুন।

মৌসুমী প্রচারণা অস্থায়ী অ-স্বচ্ছ আইকন ব্যবহার করতে পারে; ব্যবহারকারীর বিভ্রান্তি এড়াতে প্রচারণার পরে ফিরে যান।

বাধ্যতামূলক ব্যাকগ্রাউন্ডের রঙ সহ আইনি ট্রেডমার্কগুলি হল ব্যতিক্রম — স্বচ্ছতার সর্বোত্তম অনুশীলনের বিষয়ে ব্র্যান্ডের পরামর্শ অনুসরণ করুন।

পাশাপাশি হালকা এবং অন্ধকার ব্যাকগ্রাউন্ড সহ একটি পরীক্ষা HTML পৃষ্ঠা তৈরি করুন; পরিদর্শনের জন্য বড় img ট্যাগ হিসাবে আপনার favicon সম্পদ লোড করুন।

16×16 রেন্ডারকে একটি বাস্তব ব্রাউজার ট্যাবের স্ক্রিনশটে ওভারলে করুন যাতে কনট্রাস্ট সমস্যা তাড়াতাড়ি ধরা যায়।

অস্বচ্ছ PNG সংযুক্তিগুলি ইমেল করার পরিবর্তে ডিজাইন পর্যালোচনাতে পরীক্ষার পৃষ্ঠার লিঙ্কটি ভাগ করুন৷

যখন স্বচ্ছতা ল্যাব পৃষ্ঠাটি পাস করে, তখন একই ফাইলগুলিকে পুনরায় রপ্তানি না করে উৎপাদনে উন্নীত করুন।

আপনার অভ্যন্তরীণ উইকিতে ল্যাব পৃষ্ঠাটি সংরক্ষণ করুন যাতে ঠিকাদাররা প্রতি ব্যস্ততায় একই QA পদক্ষেপগুলি পুনরাবৃত্তি করে।

লুপ ডিজাইনাররা যখন QA ব্যর্থ হয় — স্বচ্ছতা বাগগুলি প্রায় সর্বদা উৎসে সংশোধন করা হয়, কনভার্টারে নয়।

ল্যাব পৃষ্ঠায় ICO এবং PNG পাশাপাশি তুলনা করুন — অমিল মানে জেনারেটর একটি বিন্যাসে আলফা বাদ দিয়েছে৷

macOS এবং Windows-এ প্রতিটি OS থিম পরিবর্তনের পরে পুনরায় পরীক্ষা করুন — ব্যবহারকারীরা দলগুলির প্রত্যাশার চেয়ে বেশি ঘন ঘন অন্ধকার মোডে স্যুইচ করে।

আপনার পুল অনুরোধ টেমপ্লেটে ল্যাব পৃষ্ঠার URL যোগ করুন যাতে স্বচ্ছতা QA কখনই ভুলবশত এড়িয়ে না যায়।