২০২৬ সালে কোন ফেভিকন সাইজ দরকার? আদর্শ সেট

২০২৬ সালে আদর্শ ফেভিকন সেট হলো: ১৬, ৩২ ও ৪৮ px ছবিসহ একটি favicon.ico, একটি ৯৬x৯৬ PNG (Google Search-এর জন্য), ঐচ্ছিক একটি SVG ফেভিকন, একটি ১৮০x১৮০ apple-touch-icon.png, এবং web app manifest-এ ঘোষিত ১৯২x১৯২ ও ৫১২x৫১২ PNG (সঙ্গে একটি maskable ৫১২)। Windows টাইল ও পুরোনো Apple সাইজ শুধু তখনই লাগে, যখন আপনাকে খুব পুরোনো ডিভাইস সাপোর্ট করতে হয়। নিচে এর কারণ ব্যাখ্যা করা হয়েছে, সঙ্গে আছে সাইজের তালিকা, ব্যবহারের জন্য তৈরি HTML এবং এড়িয়ে চলার মতো সাধারণ ভুল।

ফেভিকনের জগৎ আগে বেশ এলোমেলো ছিল: প্রতিটি ব্রাউজার ও অপারেটিং সিস্টেম নিজের মতো আলাদা সাইজ চাইত, যার ফলে ২০ লাইনের কুখ্যাত <head> ব্লক তৈরি হতো। আজ তার বেশিরভাগই অচল। আধুনিক ব্রাউজার একটি ভালো আইকনকেই স্কেল করে নেয়, iOS একটি সাইজ চায়, আর Android manifest পড়ে। এই লেখায় আলাদা করে দেখানো হয়েছে কোনটি সত্যিই দরকার আর কোনটি থাকলে ভালো।

সংক্ষিপ্ত উত্তর: ফেভিকন ফাইলের আদর্শ সেট

• সাইটের রুটে favicon.ico (এক ফাইলে ১৬, ৩২, ৪৮ px)। ব্রাউজার, ফিড রিডার এবং অনেক টুল এখনো স্বয়ংক্রিয়ভাবে /favicon.ico অনুরোধ করে।
• যেকোনো সাইজে স্পষ্ট রেন্ডারিং ও ডার্ক মোড সাপোর্টের জন্য favicon.svg (ঐচ্ছিক, তবে প্রস্তাবিত)।
• স্পষ্ট ফলব্যাক হিসেবে PNG ১৬x১৬, ৩২x৩২ ও ৯৬x৯৬। ৯৬ px সংস্করণ Google Search-এর জন্য সহায়ক, কারণ Google ৪৮ px-এর গুণিতক চায়।
• ১৮০x১৮০ সাইজের apple-touch-icon.png, অস্বচ্ছ (opaque), কোনো স্বচ্ছতা ছাড়া।
• manifest.json-এ ১৯২x১৯২ ও ৫১২x৫১২ PNG, সঙ্গে Android-এর জন্য একটি maskable ৫১২x৫১২ আইকন।
• মোবাইলে ব্রাউজার UI-তে রং দেওয়ার জন্য theme-color meta ট্যাগ।
• browserconfig.xml-সহ Windows টাইল (৭০, ১৫০, ৩১০ px) শুধু পুরোনো Windows এবং IE11-এ পিন করা সাইটের জন্য।

ফেভিকন সাইজের তালিকা: উদ্দেশ্য, ফাইলের নাম ও অগ্রাধিকার

এই তালিকাটি চেকলিস্ট হিসেবে ব্যবহার করুন। "Required" মানে এটি ছাড়া একটি সাধারণ সাইট ভাঙা বা অসমাপ্ত দেখাবে; "Recommended" মানে মান স্পষ্টভাবে বাড়ে; "Optional" মানে বিশেষ বা পুরোনো ব্যবহারের জন্য।

favicon.ico: এক ফাইলে ১৬, ৩২ ও ৪৮ px

ICO ফাইল হলো একটি কন্টেইনার, যার ভেতরে একাধিক বিটম্যাপ থাকে। একটি ভালো favicon.ico-তে ১৬x১৬, ৩২x৩২ ও ৪৮x৪৮ ছবি থাকে, যাতে ব্রাউজার বা OS সবচেয়ে কাছের মাপটি বেছে নিতে পারে। এটি আপনার ডোমেইনের রুটে রাখুন (https://example.com/favicon.ico)। আপনার HTML অন্য কোথাও নির্দেশ করলেও অনেক ক্রলার, RSS রিডার ও পুরোনো ব্রাউজার ঠিক এই URL-ই অনুরোধ করে, তাই এটি থাকলে লগে 404 এর উৎপাত এড়ানো যায়।

শুধু একটি PNG-র নাম পাল্টে .ico করে দেবেন না। বেশিরভাগ ব্রাউজার তা মেনে নেয়, কিন্তু কিছু টুল প্রত্যাখ্যান করে এবং মাল্টি-রেজোলিউশনের সুবিধাও হারায়। একটি আসল ICO এক্সপোর্ট করুন।

PNG ফেভিকন: ১৬, ৩২ ও ৯৬ px

স্পষ্ট sizes-সহ PNG লিংক দিলে ব্রাউজার ICO পার্স না করেই সেরা বিটম্যাপটি বেছে নিতে পারে। বাস্তবে ৩২x৩২ হাই-DPI ট্যাবের জন্য যথেষ্ট, আর ১৬x১৬ আজকাল প্রায় অপ্রয়োজনীয়। ৯৬x৯৬ সাইজ যোগ করা সার্থক, কারণ Google Search ফলাফলের পাশে ফেভিকন দেখায় এবং এমন একটি বর্গাকার আইকন চায় যার সাইজ ৪৮ px-এর গুণিতক (৪৮x৪৮, ৯৬x৯৬, ১৪৪x১৪৪ ইত্যাদি)। মোবাইল ফলাফলের জন্য ছোট করার সময় ৪৮ px ফাইলের চেয়ে ৯৬ px ফাইল Google-কে আরও স্পষ্ট উৎস দেয়।

ডিজাইন টিপ: ১৬ px-এ সূক্ষ্ম খুঁটিনাটি হারিয়ে যায়। মোটা ও সরল আকৃতি, উচ্চ কনট্রাস্ট এবং খুব কম বা কোনো লেখা না রাখুন। এক্সপোর্টের আগে MakeFav এডিটরে আপনার আইকন পরিবর্তন ও প্রিভিউ করতে পারেন।

SVG ফেভিকন ও ডার্ক মোড

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

সবচেয়ে বড় সুবিধা হলো থিমিং। SVG-তে CSS থাকতে পারে বলে prefers-color-scheme দিয়ে ব্যবহারকারীর কালার স্কিম অনুযায়ী আইকন বদলানো যায়:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

মনে রাখবেন, এই মিডিয়া কোয়েরি ব্রাউজার বা OS-এর থিম প্রতিফলিত করে, যা ট্যাব বার ব্যবহার করে। এটি আপনার নিজের ওয়েবসাইটের থিম টগল অনুসরণ করে না।

একটি পরিচিত ঝামেলা: ICO ও SVG দুটোই তালিকাভুক্ত থাকলে Chrome ICO বেছে নিতে পারে। ICO-কে sizes="32x32" দিয়ে ঘোষণা করে তারপর SVG তালিকাভুক্ত করলে Chrome SVG-কে প্রাধান্য দেয়, যেমনটি নিচের কোডে দেখানো হয়েছে।

Apple touch icon: ১৮০x১৮০ ও পুরোনো সাইজ

কোনো ব্যবহারকারী আপনার সাইট iOS বা iPadOS হোম স্ক্রিনে যোগ করলে Safari apple-touch-icon ব্যবহার করে। আজ একটিমাত্র ১৮০x১৮০ px PNG-ই যথেষ্ট: iOS এটিকে পুরোনো ডিভাইস ও iPad-এর জন্য ছোট করে নেয়। এর নাম দিন apple-touch-icon.png এবং রুটে রাখুন; কোনো লিংক ট্যাগ না থাকলে iOS ডিফল্টভাবে ঐ ফাইলটিই খোঁজে।

Apple আইকনের নিয়ম:

• স্বচ্ছতা নয়। iOS স্বচ্ছ পিক্সেলকে কালো দিয়ে ভরে দেয়, ফলে স্বচ্ছ লোগো প্রায়ই কালো দাগে পরিণত হয়। একটি নিরেট ব্যাকগ্রাউন্ড রং যোগ করুন।
• গোলাকার কোণ নয়। iOS নিজের গোলাকার মাস্ক প্রয়োগ করে। পূর্ণ বর্গ সরবরাহ করুন।
• গুরুত্বপূর্ণ কনটেন্ট একেবারে কিনারা থেকে দূরে রাখুন, কারণ কোণগুলো কেটে যায়।

পুরোনো সাইজ (৫৭, ৭২, ৭৬, ১১৪, ১২০, ১৪৪, ১৫২, ১৬৭) কখন লাগে? শুধু যদি আপনি iOS 6 বা তার আগের সংস্করণ সাপোর্ট করেন, অথবা iPad Pro (১৬৭ px) ও iPad (১৫২ px)-এর জন্য ডিভাইস-ভিত্তিক সঠিক পিক্সেল নিয়ন্ত্রণ চান। ২০২৬ সালে প্রায় সব সাইটের জন্য শুধু ১৮০x১৮০ ফাইলই যথেষ্ট। নিচের সর্বোচ্চ-সামঞ্জস্য সেটআপে পূর্ণতার জন্য কয়েকটি রাখা হয়েছে।

Android ও PWA আইকন: ১৯২, ৫১২ ও maskable

Android-এ Chrome এবং PWA-সক্ষম অন্য ব্রাউজার আইকন পড়ে web app manifest থেকে, <link rel="icon"> থেকে নয়। ইনস্টলযোগ্য হওয়ার জন্য অন্তত একটি ১৯২x১৯২ ও একটি ৫১২x৫১২ PNG লাগবে। ১৯২ px আইকন হোম স্ক্রিন ও অ্যাপ লঞ্চারে ব্যবহৃত হয়; ৫১২ px আইকন স্প্ল্যাশ স্ক্রিন ও ইনস্টল ডায়ালগে দেখা যায়।

Maskable আইকন ও সেফ জোন

Android অ্যাডাপটিভ আইকন ডিভাইস অনুযায়ী বৃত্ত, squircle বা অন্য আকৃতিতে কাটা হতে পারে। একটি maskable আইকন নিরাপদে কাটার জন্য ডিজাইন করা হয়: গুরুত্বপূর্ণ কনটেন্ট থাকতে হবে সেফ জোনের ভেতরে, অর্থাৎ ছবির ৮০% ব্যাসের একটি কেন্দ্রীয় বৃত্তে (ব্যাসার্ধ বাহুর ৪০%)। ৫১২x৫১২ ফাইলের ক্ষেত্রে এর মানে আপনার লোগো প্রায় ৪১০ px ব্যাসের বৃত্তের মধ্যে রাখা, আর ব্যাকগ্রাউন্ড রং চারটি কিনারা পর্যন্ত বাড়িয়ে দেওয়া, যাতে মাস্কিংয়ের পর কোনো ফাঁক না দেখা যায়।

Maskable আইকনকে "purpose": "maskable" দিয়ে আলাদা এন্ট্রি হিসেবে ঘোষণা করুন। একই ফাইলে "any maskable" দেবেন না: মাস্কিংয়ের জন্য প্রয়োজনীয় প্যাডিং আইকন মাস্ক ছাড়া দেখালে খুব ছোট দেখায়।

manifest.json-এর উদাহরণ

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

ফাইলটি application/manifest+json (বা application/json) হিসেবে সার্ভ করুন এবং প্রতিটি পেজ থেকে <link rel="manifest" href="/manifest.json"> দিয়ে লিংক করুন। কিছু প্রজেক্ট এর নাম দেয় site.webmanifest; নামে কিছু আসে যায় না, লিংকটাই আসল।

Windows টাইল ও browserconfig.xml

Windows 8.1 ও 10-এ ব্যবহারকারীরা সাইট Start মেনুতে পিন করতে পারেন, এবং IE11 ও পুরোনো Edge browserconfig.xml থেকে টাইলের ছবি পড়ে। সাধারণ সাইজগুলো হলো ৭০x৭০ (ছোট), ১৫০x১৫০ (মাঝারি), ৩১০x১৫০ (চওড়া) এবং ৩১০x৩১০ (বড়)। Chromium-ভিত্তিক Edge এর বদলে manifest ও সাধারণ ফেভিকন ব্যবহার করে, তাই এটি একটি পুরোনো ফিচার। আপনার দর্শকদের মধ্যে এখনো পুরোনো Windows সেটআপ থাকলে, যেমন কর্পোরেট পরিবেশে, তখনই কেবল এটি যোগ করুন।

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: ব্রাউজার UI-তে রং দেওয়া

theme-color meta ট্যাগ মোবাইল ব্রাউজারকে (এবং কিছু ডেস্কটপ ব্রাউজারকে) জানায় অ্যাড্রেস বার বা টাইটেল বারে কোন রং ব্যবহার করতে হবে। এটি ফেভিকন নয়, তবে একই ব্র্যান্ডিং সেটের অংশ। লাইট ও ডার্ক মোডের জন্য আলাদা মান দিতে পারেন:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

ন্যূনতম আধুনিক সেটআপ বনাম সর্বোচ্চ সামঞ্জস্য

ন্যূনতম আধুনিক সেটআপ (বেশিরভাগ সাইটের জন্য প্রস্তাবিত)

পাঁচটি ফাইল বাস্তব ব্যবহারের ৯৯%-এরও বেশি কভার করে: favicon.ico, favicon.svg, apple-touch-icon.png (১৮০x১৮০) এবং দুটি manifest আইকন (১৯২ ও ৫১২)। Google Search-এ দৃশ্যমানতা গুরুত্বপূর্ণ হলে ৯৬x৯৬ PNG যোগ করুন, আর PWA প্রকাশ করলে একটি maskable আইকন যোগ করুন।

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

সর্বোচ্চ সামঞ্জস্যের সেটআপ

বিস্তৃত বা এন্টারপ্রাইজ দর্শকদের জন্য, অথবা সম্ভাব্য প্রতিটি ক্লায়েন্ট কভার করতে চাইলে এটি বেছে নিন। এতে স্পষ্ট PNG সাইজ, পুরোনো Apple সাইজ, Windows টাইল এবং থিম রং যোগ হয়।

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

লক্ষ্য করুন / দিয়ে শুরু হওয়া রুট-রিলেটিভ পাথগুলো। এগুলো যেকোনো পেজ গভীরতায় কাজ করে, আর এখান থেকেই আসে সবচেয়ে সাধারণ ভুলগুলোর কথা।

ফেভিকনের সাধারণ ভুল ও সেগুলো ঠিক করার উপায়

১. ভুল পাথ

href="favicon.ico"-এর মতো লিংক বর্তমান URL-এর সাপেক্ষে রিজলভ হয়, তাই এটি /-এ কাজ করে কিন্তু /blog/post/-এ ভেঙে যায়। রুট-রিলেটিভ (/favicon.ico) বা অ্যাবসোলিউট URL ব্যবহার করুন। ফাইলগুলো সত্যিই আছে কি না তাও যাচাই করুন: প্রতিটি URL সরাসরি ব্রাউজারে খুলে নিশ্চিত হন যে এটি HTTP 200 ফেরত দিচ্ছে, 404 পেজ বা লগইন পেজে রিডাইরেক্ট করছে না।

২. sizes অ্যাট্রিবিউট নেই বা ভুল

sizes না থাকলে ব্রাউজারকে আইকন পরীক্ষা করার জন্য ডাউনলোড করতে হয়, এবং ভুল আইকনও বেছে নিতে পারে। PNG লিংকে সবসময় sizes ঘোষণা করুন এবং তা আসল পিক্সেল মাপের সঙ্গে মিলিয়ে নিন। 32x32 লেবেল করা ফাইল আসলে ৬৪x৬৪ হলে অসামঞ্জস্যপূর্ণ ফল হয়।

৩. আক্রমণাত্মক ক্যাশিং

ব্রাউজার ফেভিকন অনেকক্ষণ ক্যাশ করে রাখে, প্রায়ই পেজ ক্যাশ থেকে আলাদাভাবে। রিব্র্যান্ডের পর পুরোনো আইকন কয়েক দিন থেকে যেতে পারে। ফাইলের নাম বদলান বা একটি ভার্সন কোয়েরি স্ট্রিং যোগ করুন (/favicon.ico?v=2) এবং লিংক ট্যাগ আপডেট করুন। হার্ড রিলোডে ট্যাব আইকন প্রায়ই রিফ্রেশ হয় না; আইকনের URL সরাসরি খুলে রিলোড করলে সাধারণত হয়।

৪. অবর্গাকার ছবি

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

৫. স্বচ্ছ Apple touch icon কালো হয়ে যাওয়া

iOS স্বচ্ছতা কালো দিয়ে ভরে দেয়। ১৮০x১৮০ আইকনে অস্বচ্ছ ব্যাকগ্রাউন্ড দিন এবং কোণ আগে থেকে গোল করবেন না।

৬. সেফ জোন ছাড়া maskable আইকন

লোগো maskable আইকনের কিনারা ছুঁয়ে থাকলে Android তা কেটে ফেলবে। এটি কেন্দ্রীয় ৮০% বৃত্তের ভেতরে রাখুন এবং পুরো ক্যানভাস ব্যাকগ্রাউন্ড রং দিয়ে ভরে দিন।

৭. ক্রলারদের জন্য আইকন ব্লক করা

robots.txt আপনার ফেভিকন পাথ disallow করলে Google সেটি আনতে পারে না এবং সার্চ ফলাফলে সাধারণ গ্লোব আইকন দেখায়। এও মনে রাখুন যে Google-এর ফেভিকন পেজের একই হোস্টে থাকতে হয় এবং তা মাঝেমধ্যে রিফ্রেশ হয়, তাই পরিবর্তন দেখাতে কয়েক দিন বা সপ্তাহ লাগতে পারে।

৮. manifest লিংক বা purpose ভুলে যাওয়া

লিংক না করা manifest, বা যেটিতে ১৯২ ও ৫১২ px আইকন নেই, Chrome-এ ইনস্টল প্রম্পট আটকে দেয়। ব্রাউজারের ডেভেলপার টুলসে Application ট্যাবে এটি যাচাই করুন।

এক ক্লিকে পুরো সেট তৈরি করুন

ইমেজ এডিটরে হাতে এক ডজন ফাইল বানানো, তারপর ICO-তে রূপান্তর এবং manifest লেখা বিরক্তিকর ও ভুলপ্রবণ। MakeFav একটিমাত্র ছবি, টেক্সট বা ইমোজি থেকে উপরের সব ফাইল তৈরি করে: মাল্টি-সাইজ favicon.ico, PNG, SVG, Apple touch icon, ১৯২/৫১২ PNG, একটি maskable আইকন, Windows টাইল, manifest.json ও browserconfig.xml, সঙ্গে পেস্ট করার জন্য তৈরি একটি HTML স্নিপেট, সবই একটি ZIP ডাউনলোডে। এডিটরে ব্যাকগ্রাউন্ড, প্যাডিং ও আকৃতি ঠিক করতে পারেন, ফেভিকন চেকার দিয়ে বিদ্যমান সাইট যাচাই করতে পারেন, এবং ডেভেলপার রিসোর্স দিয়ে তৈরির কাজ স্বয়ংক্রিয় করতে পারেন।

ডিপ্লয়মেন্ট চেকলিস্ট

1. সব ফাইল আপনার সাইটের রুটে আপলোড করুন।
2. HTML স্নিপেটটি প্রতিটি পেজের <head>-এ (বা আপনার শেয়ার্ড লেআউটে) পেস্ট করুন।
3. নিশ্চিত করুন পাথগুলো রুট-রিলেটিভ এবং HTTP 200 ফেরত দেয়।
4. লাইট ও ডার্ক মোড, iOS হোম স্ক্রিন ইনস্টল এবং Android ইনস্টল পরীক্ষা করুন।
5. সাইজ বাদ পড়ে থাকা বা না মেলা ধরতে চেকার চালান।
6. পুরোনো আইকন বদলালে ভার্সন স্ট্রিং দিয়ে ক্যাশ ভেঙে দিন।

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

২০২৬ সালেও কি favicon.ico দরকার?

হ্যাঁ। আধুনিক ব্রাউজার PNG ও SVG গ্রহণ করলেও অনেক ক্রলার, ফিড রিডার, ইমেইল ক্লায়েন্ট ও পুরোনো ব্রাউজার এখনো সরাসরি /favicon.ico অনুরোধ করে। ১৬, ৩২ ও ৪৮ px ছবিসহ একটি মাল্টি-সাইজ ICO ছোট ফাইল, যা আইকন হারানো ও 404 ত্রুটি রোধ করে।

Google Search-এর জন্য ফেভিকনের সাইজ কত হওয়া উচিত?

Google এমন একটি বর্গাকার ফেভিকন চায় যার সাইজ ৪৮ px-এর গুণিতক, অন্তত ৪৮x৪৮। ৯৬x৯৬ PNG একটি নিরাপদ পছন্দ, এবং SVG-ও সাপোর্টেড। Google-এর জন্য ফাইলটি ক্রলযোগ্যও হতে হবে, তাই robots.txt-এ ব্লক করবেন না। আপডেট দেখাতে কয়েক দিন বা সপ্তাহ লাগতে পারে।

Apple touch icon-এর জন্য ১৮০x১৮০ কি যথেষ্ট?

প্রায় সব সাইটের জন্য, হ্যাঁ। iOS ও iPadOS প্রতিটি বর্তমান ডিভাইসের জন্য ১৮০x১৮০ PNG ছোট করে নেয়। পুরোনো সাইজগুলো (৫৭ থেকে ১৫২ px) শুধু খুব পুরোনো iOS সংস্করণের জন্য গুরুত্বপূর্ণ। আইকন যেন কালো না হয়ে যায় সেজন্য অস্বচ্ছ ব্যাকগ্রাউন্ড ব্যবহার করতে ভুলবেন না।

Maskable আইকন কী এবং এটি কি আমার দরকার?

Maskable আইকন হলো Android-এর অ্যাডাপটিভ আইকন আকৃতির জন্য ডিজাইন করা একটি ৫১২x৫১২ PNG। এর গুরুত্বপূর্ণ কনটেন্ট থাকে কেন্দ্রের ৮০% ব্যাসের একটি বৃত্তের ভেতরে, আর ব্যাকগ্রাউন্ড পুরো বর্গ ভরে রাখে। এটি শুধু তখনই লাগে যখন আপনি ইনস্টলযোগ্য PWA দেন, তবে এটি আইকনকে সাদা বৃত্তের ভেতরে বসে থাকার বদলে নেটিভের মতো দেখায়।

ফেভিকন বদলানোর পরও পুরোনোটা কেন দেখাচ্ছে?

ব্রাউজার ফেভিকন আলাদাভাবে এবং অনেকক্ষণ ক্যাশ করে রাখে। ফাইলের নাম বদলান বা ?v=2-এর মতো ভার্সন কোয়েরি স্ট্রিং যোগ করুন, লিংক ট্যাগ আপডেট করুন, তারপর আইকনের URL সরাসরি খুলে রিলোড করুন। সার্চ ইঞ্জিনের নিজস্ব কপি রিফ্রেশ হতে আরও বেশি সময় লাগতে পারে।