ওয়েবসাইটের জন্য সেরা ফেভিকন সাইজ

একটি favicon অনেক ফিজিক্যাল পিক্সেলে স্কেল করা হয়: একটি ট্যাবে 16×16, একটি রেটিনা বুকমার্ক বারে 32×32, একটি iPhone হোম স্ক্রিনে 180×180, একটি PWA স্প্ল্যাশ স্ক্রিনে 512×512৷ একটি ইমেজ তাদের সব ভাল পরিবেশন করতে পারে না.

একটি ক্ষুদ্র উৎসকে আপস্কেল করা অস্পষ্টতা তৈরি করে। পরীক্ষা ছাড়াই একটি বিস্তারিত 1024×1024 ডাউনস্কেল করলে সূক্ষ্ম রেখা হারায়। সমাধান হল উদ্দেশ্য-নির্মিত রপ্তানির একটি ছোট সেট, অথবা একটি বহু-আকারের .ico যা সাধারণ ডেস্কটপ ফ্রেমগুলিকে এম্বেড করে৷

পুরানো ব্লগ পোস্টে তালিকাভুক্ত প্রতিটি আকার শিপিং অযথা. খুব কম শিপিং একটি প্ল্যাটফর্মে একটি দৃশ্যমান ফাঁক ছেড়ে দেয়। নীচের ম্যাট্রিক্সটি 2026 ব্রাউজারে পরিমাপ করা বাস্তব অনুরোধগুলিকে প্রতিফলিত করে৷

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 CSS পিক্সেল আইকন রেন্ডার করে, যা ডিসপ্লের ঘনত্বের উপর নির্ভর করে 16×16 বা 32×32 ডিভাইস পিক্সেলে ম্যাপ করে।

বুকমার্ক বার এবং পিন করা ট্যাবগুলি প্রায়ই 32×32 বা 48×48 ব্যবহার করে। Chromium স্বয়ংক্রিয়ভাবে favicon.ico থেকে সবচেয়ে কাছের এমবেডেড ফ্রেম বেছে নিতে পারে।

তিনটি সাধারণ ট্যাব মাপ (16, 32, 48) একটি একক মাল্টি-আকার .ico এর ভিতরে আরামদায়কভাবে ফিট করে। এই কারণেই .ico কন্টেইনারটি সবচেয়ে কার্যকর ডেস্কটপ ডেলিভারি বিন্যাস হিসেবে রয়ে গেছে।

Windows স্টার্ট মেনু, টাস্কবার পিন এবং ফাইল এক্সপ্লোরার শর্টকাটগুলি প্রসঙ্গ এবং ডিসপ্লে স্কেলিং এর উপর নির্ভর করে 24×24, 32×32, 48×48, 64×64, 128×128, বা 256×256 অনুরোধ করতে পারে।

Windows অ্যাপের ব্যবহারিক সেট হিসেবে Microsoft নথিপত্র 16, 24, 32, 48, 64, 128, এবং 256। ওয়েব favicons favicon.ico-এ কমপক্ষে 16 থেকে 256 পর্যন্ত বান্ডলিং করে উপকৃত হয়।

macOS নেটিভ অ্যাপ্লিকেশানগুলির জন্য .icns পছন্দ করে কিন্তু ওয়েব শর্টকাটের জন্য .ico এবং PNG আনন্দের সাথে ব্যবহার করে৷ iOS হোম-স্ক্রীন আইকনগুলির জন্য .ico উপেক্ষা করে এবং অ্যাপল-টাচ-আইকনের মাধ্যমে একটি ডেডিকেটেড 180×180 PNG চায়৷

ওয়েব অ্যাপ ম্যানিফেস্টের জন্য যে কোনো এবং ঐচ্ছিকভাবে মাস্কযোগ্য উদ্দেশ্য সহ আইকন প্রয়োজন। সাধারণ মাপ হল 192×192 এবং 512×512 PNG।

Android Chrome UI এবং স্প্ল্যাশ স্ক্রীন ইনস্টল করার জন্য ম্যানিফেস্ট আইকন ব্যবহার করে। একটি 512×512 উত্স পরিষ্কারভাবে ডাউনস্কেল করে; একটি 192×192-শুধুমাত্র ম্যানিফেস্ট হাই-এন্ড ফোনে নরম দেখায়।

iOS হোম-স্ক্রীন বসানোর জন্য ম্যানিফেস্ট আইকন পড়ে না। আপনাকে অবশ্যই <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> ঘোষণা করতে হবে।

16×16 — ব্রাউজার ট্যাব (1× ঘনত্ব)। 32×32 — রেটিনা ডিসপ্লেতে ট্যাব এবং বুকমার্ক। 48×48 — কিছু Windows UI প্রসঙ্গ এবং লিগ্যাসি বুকমার্ক ব্যবহার।

64×64 এবং 128×128 — উচ্চ স্কেলিং এ Windows শর্টকাট। 256×256 — Windows পিন করা টাইলস এবং উচ্চ-DPI পূর্বরূপ।

180×180 — অ্যাপল-টাচ-আইকন (iOS / iPadOS)। 192×192 এবং 512×512 — Android এর জন্য PWA ম্যানিফেস্ট আইকন এবং প্রম্পট ইনস্টল করুন।

ব্যক্তিগত ব্লগ: favicon.ico শুধুমাত্র 16/32/48 সহ। আপনি যদি iOS হোম-স্ক্রিন পলিশের বিষয়ে যত্ন না করেন তবে গ্রহণযোগ্য।

কোম্পানির বিপণন সাইট: স্পষ্ট রেটিনা ট্যাবের জন্য .ico বান্ডিল প্লাস 180×180 অ্যাপল-টাচ-আইকন প্লাস 32×32 PNG <link>।

ইনস্টলযোগ্য PWA: সম্পূর্ণ .ico, অ্যাপল-টাচ-আইকন, ম্যানিফেস্ট 192 + 512, স্কেলযোগ্য UI ক্রোমের জন্য ঐচ্ছিক SVG।

ইলেক্ট্রন ডেস্কটপ অ্যাপ: Windows .ico 16-256 সহ; macOS .icns আলাদাভাবে যদি আপনি ব্রাউজারের বাইরে বিতরণ করেন।

/favicon.ico-এ মাল্টি-সাইজ favicon.ico (16, 32, 48, 64, 128, 256)।

iOS হোম স্ক্রিনের জন্য 180×180 এ apple-touch-icon.png।

Android সারফেস ইনস্টল করার জন্য site.webmanifest-এ একটি 512×512 PNG।

এই ত্রয়ী প্রায় 95% বাস্তব-বিশ্বের আইকন অনুরোধগুলি কভার করে৷ আপনি যখন আধুনিক ট্যাবে অসীম স্কেলিং এবং অন্ধকার-মোড স্টাইলিং চান তখন SVG যোগ করুন।

আমার কি 16×16 PNG দরকার যদি এটি .ico এর ভিতরে থাকে? না, যদি না আপনি ডিবাগিংয়ের জন্য একটি স্পষ্ট <link rel="icon" sizes="16x16"> চান।

120×120 কি এখনও প্রয়োজন? এটি একটি পুরানো iOS আকার ছিল। আধুনিক Safari 180×180 আশা করে।

64×64 favicon সম্পর্কে কি? Windows এর জন্য .ico এর ভিতরে দরকারী; একটি স্বতন্ত্র PNG হিসাবে খুব কমই প্রয়োজন।

আমি কি 256×256 এড়িয়ে যেতে পারি? শুধুমাত্র যদি আপনি Windows হাই-ডিপিআই শর্টকাট প্রিভিউ সম্পর্কে চিন্তা না করেন। বেশিরভাগ দল এটি অন্তর্ভুক্ত করে।

iOS আইকনের গোলাকার কোণ রয়েছে এবং এটি ক্রপ করা দেখায়: এটি হল iOS মাস্কিং - নিরাপদ প্যাডিং সহ ডিজাইন, আপনার ফাইলে একটি বাগ নয়।

PWA ইন্সটল একটি জেনেরিক আইকন দেখায়: ম্যানিফেস্ট আইকন অনুপস্থিত বা সর্বনিম্ন 192×192 এর নিচে। Chrome DevTools → অ্যাপ্লিকেশন দিয়ে JSON যাচাই করুন।

রেটিনা ম্যাকে ট্যাব আইকন নরম: নিশ্চিত করুন যে favicon.ico-এ একটি 32×32 ফ্রেম রয়েছে, শুধুমাত্র 16×16 নয়৷

বিশাল .ico ডাউনলোড: আপনি আনকমপ্রেসড 256×256 BMP এম্বেড করেছেন। কনটেইনারের ভিতরে PNG কম্প্রেশন দিয়ে পুনর্নির্মাণ করুন।

CSS পিক্সেল শারীরিক পিক্সেল নয়। একটি 2× ডিসপ্লেতে একটি 16×16 ট্যাব স্লট প্রায়শই তীক্ষ্ণতার জন্য একটি 32×32 বিটম্যাপ লোড করে।

এই কারণেই 16 এবং 32 উভয় ফ্রেমের মধ্যে একটি favicon.ico রেটিনা ম্যাকবুক এবং উচ্চ-DPI Windows ল্যাপটপে একটি একক 16×16 PNG কে ছাড়িয়ে যায়।

Android PWAs সম্পূর্ণ ডিভাইস রেজোলিউশনে স্প্ল্যাশ স্ক্রিনে ম্যানিফেস্ট আইকনগুলি প্রদর্শন করে — একটি 1440p ফোনে প্রসারিত একটি 192×192 উত্স নরম দেখায়; 512×512 ডাউনস্কেল পরিষ্কারভাবে।

iOS অ্যাপল-টাচ-আইকন সম্পদে নিজস্ব মাস্ক এবং কোণার ব্যাসার্ধ প্রয়োগ করে। নিরাপদ প্যাডিং সহ ডিজাইন করুন যাতে গুরুত্বপূর্ণ প্রান্তগুলি কাঠবিড়ালি দ্বারা ক্লিপ করা হয় না।

পরীক্ষা করার সময়, 100% ব্রাউজার জুম এবং 200% OS স্কেলিং-এ ট্যাবটি স্ক্রিনশট করুন। যদি উভয়ই খাস্তা দেখায়, আপনার আকারের ম্যাট্রিক্স সম্ভবত সঠিক।

favicon.ico ডাউনলোড করুন এবং এটিকে একটি টুলে খুলুন যা এমবেডেড ফ্রেমের তালিকা করে। নিশ্চিত করুন 16, 32, 48, এবং কমপক্ষে একটি উচ্চ-আকারের ফ্রেম বিদ্যমান।

apple-touch-icon.png আনুন এবং যেকোনো ইমেজ ইন্সপেক্টরে ডাইমেনশন চেক করুন — পুরানো টেমপ্লেট থেকে 120×120 নয়, 180×180 আশা করুন।

site.webmanifest খুলুন এবং আইকন যাচাই করুন[] এর মধ্যে রয়েছে 192×192 এবং 512×512 সঠিক পথ এবং ছবি/png প্রকার।

Chrome DevTools → অ্যাপ্লিকেশন → ম্যানিফেস্টে আপনার সাইট লোড করুন। অনুপস্থিত বা অবৈধ এন্ট্রি ব্যবহারকারীরা কখনও একটি ভাঙা ইনস্টল ডায়ালগ দেখার আগে সতর্কতা দেখায়।

প্রতিটি ফাইলের ভোক্তার কাছে একটি স্প্রেডশীট ম্যাপিং রাখুন (ট্যাব, iOS, PWA, Windows)। ভবিষ্যতে আপনাকে রিব্র্যান্ডের সময় সম্পদ ফোল্ডারটিকে রিভার্স-ইঞ্জিনিয়ার করতে হবে না।

নতুন ডিভাইস ক্লাসগুলি favicon জমিতে ধীরে ধীরে প্রদর্শিত হবে। 512×512 ম্যানিফেস্ট আইকনগুলি আজকে ফোল্ডেবল এবং ট্যাবলেট ইন্সটল UI গুলিকে একা 192 এর চেয়ে ভাল কভার করে৷

বিদেশী আকারগুলি এড়িয়ে চলুন (96×96, 120×120) যদি না একটি নির্দিষ্ট প্ল্যাটফর্ম ডক এখনও তাদের বাধ্যতামূলক করে — তারা বিস্তৃত সুবিধা ছাড়াই লেখার বোঝা যোগ করে।

আপনার ডিজাইন রেপোতে মাস্টার ভেক্টর বা 1024×1024 রাস্টার সঞ্চয় করুন, এমনকি যদি আপনি এটি কখনও পাঠান না। ভবিষ্যতের প্ল্যাটফর্মগুলি আরও বড় ম্যানিফেস্ট আইকনগুলির জন্য অনুরোধ করতে পারে৷

মাস্টার থেকে স্বয়ংক্রিয় পুনর্জন্ম যাতে একটি নতুন প্রস্তাবিত আকার উপস্থিত হয়, আপনি ফটোশপে হ্যান্ড-এক্সপোর্ট করার পরিবর্তে একটি স্ক্রিপ্ট পুনরায় চালান।