ফেভিকন UX: একটি দুর্দান্ত ফেভিকন কীসে তৈরি হয়

একটি দুর্দান্ত ফেভিকন হলো সহজ, উচ্চ কনট্রাস্টের একটি চিহ্ন, সাধারণত আপনার লোগোমার্ক বা এক-দুটি অক্ষর, যা হালকা ও গাঢ় উভয় ব্রাউজার ট্যাবেই 16x16 পিক্সেলে পড়া যায়, আপনার ব্র্যান্ডের সঙ্গে মেলে এবং খুব কমই বদলায়। এই গাইডের বাকি সবকিছু (পিক্সেল অ্যালাইনমেন্ট, রং, প্যাডিং, স্বচ্ছতা, ফাইলের আকার) এই লক্ষ্যগুলোরই সেবা করে: কয়েক ডজন খোলা ট্যাবের মধ্যে আপনার সাইটকে তাৎক্ষণিকভাবে খুঁজে পাওয়া সহজ করা।

ফেভিকন ছোট হলেও অনেক জায়গায় দেখা যায়: ব্রাউজার ট্যাব, বুকমার্ক বার, হিস্টরি তালিকা, ট্যাব-সার্চ মেনু, মোবাইল ও ডেস্কটপে গুগল সার্চ ফলাফল এবং ফোনের হোম স্ক্রিন। যাঁদের অনেক ট্যাব খোলা থাকে, তাঁদের ক্ষেত্রে শিরোনাম প্রায়ই কেটে একেবারে অদৃশ্য হয়ে যায় এবং আইকনই একমাত্র সংকেত হয়ে থাকে। তাই এটি সাজসজ্জা নয়, বরং নেভিগেশনের একটি বাস্তব উপাদান।

1. 16x16 আকারে পাঠযোগ্যতা

ক্লাসিক ফেভিকনের আকার 16x16 CSS পিক্সেল। সাধারণ ডিসপ্লেতে এটি আক্ষরিক অর্থেই 256 পিক্সেল; 2x রেটিনা ডিসপ্লেতে একই জায়গার জন্য ব্রাউজার সাধারণত 32x32 ছবি বেছে নেয়। আপনি যা-ই ডিজাইন করুন, এই ছোট হয়ে যাওয়া সহ্য করতে হবে।

সহজ রাখুন

• একটি আকৃতি বা এক-দুটি অক্ষর। একটি গাঢ় অক্ষর, কোনো প্রতীকসহ বৃত্ত, বা সহজ জ্যামিতিক চিহ্ন ভালো কাজ করে। তিনটি অক্ষর বা একটি শব্দ শুধু অস্পষ্ট দাগে পরিণত হবে।
• একটিমাত্র ফোকাস পয়েন্ট। আইকনটি পাঁচটি শব্দে বর্ণনা করতে না পারলে সেটি বেশি জটিল।
• গ্রেডিয়েন্ট, ছায়া বা সূক্ষ্ম টেক্সচার নয়। ছোট আকারে এগুলো ঝাপসা দাগ হয়ে যায়।

পিক্সেল গ্রিডের সঙ্গে মেলান

16x16 আকারে গ্রিড থেকে অর্ধেক পিক্সেল সরে থাকা কোনো রেখা দুই সারি পিক্সেলজুড়ে অ্যান্টি-অ্যালিয়াসড হয় এবং ধূসর ও নরম দেখায়। প্রান্তগুলো পূর্ণ পিক্সেলের সীমানায় রাখুন এবং আকৃতি প্রতিসম হলে জোড় প্রস্থ ব্যবহার করুন। ভেক্টর টুল থেকে এক্সপোর্ট করলে পিক্সেল স্ন্যাপিং চালু করুন, অথবা ছোট করা ফলাফল দেখে হাতে ঠিক করে নিন।

সরু রেখা এড়িয়ে চলুন

16x16 আকারে 2 পিক্সেলের চেয়ে সরু স্ট্রোক (আইকনের প্রস্থের প্রায় 12 শতাংশ) মিলিয়ে যায় বা বিভিন্ন আকারে কাঁপতে থাকে। স্ট্রোক মোটা করুন, ভেতরের খুঁটিনাটি সরান এবং ছোট ফাঁক মিলিয়ে দিন। বিস্তারিত লোগোর হুবহু ক্ষুদ্র সংস্করণের চেয়ে গাঢ়, কিছুটা ভারী গ্লিফ সাধারণত ভালো পড়া যায়।

হাতে হিন্টিং করুন

ICO ও PNG ফাইলে ফন্ট-স্টাইল হিন্টিং নেই, তাই এর বিকল্প হলো হাতে পিক্সেল সম্পাদনা: আপনি আলাদা আলাদা পিক্সেল ঠিক করেন যাতে বক্ররেখা, কোনাকুনি রেখা এবং কাউন্টার ("a" বা "e"-এর মতো অক্ষরের ভেতরের ফাঁকা অংশ) স্পষ্ট থাকে। স্বয়ংক্রিয়ভাবে ছোট করা একটি ভালো প্রথম খসড়া, কিন্তু হাতে বসানো কয়েকটি পিক্সেলই প্রায়ই একটি দলা আর চেনা অক্ষরের মধ্যে পার্থক্য গড়ে দেয়। MakeFav পিক্সেল এডিটর ঠিক এই কাজের জন্যই তৈরি: 16x16 ক্যানভাস খুলুন, সমস্যাযুক্ত পিক্সেল ঠিক করুন এবং এক্সপোর্ট করুন।

2. হালকা ও গাঢ় ট্যাবে কনট্রাস্ট

ব্রাউজার এখন প্রায়ই ডার্ক মোডে চলে, এবং অনেক ব্যবহারকারীর ট্যাব স্ট্রিপ পেজের থিম থেকে আলাদা হয়। স্বচ্ছ ব্যাকগ্রাউন্ডসহ গাঢ় নেভি আইকন সাদা ট্যাবে নিখুঁত দেখালেও গাঢ় ধূসর ট্যাবে প্রায় অদৃশ্য হয়ে যেতে পারে। সবসময় দুটোই পরীক্ষা করুন।

বাস্তব সমাধান

• ব্যাকগ্রাউন্ড আকৃতি যোগ করুন। ব্র্যান্ডের রঙে একটি সলিড গোলাকার বর্গ বা বৃত্ত নিশ্চিত করে যে ট্যাব যেমনই হোক, চিহ্নটির নিজস্ব কনট্রাস্ট আছে।
• সরু আউটলাইন বা হ্যালো ব্যবহার করুন। গাঢ় গ্লিফের চারপাশে 1px হালকা প্রান্ত (বা উল্টোটা) যেকোনো থিমে অবয়ব দৃশ্যমান রাখে, তবে 16x16 আকারে এটি স্পষ্ট থাকতে হবে, তাই পরীক্ষা করুন।
• মাঝারি টোনের ব্র্যান্ড রং বেছে নিন। জোরালো নীল, কমলা, সবুজ বা ম্যাজেন্টার মতো রং সাধারণত সাদা ও প্রায়-কালো উভয় পৃষ্ঠেই ভালো কাজ করে। খুব হালকা হলুদ বা খুব গাঢ় নেভি ঝুঁকিপূর্ণ।
• অ্যাডাপটিভ SVG ফেভিকন ব্যবহার করুন। SVG-তে prefers-color-scheme মিডিয়া কোয়েরি রাখা যায়, ফলে সিস্টেম থিমের সঙ্গে আইকন বদলায়।

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

মনে রাখবেন, মিডিয়া কোয়েরি অপারেটিং সিস্টেম বা ব্রাউজারের থিম প্রতিফলিত করে, ট্যাব স্ট্রিপ সাধারণত সেটিই অনুসরণ করে, তবে সবসময় নয়। SVG ফেভিকনের সমর্থনও একরকম নয়: Chrome ও Firefox এগুলো সামলাতে পারে, অথচ Safari ঐতিহাসিকভাবে পিছিয়ে ছিল, তাই সবসময় PNG বা ICO ফলব্যাক রাখুন। সলিড-ব্যাকগ্রাউন্ড ডিজাইনই সবচেয়ে মজবুত বিকল্প, কারণ এতে থিম-সংক্রান্ত কোনো লজিকই লাগে না।

3. চেনা যাওয়া ও ব্র্যান্ডের সামঞ্জস্য

ওয়ার্ডমার্কসহ পূর্ণ লোগো লকআপ নয়, লোগোমার্ক (প্রতীক বা মনোগ্রাম) ব্যবহার করুন। 16x16 আইকনের ভেতরের লেখা পড়া যায় না, আর চওড়া অনুভূমিক লোগো বর্গে সংকুচিত করলে মাঝখানে শুধু একটি ক্ষুদ্র ফালি থাকে।

• আপনার ব্র্যান্ডের প্রতীক থাকলে শুধু ছোট না করে ছোট আকারের জন্য সেটি সরল করুন। কম খুঁটিনাটির "ফেভিকন সংস্করণ" একটি প্রচলিত রীতি।
• আপনার ব্র্যান্ড শুধু ওয়ার্ডমার্ক হলে প্রথম অক্ষর বা স্বতন্ত্র একজোড়া অক্ষর নিয়ে ব্র্যান্ডের টাইপফেসে ভারী ওজনে বসান।
• রংগুলো লোগো, অ্যাপ আইকন ও সোশ্যাল অ্যাভাটারের সঙ্গে সামঞ্জস্যপূর্ণ রাখুন, যাতে ব্যবহারকারী সবখানে একই ব্র্যান্ড চিনতে পারেন।

হুবহু মিল যতটা গুরুত্বপূর্ণ, স্বাতন্ত্র্যও ততটাই। একসারি ট্যাবের দিকে তাকান: অন্য তিনটি সাইটও নীল বৃত্ত ব্যবহার করলে আপনারটি আলাদা করে চোখে পড়বে না। নিখুঁতভাবে বিশ্বস্ত ক্ষুদ্র সংস্করণের চেয়ে ভিন্ন আকৃতি বা রং বেশি কাজের।

4. রং: সীমিত, উজ্জ্বল প্যালেট

এত কম পিক্সেলে প্রতিটি বাড়তি রং বিশৃঙ্খলা বাড়ায়। এক বা দুটি রং, আর বড়জোর সাদা বা কালো রাখার লক্ষ্য নিন। প্যাস্টেলের চেয়ে উজ্জ্বল রং ছোট আকারে ভালো ফুটে ওঠে, কারণ প্যাস্টেল ট্যাবের ব্যাকগ্রাউন্ডে মিশে যায়।

অ্যাক্সেসিবিলিটির ভাবনা থেকে কিছুটা ধার নিন। WCAG অর্থবহ গ্রাফিক্যাল অবজেক্টের জন্য অন্তত 3:1 কনট্রাস্ট চায় (সাকসেস ক্রাইটেরিয়ন 1.4.11, Non-text Contrast)। ফেভিকন আনুষ্ঠানিকভাবে এর আওতায় পড়ে না, কারণ এটি পেজের কনটেন্ট নয়, ব্রাউজারের ক্রোমের অংশ, তবে গ্লিফ ও তার ব্যাকগ্রাউন্ডের মধ্যে এবং আইকন ও ট্যাবের মধ্যে 3:1 একটি যুক্তিসংগত লক্ষ্য। এছাড়া শুধু রঙের ছটা দিয়ে কিছু বোঝানো এড়িয়ে চলুন: একই আইকনের লাল ও সবুজ সংস্করণ অনেক বর্ণান্ধ ব্যবহারকারীর কাছে আলাদা করা যায় না, তাই আকৃতি বদলান বা প্রতীক যোগ করুন।

5. আকৃতি, প্যাডিং ও সেফ জোন

বর্গটি ভরে দিন

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

গোলাকার না বর্গাকার?

ব্রাউজার সাধারণত ট্যাব ফেভিকন ক্রপ করে না, তাই আপনি যে আকৃতি আঁকেন, ব্যবহারকারী সেটাই দেখেন। কিছুটা গোলাকার কোণের বর্গ পরিপাটি দেখায় এবং সামঞ্জস্যপূর্ণ ব্যাকগ্রাউন্ড দেয়; স্বচ্ছতার ওপর ফ্রিফর্ম গ্লিফ বা বৃত্ত হালকা ও আরও স্বতন্ত্র দেখাতে পারে। দুটোই ঠিক আছে। একটি বেছে নিন এবং পুরো আইকন সেটে সামঞ্জস্য রাখুন।

Apple touch icon

iOS apple-touch-icon-এ নিজের গোলাকার কোণ যোগ করে (সাধারণ আকার 180x180)। আগে থেকে গোলাকার না করা পূর্ণ-ব্লিড বর্গ দিন, নইলে কোণে গাঢ় বা সাদা ফালি দেখা যেতে পারে।

Android ও PWA-এর জন্য ম্যাস্কেবল আইকন

ম্যাস্কেবল আইকন অপারেটিং সিস্টেম কেটে বৃত্ত, স্কুইর্কল বা অন্য আকৃতি দেয়। সব গুরুত্বপূর্ণ কনটেন্ট সেফ জোনের ভেতরে রাখুন: আইকনের কেন্দ্রে একটি বৃত্ত, যার ব্যাসার্ধ আইকনের প্রস্থের 40 শতাংশ। ব্যাকগ্রাউন্ডের রং একেবারে প্রান্ত পর্যন্ত বাড়ান, যাতে যেকোনো মাস্কেই ঠিক দেখায়। প্রান্ত-থেকে-প্রান্ত ঠাসা ট্যাব ফেভিকন ম্যাস্কেবল আইকন হিসেবে আবার ব্যবহার করবেন না, কারণ মাস্ক সেটি কেটে ফেলবে।

6. স্বচ্ছতা

ট্যাব ফেভিকনের জন্য স্বচ্ছতা ঠিক আছে, আর এর জন্যই শুধু গ্লিফের আইকন যেকোনো ট্যাব রঙে পরিচ্ছন্নভাবে বসে। কিন্তু Apple touch icon-এর ক্ষেত্রে এটি সমস্যা: iOS স্বচ্ছ অংশ একটি সলিড রঙে (সাধারণত কালো) ভরে দেয়, যা ডিজাইন নষ্ট করতে পারে। apple-touch-icon-কে সবসময় ব্র্যান্ডের রঙে অস্বচ্ছ ব্যাকগ্রাউন্ড দিন। ম্যাস্কেবল আইকন এবং Android হোম স্ক্রিনের বেশিরভাগ ব্যবহারের ক্ষেত্রেও একই কথা, যেখানে অস্বচ্ছ ব্যাকগ্রাউন্ড অনুমানযোগ্য ফল দেয়।

7. স্থিতিশীলতা: ঘন ঘন বদলাবেন না

ফেভিকন পুনরাবৃত্তির মাধ্যমে পরিচিতি গড়ে তোলে। ঘন ঘন বদলালে ব্যবহারকারীকে আবার শিখতে হয় কোন ট্যাবটি আপনার, এবং এতে প্রযুক্তিগত ঝামেলাও হয়। ব্রাউজার আক্রমণাত্মকভাবে ফেভিকন ক্যাশ করে, আর গুগল সেগুলো আপনার পেজ থেকে আলাদাভাবে সংগ্রহ ও সংরক্ষণ করে, তাই নতুন আইকন সার্চ ফলাফলে দেখাতে কয়েক দিন বা সপ্তাহ লাগতে পারে। গুগল আরও চায় স্থিতিশীল ফেভিকন URL, 48 পিক্সেলের গুণিতক আকারের আইকন (48x48, 96x96 ইত্যাদি) এবং ক্রল করা যায় এমন ফাইল (robots.txt দিয়ে ব্লক করা নয়)। ফেভিকন পরিবর্তনকে মৌসুমি সাজসজ্জা নয়, রিব্র্যান্ড-স্তরের সিদ্ধান্ত হিসেবে দেখুন।

8. নোটিফিকেশন অবস্থা ও ডাইনামিক ফেভিকন

কিছু ওয়েব অ্যাপ অপঠিত বার্তা, রেকর্ডিং স্ট্যাটাস বা ত্রুটি বোঝাতে ফেভিকন বদলায়। ঠিকভাবে করলে এটি সহায়ক; বাড়াবাড়ি হলে বিরক্তিকর।

• ছোট ব্যাজ ব্যবহার করুন (একটি বিন্দু বা ছোট সংখ্যা), কোণে বসিয়ে, পুরো নতুন ডিজাইন নয়। মূল আইকন যেন চেনা যায়।
• মিতব্যয়ী থাকুন। ব্যবহারকারীর পদক্ষেপ দরকার এমন ঘটনার জন্যই ব্যাজ রাখুন। আইকনকে একটানা অ্যানিমেট করবেন না।
• সংখ্যার সীমা দিন। 16x16 আকারে মাত্র এক বা দুটি অঙ্ক পড়া যায়; "137"-এর বদলে "9+" বা সাধারণ একটি বিন্দু দেখান।
• দ্রুত রিসেট করুন ব্যবহারকারী বিষয়টি সামলে নিলে এবং ডিফল্ট আইকন ফিরিয়ে আনুন।
• শুধু রঙের ওপর নির্ভর করবেন না। লাল বিন্দুর সঙ্গে পেজের শিরোনামও থাকা উচিত, যেমন "(3) Inbox", যাতে তথ্যটি সবার কাছে পৌঁছায়।

ডাইনামিক ফেভিকন সাধারণত ক্যানভাসে আঁকা হয় এবং আইকন লিংক এলিমেন্টের href আপডেট করে বদলানো হয়। আপডেটে থ্রটল দিন, কারণ ক্রমাগত ফেভিকন বদলালে CPU ব্যবহার হয় ও ব্যবহারকারীর মনোযোগ নষ্ট হয়।

9. পারফরম্যান্স

ফেভিকন ছোট, কিন্তু তবুও এগুলো এমন রিকোয়েস্ট যা খারাপভাবে করা যায়।

• ফাইল ছোট রাখুন। একটি PNG ফেভিকন সাধারণত কয়েকশ বাইট থেকে কয়েক কিলোবাইট। একটি সাধারণ SVG 1 KB-এর কম হতে পারে।
• ফুলে ওঠা ICO ফাইল এড়িয়ে চলুন। 16, 32 ও 48 পিক্সেলের ছবিসহ মাল্টি-সাইজ ICO যথেষ্ট। 256x256 ছবি ঢোকালে ফাইলের আকার বহুগুণ বাড়ে, অথচ ব্রাউজার ট্যাবে কোনো দৃশ্যমান লাভ হয় না।
• ক্যাশিং হেডার সেট করুন। আইকন দীর্ঘ Cache-Control মেয়াদে সরবরাহ করুন, যেমন public, max-age=31536000, immutable, এবং বদলানোর সময় সংস্করণযুক্ত বা হ্যাশড ফাইলের নাম ব্যবহার করুন।
• আইকন স্পষ্টভাবে ঘোষণা করুন। ব্রাউজার ডিফল্টভাবে /favicon.ico অনুরোধ করে, তাই অন্য আইকন ঘোষণা করলেও একটি দিন, যাতে লগে 404 বিশৃঙ্খলা না হয়।
• কম্প্রেস করুন। PNG লসলেস অপ্টিমাইজারে চালান এবং SVG মিনিফাই করুন।

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

একটি সোর্স ছবি থেকে এই সব ফাইল তৈরি করতে চাইলে MakeFav ফেভিকন জেনারেটর স্ট্যান্ডার্ড সেট তৈরি করে দেয়, আর ডেভেলপার পেজে ইন্টিগ্রেশনের বিকল্পগুলো আছে।

10. অ্যাক্সেসিবিলিটি

ফেভিকনের কোনো alt টেক্সট নেই এবং স্ক্রিন রিডার এটি পড়ে শোনায় না, তাই alt অ্যাট্রিবিউটের মতো প্রচলিত অ্যাক্সেসিবিলিটি টুল এখানে খাটে না। যা গুরুত্বপূর্ণ:

• পেজের শিরোনামই অর্থ বহন করে। অনন্য, বর্ণনামূলক <title> এলিমেন্ট লিখুন। অবস্থা বোঝাতে কখনও আইকনের ওপর নির্ভর করবেন না; যেকোনো ব্যাজ শিরোনামেও প্রতিফলিত করুন।
• কম দৃষ্টিশক্তির ব্যবহারকারীদের জন্য দৃশ্যমানতা। উচ্চ কনট্রাস্ট, গাঢ় আকৃতি ও বড় চিহ্ন তাঁদের সাহায্য করে যাঁরা দেখে দেখে ট্যাব খোঁজেন।
• রঙের ওপর নির্ভরহীনতা। অবস্থা আলাদা করতে শুধু রঙের ছটা নয়, আকৃতি বা অক্ষর ব্যবহার নিশ্চিত করুন।
• মনোযোগ কম নষ্ট করা। ঝলকানো বা অ্যানিমেটেড ফেভিকন এড়িয়ে চলুন, যা গতিতে সংবেদনশীল ব্যবহারকারীদের সমস্যা করতে পারে।

ফেভিকন UX চেকলিস্ট

টেস্টিং চেকলিস্ট

ডিজাইন টুলের বড় প্রিভিউকে বিশ্বাস করবেন না। বাস্তব আইকন বাস্তব পরিস্থিতিতে পরীক্ষা করুন:

1. একাধিক ব্রাউজার। Chrome, Firefox, Safari ও Edge পরীক্ষা করুন, কারণ প্রতিটি কিছুটা ভিন্নভাবে আইকন ও আকার বেছে নেয়।
2. হালকা ও ডার্ক মোড। OS ও ব্রাউজারের থিম বদলান এবং প্রতিবার ট্যাব স্ট্রিপ দেখুন।
3. রেটিনা ও সাধারণ ডিসপ্লে। 1x মনিটর এবং 2x বা 3x স্ক্রিনে দেখুন, আর ব্রাউজারে জুম করুন।
4. বুকমার্ক বার। পেজটি বুকমার্ক করুন এবং দেখুন অন্য সাইটের পাশে আইকনটি এখনও পড়ার যোগ্য কি না।
5. অনেক ট্যাব। 20টি ট্যাব খুলুন এবং দেখুন এক নজরে নিজেরটি খুঁজে পান কি না।
6. গুগল SERP প্রিভিউ। আইকন পুনরায় ক্রল হওয়ার পর মোবাইল সার্চ ফলাফল দেখুন। মনে রাখবেন আপডেট হতে সময় লাগতে পারে।
7. হোম স্ক্রিন। সাইটটি iOS ও Android হোম স্ক্রিনে যোগ করুন এবং নিশ্চিত করুন আইকন কাটা পড়েনি, কালো কোণ নেই এবং মাস্কের ভেতরে খুব ছোট নয়।
8. প্রযুক্তিগত পরীক্ষা। আপনার ডোমেইন MakeFav ফেভিকন চেকারে চালান, যাতে নিশ্চিত হয় ফাইলগুলো আছে, 200 স্ট্যাটাস ফেরত দেয়, সঠিক আকারের এবং HTML-এ ঠিকভাবে ঘোষিত।

একটি বাস্তবসম্মত ওয়ার্কফ্লো

1. আপনার লোগোমার্ক দিয়ে শুরু করুন এবং এটিকে একটি আকৃতি বা অক্ষরে সরল করুন।
2. সলিড বা আকৃতিযুক্ত ব্যাকগ্রাউন্ডসহ একটি বর্গ ক্যানভাস তৈরি করুন, যা উভয় থিমে কাজ করে।
3. 32x32 ও 16x16 আকার এক্সপোর্ট করুন এবং পিক্সেল এডিটরে ছোট সংস্করণটি হাতে পরিমার্জন করুন।
4. জেনারেটর দিয়ে পূর্ণ সেট (ICO, PNG, apple-touch-icon, ম্যানিফেস্ট আইকন) তৈরি করুন।
5. লিংক ট্যাগ যোগ করুন, ক্যাশ হেডার সেট করুন, ডিপ্লয় করুন এবং চেকার দিয়ে যাচাই করুন।

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

সচরাচর জিজ্ঞাসিত প্রশ্ন

ফেভিকনের আকার কত হওয়া উচিত?

ব্রাউজার ট্যাবের জন্য 16x16 ও 32x32 আকারে ডিজাইন করুন (হাই-ডেনসিটি ডিসপ্লেতে ব্রাউজার 32x32 ব্যবহার করে), iOS-এর জন্য 180x180 apple-touch-icon এবং Android ও PWA-এর জন্য 192x192 ও 512x512 PNG দিন। গুগল সার্চ ফলাফলের জন্য 48x48 বা 96x96-এর মতো 48 পিক্সেলের গুণিতক আকারের বর্গ আইকন ব্যবহার করুন। একটি SVG সোর্স এগুলোর সবকটিতেই স্কেল করা যায়।

আমার পূর্ণ লোগো কি ফেভিকন হিসেবে ব্যবহার করব?

সাধারণত না। ওয়ার্ডমার্কসহ পূর্ণ লোগো বর্গাকার 16x16 আইকনের জন্য বেশি বিস্তারিত ও বেশি চওড়া। লোগোমার্ক বা এক-দুটি অক্ষরের মনোগ্রাম ব্যবহার করুন এবং সেটি সরল করুন, যাতে ছোট হলেও চেনা যায়।

ডার্ক মোডে ফেভিকন কীভাবে কাজ করাব?

সবচেয়ে নিরাপদ উপায় হলো আইকনকে নিজস্ব সলিড ব্যাকগ্রাউন্ড আকৃতি বা বিপরীতধর্মী আউটলাইন দেওয়া, যাতে এটি ট্যাবের রঙের ওপর নির্ভর না করে। বিকল্প হিসেবে রং বদলাতে prefers-color-scheme মিডিয়া কোয়েরিসহ SVG ফেভিকন ব্যবহার করুন এবং SVG আইকন সমর্থন করে না এমন ব্রাউজারের জন্য PNG বা ICO ফলব্যাক রাখুন। সবসময় হালকা ও গাঢ় উভয় থিমে পরীক্ষা করুন।

আমার নতুন ফেভিকন কেন দেখা যাচ্ছে না?

ব্রাউজার ফেভিকন অনেক দিন ক্যাশ করে রাখে, আর গুগল নিজস্ব কপি সংরক্ষণ করে এবং নিজের সময়সূচিতে হালনাগাদ করে, যাতে প্রায়ই কয়েক দিন বা সপ্তাহ লাগে। পেজ হার্ড-রিফ্রেশ করুন, ব্রাউজার ক্যাশ মুছুন, নতুন সংস্করণযুক্ত ফাইলের নাম ব্যবহার করুন এবং নিশ্চিত করুন লিংক ট্যাগ ও রুটের /favicon.ico সঠিক ফাইলের দিকে নির্দেশ করছে। সেটআপ MakeFav চেকার দিয়ে যাচাই করতে পারেন।

ফেভিকনে নোটিফিকেশন ব্যাজ দেখানো কি ভালো ধারণা?

হ্যাঁ, মিতভাবে ব্যবহার করলে। একটি ছোট বিন্দু বা এক-দুই অঙ্কের সংখ্যা ব্যবহারকারীকে পদক্ষেপ দরকার এমন কিছু লক্ষ করতে সাহায্য করে, কিন্তু ক্রমাগত অ্যানিমেশন বা বড় সংখ্যা পাঠযোগ্যতা ও মনোযোগ নষ্ট করে। অবস্থাটি সবসময় পেজের শিরোনামেও প্রতিফলিত করুন, বিষয়টি সামলানো হলে ডিফল্ট আইকন ফিরিয়ে আনুন এবং শুধু রঙের ওপর নির্ভর করবেন না।