PNG থেকে ICO

PNG বা JPG থেকে সত্যিকারের .ico ফাইল বানান

এই PNG to ICO কনভার্টার একটি ছবিকে সত্যিকারের মাল্টি-রেজোলিউশন .ico ফাইলে রূপান্তর করে — যে ফরম্যাটটি ব্রাউজার /favicon.ico হিসেবে প্রত্যাশা করে এবং Windows যা অ্যাপ্লিকেশন, শর্টকাট ও ফোল্ডার আইকনের জন্য ব্যবহার করে। একটি PNG বা JPG ড্রপ করুন, যে সাইজগুলো যুক্ত করতে চান তাতে টিক দিন, প্রতিটি প্রিভিউ দেখুন, আর এক ক্লিকেই ডাউনলোড করুন। ইনস্টল করার কিছু নেই, সাইনআপ নেই — পুরো কনভার্শনটি সম্পূর্ণভাবে আপনার ব্রাউজারেই চলে।

যেসব টুল শুধু একটি .png-কে .ico নামে বদলে দেয়, তাদের বিপরীতে এটি একটি প্রকৃত আইকন তৈরি করে: প্রতিটি নির্বাচিত সাইজকে একটি স্কয়ার ক্যানভাসে রেন্ডার করা হয় এবং একটি ক্লায়েন্ট-সাইড ICO এনকোডার দিয়ে একটিমাত্র ফাইলে প্যাক করা হয়, যাতে Windows ও ব্রাউজার প্রতিটি প্রেক্ষাপটের জন্য সঠিক রেজোলিউশন বেছে নিতে পারে। আপনার ফাইল কখনও কোনো সার্ভার স্পর্শ করে না।

মাল্টি-রেজোলিউশন ICO কেন গুরুত্বপূর্ণ

একটিমাত্র .ico একসাথে অনেকগুলো সাইজ ধারণ করতে পারে। ব্রাউজার ট্যাবের জন্য ১৬×১৬ এবং বুকমার্কের জন্য ৩২×৩২ নেয়; Windows ডেস্কটপ শর্টকাটের জন্য ৪৮×৪৮ এবং Large-icons ভিউয়ের জন্য ২৫৬×২৫৬ ব্যবহার করে। একটিমাত্র সাইজের আইকন দিলে সেটি অন্তত একটি প্রেক্ষাপটে ঝাপসা বা টানা-হ্যাঁচড়া দেখায়। এই কারণেই এই মাল্টি-সাইজ ICO জেনারেটর আপনাকে একটি ফাইলে ১৬, ৩২, ৪৮, ৬৪, ১২৮ এবং ২৫৬ px একসাথে যুক্ত করতে দেয়।

কুইক প্রিসেট কাজটিকে সহজ করে তোলে: Favicon (১৬/৩২/৪৮), Windows (১৬/৩২/৪৮/২৫৬) অথবা All sizes। আপনি সবসময়ই আলাদা আলাদা সাইজ টগল করতে পারেন এবং লাইভ প্রিভিউ তৎক্ষণাৎ আপডেট হতে দেখতে পারেন, যাতে ডাউনলোড করার আগেই ঠিক কী পাবেন তা জানা থাকে।

UtiloKit বনাম Convertio, favicon.io ও CloudConvert

বেশিরভাগ অনলাইন ICO কনভার্টার — Convertio, CloudConvert, ILoveIMG — প্রসেস করার জন্য আপনার ছবিটি তাদের সার্ভারে আপলোড করে। এর মানে আপনার লোগো বা ব্র্যান্ড মার্ক ইন্টারনেটের ওপর দিয়ে যায়, তৃতীয় পক্ষের অবকাঠামোয় জমা হয়, এবং নেটওয়ার্ক লেটেন্সির জন্য অপেক্ষা করতে হয়। favicon.io-এর কনভার্টার জনপ্রিয় হলেও সেটিও সার্ভার-সাইড, এবং এটি একটি নির্দিষ্ট সাইজ-সেট তৈরি করে যা আপনি কাস্টমাইজ করতে পারবেন না।

UtiloKit HTML5 Canvas API ব্যবহার করে সম্পূর্ণভাবে আপনার ব্রাউজারেই কনভার্ট করে। কিছুই আপলোড হয় না। কোন কোন সাইজ যুক্ত করবেন তা আপনি ঠিক বেছে নেন। ফলাফল তাৎক্ষণিক, প্রাইভেট, এবং একবার পেজ লোড হয়ে গেলে ইন্টারনেট সংযোগ ছাড়াও কাজ করে। গোপনীয় লোগো বা অভ্যন্তরীণ অ্যাসেট অজানা কোনো সার্ভারে পাঠাতে না চাইলে, এই লোকাল-অনলি কনভার্শনই মূল পার্থক্য গড়ে দেয়।

ব্যাচ কনভার্ট, ট্রান্সপারেন্সি রক্ষা, PNG এক্সপোর্ট

পুরো একটি ফোল্ডার কনভার্ট করা দরকার? একসাথে একাধিক PNG বা JPG ফাইল ড্রপ বা পেস্ট করুন — প্রতিটি আপনার বেছে নেওয়া সাইজসহ নিজস্ব .ico হয়ে যায়, আর Download all সেগুলো একসাথে সেভ করে। ট্রান্সপারেন্সি সম্পূর্ণভাবে অক্ষুণ্ন থাকে: প্রতিটি সাইজ আইকনের ভেতরে PNG-এনকোডেড থাকে, তাই আপনার সোর্স থেকে আসা আলফা চ্যানেল টিকে থাকে এবং গোলাকার লোগো যেকোনো ব্যাকগ্রাউন্ডের ওপর কাট-আউট থাকে।

আপনি আলাদা PNG সাইজও এক্সপোর্ট করতে পারেন — সাইজ প্রিভিউয়ের যেকোনো টাইলে ক্লিক করে শুধু সেই রেজোলিউশনটি সেভ করুন, যা তখন কাজে লাগে যখন web app manifest বা Apple touch icon-এর জন্য .ico-এর পাশাপাশি একটি ৩২×৩২ বা ২৫৬×২৫৬ PNG দরকার হয়।

Windows 11, Mac ও iPhone-এ PNG to ICO — কোনো সফটওয়্যার লাগবে না

Windows 11-এ PNG থেকে ICO কীভাবে কনভার্ট করবেন খুঁজলে সাধারণত Paint, GIMP, বা সন্দেহজনক .exe ডাউনলোডের পরামর্শ আসে। এদের একটিও দরকার নেই: এটি যেকোনো OS-এ আপনার ব্রাউজারেই চলে — Windows, Mac, Linux, এমনকি iPhone ও Android-এও। ছবিটি কনভার্ট করুন, তারপর একটি শর্টকাট বা ফোল্ডারে রাইট-ক্লিক করে Properties → Change Icon-এ গিয়ে আপনার নতুন .ico-এর দিকে নির্দেশ করুন।

ওয়েবসাইটে ব্যবহারের জন্য, ফাইলটি আপনার সাইটের রুটে favicon.ico হিসেবে রাখুন এবং আপনার HTML হেডে <link rel="icon" href="/favicon.ico"> যোগ করুন। বেশিরভাগ ব্রাউজার স্বয়ংক্রিয়ভাবে /favicon.ico শনাক্ত করে। একটি সম্পূর্ণ ফেভিকন সেট বানাচ্ছেন? একটি ফেভিকন জেনারেটর টুল একটি ডাউনলোডেই প্রতিটি PNG সাইজ, .ico, একটি web manifest এবং HTML স্নিপেট আউটপুট দিতে পারে।

ডিজাইন থেকেই প্রাইভেট — আপনার ছবি ব্রাউজার ছাড়ে না

প্রতিটি কনভার্শন HTML Canvas API এবং একটি ক্লায়েন্ট-সাইড ICO এনকোডার দিয়ে লোকালিভাবে ঘটে — আপনার ছবি কখনও আপলোড, লগ বা শেয়ার করা হয় না। Convertio ও CloudConvert-এর মতো সার্ভার-ভিত্তিক কনভার্টারের ওপর এটিই মূল সুবিধা: আপনার লোগো, ব্র্যান্ড অ্যাসেট এবং গোপনীয় গ্রাফিক্স পুরো প্রক্রিয়াজুড়ে আপনার ডিভাইসেই থাকে।

একবার পেজ লোড হয়ে গেলে টুলটি অফলাইনেও কাজ করে, কোনো দৈনিক সীমা নেই, কোনো ফাইল-সাইজ সীমা নেই (ব্রাউজার মেমরির মধ্যে), এবং কোনো ওয়াটারমার্ক তৈরি করে না। সম্পূর্ণ ফ্রি, সম্পূর্ণ প্রাইভেট। এই PNG to ICO কনভার্টার বুকমার্ক করে রাখুন এবং যখনই কোনো ঝামেলা ছাড়া একটি ফেভিকন বা Windows আইকন দরকার হয়, তখনই ব্যবহার করুন।

ICO ফরম্যাটের ভেতরে: কনটেইনার যেভাবে কাজ করে

একটি ICO ফাইল কোনো একক ছবি নয় — এটি ICONDIR স্ট্রাকচারের ওপর গড়া একটি কনটেইনার ফরম্যাট। ফাইলটি একটি ৬-বাইটের ডিরেক্টরি হেডার দিয়ে শুরু হয় যা এটিকে ICO হিসেবে চিহ্নিত করে, তার পরে থাকে ICONDIRENTRY রেকর্ডের একটি তালিকা — প্রতিটি এম্বেড করা ছবির জন্য একটি করে। প্রতিটি এন্ট্রি সেই ছবির প্রস্থ, উচ্চতা, কালার ডেপথ, বাইট সাইজ এবং ফাইল অফসেট সংরক্ষণ করে। Windows প্রথমে ডিরেক্টরিটি পড়ে, তারপর যে সাইজ দরকার তার সাথে মেলে এমন এন্ট্রিতে সরাসরি চলে যায়, বাকিগুলো উপেক্ষা করে।

ঐতিহাসিকভাবে, প্রতিটি এন্ট্রি একটি BMP/DIB বিটম্যাপ সংরক্ষণ করত — একটি Device-Independent Bitmap যার ফাইল হেডার সরিয়ে ফেলা হয়েছে। ফরম্যাটটি ১-বিট (মনোক্রোম), ৪-বিট (১৬-রঙ), ৮-বিট (২৫৬-রঙ), ২৪-বিট (ট্রু কালার) এবং ৩২-বিট (ট্রু কালারের সাথে পূর্ণ ৮-বিট আলফা চ্যানেল) কালার ডেপথ সমর্থন করত। Windows Vista থেকে শুরু করে Microsoft ২৫৬×২৫৬ ও তার বেশি সাইজের জন্য ICO এন্ট্রির ভেতরে PNG-কম্প্রেসড ছবি অনুমোদন করে, যা ফাইল সাইজ নাটকীয়ভাবে কমিয়ে দেয়, কারণ একটি ২৫৬×২৫৬ আইকনে PNG কম্প্রেশন আনকম্প্রেসড BMP হিসেবে রাখার চেয়ে অনেক বেশি দক্ষ।

Windows যখন একটি আইকন দেখাতে চায়, তখন এটি ICONDIRENTRY তালিকাটি ঘুরে দেখে এবং যে এন্ট্রির মাপ প্রয়োজনীয় ডিসপ্লে সাইজের সবচেয়ে কাছাকাছি, সেটি বেছে নেয়। কোনো হুবহু মিল না থাকলে, Windows নিকটতম বড় সাইজটিকে ছোট করে নেয় — এই কারণেই ১৬×১৬-এর মতো একটি সাধারণ সাইজ না থাকলে ৩২×৩২ থাকা সত্ত্বেও টাইটেল-বার আইকন লক্ষণীয়ভাবে ঝাপসা হয়। ফাইলে প্রতিটি স্ট্যান্ডার্ড সাইজ থাকলে সেই স্কেলিং ধাপটি পুরোপুরি দূর হয় এবং অপারেটিং সিস্টেম প্রতিটি ডিসপ্লে প্রেক্ষাপটে পিক্সেল-পারফেক্ট আর্ট পায়।

Windows কোন কোন সাইজ ব্যবহার করে — এবং প্রতিটি কেন জরুরি

Windows আইকন সাইজ খেয়ালখুশিমতো বাছে না। শেল প্রতিটি ডিসপ্লে প্রেক্ষাপটকে একটি নির্দিষ্ট লজিক্যাল সাইজে ম্যাপ করে: ১৬×১৬ দেখা যায় টাইটেল বার, টাস্কবার থাম্বনেইল লেবেল, মেনু এবং small-icons লিস্ট ভিউতে; ৩২×৩২ ব্যবহৃত হয় ক্লাসিক ডেস্কটপ আইকন ভিউ ও Details পেনে; ৪৮×৪৮ File Explorer-এর Medium Icons ভিউ পূরণ করে; ৬৪×৬৪ ও ১২৮×১২৮ Large ও Extra Large Icons ভিউতে কাজ করে; ২৫৬×২৫৬ হলো যা শেল Jump List হোভার প্রিভিউ, "Open with" ডায়ালগ এবং Windows Photo Viewer থাম্বনেইলে রেন্ডার করে। ১৫০–২০০% স্কেলিংয়ে চলা হাই-DPI মনিটরে Windows সবচেয়ে বড় উপলব্ধ সাইজ থেকে আপস্যাম্পল করে, তাই একটি ২৫৬×২৫৬ এন্ট্রিই একটি 4K স্ক্রিনে আইকনকে ঝকঝকে রাখে।

একটি একক-সাইজের ICO — ধরুন শুধু ৩২×৩২ — Windows-কে সেই একটিমাত্র উৎস থেকেই ৪৮, ৬৪, ১২৮ ও ২৫৬ px-এ আপস্কেল এবং ১৬ px-এ ডাউনস্কেল করতে বাধ্য করে। ফলাফল প্রতিটি সাইজের জন্য উদ্দেশ্য করে রেন্ডার করা আর্টওয়ার্ক দেওয়া একটি মাল্টি-রেজোলিউশন ICO-র তুলনায় নরম ও অপেশাদার দেখায়। গুরুত্বপূর্ণ অ্যাপ্লিকেশন বা প্রোডাক্ট আইকনের জন্য কিছু দল একটি ৫১২×৫১২ এন্ট্রিও (ICO যদি ICNS ওয়ার্কফ্লোতে ইম্পোর্ট করা হয় তবে macOS ব্যবহার করে) এবং অতি-উচ্চ-DPI প্রেক্ষাপটের জন্য ১০২৪×১০২৪ পর্যন্ত অন্তর্ভুক্ত করে, যদিও Windows নিজে ২৫৬×২৫৬-এই সীমাবদ্ধ থাকে।

বাস্তব শিক্ষাটি হলো — Windows-এর জন্য বানানো যেকোনো ICO-তে অন্তত ১৬, ৩২, ৪৮ ও ২৫৬ px রাখুন। শুধু একটি ফেভিকন বানালে ১৬, ৩২ ও ৪৮ যথেষ্ট, কারণ ব্রাউজার কখনও একটি ICO ফাইল থেকে বড় সাইজ চায় না। এই কনভার্টারের সাইজ পিকার এই বাস্তব-জীবনের ব্যবহার প্যাটার্ন ঘিরেই সাজানো, এবং লাইভ প্রিভিউ আপনাকে ডাউনলোডে যাওয়ার আগে প্রতিটি সাইজের রেন্ডারিং কোয়ালিটি যাচাই করতে দেয়।

আধুনিক ফেভিকন স্ট্যাক: ICO, SVG, PNG ও Web Manifest

সাইটের রুট থেকে একটিমাত্র favicon.ico পরিবেশনের পুরনো প্রথা ছাড়িয়ে ব্রাউজারগুলো অনেক দূর এগিয়ে গেছে। বর্তমান সেরা অনুশীলন হলো একটি স্তরিত স্ট্যাক। /favicon.ico-তে থাকা ICO ফাইলটি এখনও সর্বজনীন ফলব্যাক — এটি macOS-এ Safari, Internet Explorer-এর প্রতিটি সংস্করণ, RSS রিডার, প্রেরকের ফেভিকন দেখায় এমন ইমেইল ক্লায়েন্ট, এবং <link> ট্যাগ উপেক্ষা করা বিশেষায়িত ব্রাউজারের একটি দীর্ঘ লেজ স্বয়ংক্রিয়ভাবে ফেচ করে। এই কারণে ২০২৪ সালেও ICO বাদ দেওয়া যায় না। ICO-এর ওপরে থাকে একটি SVG ফেভিকন, যা <link rel="icon" href="/favicon.svg" type="image/svg+xml"> হিসেবে ঘোষিত হয়: Chromium ও Firefox এটিকে ICO ও PNG-এর চেয়ে বেশি পছন্দ করে, কারণ একটি SVG পিক্সেলেশন ছাড়াই যেকোনো রেজোলিউশনে স্কেল করে। একটি SVG ফেভিকন ফাইলের ভেতরেই একটি @media (prefers-color-scheme: dark) রুল এম্বেড করে স্বয়ংক্রিয়ভাবে লাইট ও ডার্ক ভ্যারিয়েন্টের মধ্যে বদল করতে পারে — যা কোনো র‍্যাস্টার ফরম্যাট পারে না।

Apple ডিভাইসের জন্য একটি আলাদা <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180×180"> PNG দরকার হোম-স্ক্রিন আইকনের জন্য, যখন কোনো ব্যবহারকারী একটি ওয়েব পেজ তাদের iPhone বা iPad-এ যোগ করেন। Android ও ডেস্কটপ PWA ইনস্টলেশন আইকন সংজ্ঞা পড়ে একটি web app manifest (/site.webmanifest) থেকে, যা ১৯২×১৯২ ও ৫১২×৫১২-তে PNG আইকন তালিকাভুক্ত করে। তাই সর্বনিম্ন সম্পূর্ণ ফেভিকন সেটআপে চারটি উপাদান থাকে: favicon.ico (লিগ্যাসি ও সর্বজনীন ফলব্যাকের জন্য), SVG ফেভিকন (আধুনিক ব্রাউজারের জন্য), Apple touch icon PNG এবং manifest PNG-গুলো। এই PNG to ICO কনভার্টার ICO উপাদানটি সামলায়; আপনার লোগোর একটি SVG এক্সপোর্ট এবং manifest PNG-এর জন্য একটি ফেভিকন জেনারেটরের সাথে জুড়লে কয়েক মিনিটেই একটি ভবিষ্যৎ-প্রস্তুত সেটআপ পাওয়া যায়।

একটি সাধারণ ভুল ধারণা হলো, একটি PNG-এর দিকে নির্দেশ করা <link rel="icon"> রাখাই যথেষ্ট এবং ICO বাদ দেওয়া যায়। বাস্তবে এটি macOS-এ Safari 15 ও তার নিচের সংস্করণ ভেঙে দেয়, Outlook ইমেইল নোটিফিকেশনে ফাঁকা ফেভিকন ঘটায়, এবং Feedly-এর মতো অ্যাগ্রিগেটরে অনুপস্থিত আইকন তৈরি করে। বিমা হিসেবে রুটে থাকা ICO এখনও প্রয়োজন — একটি ৫–১৫ KB ফাইল পরিবেশন করতে কোনো খরচ নেই, আর এর উপস্থিতি সেই প্রতিটি ব্রাউজার ও ক্লায়েন্টের ঘাটতি পূরণ করে যারা <link> ট্যাগ পড়ে না।

কার্যকর ফেভিকন ডিজাইন: সীমাবদ্ধতা ও নীতি

একটি ১৬×১৬ ফেভিকন আপনাকে ঠিক ২৫৬ পিক্সেলের ক্যানভাস দেয়। ওই রেজোলিউশনে সরু রেখা মিলিয়ে যায়, টেক্সট অপাঠ্য হয়ে যায়, এবং বহু-উপাদানের চিত্র নয়েজে পরিণত হয়। সবচেয়ে কার্যকর ফেভিকনগুলো ১৬ px গ্রিডকে পূর্ণ লোগোর একটি ক্ষুদ্র সংস্করণ হিসেবে না দেখে একটি স্বতন্ত্র ডিজাইন সমস্যা হিসেবে দেখে। মূল নীতিগুলো হলো: একটি বোল্ড, সরল সিলুয়েট ব্যবহার করুন যা একটিমাত্র আকৃতি হিসেবে পড়া যায়; ওয়ার্ডমার্কের বদলে একটি একক অক্ষর বা জ্যামিতিক মার্ক বাছুন; আইকন ও তার ব্যাকগ্রাউন্ডের মধ্যে উচ্চ কনট্রাস্ট নিশ্চিত করুন যাতে এটি লাইট ও ডার্ক উভয় ব্রাউজার ক্রোমে দৃশ্যমান থাকে; এবং সরু স্ট্রোক এড়িয়ে চলুন — ১৬×১৬-তে দুই পিক্সেলের চেয়ে সরু যেকোনো রেখা হয় মিলিয়ে যাবে নয়তো ধূসর দাগে পরিণত হবে।

একটি ব্র্যান্ডের পূর্ণ লোগো এবং তার ফেভিকনের মধ্যকার সম্পর্ক প্রায়ই একটি সচেতন সরলীকরণ। যে কোম্পানির লোগো একটি কাস্টম টাইপফেসে "Stripe" লেখা, তারা ফেভিকনের জন্য একটি ছোট হাতের "S" ব্যবহার করে। GitHub-এর Octocat লোগো বড় সাইজে বিস্তারিত, কিন্তু ফেভিকন এটিকে একটি বৃত্তের ভেতর আইকনিক বিড়াল-অক্টোপাস সিলুয়েটে নামিয়ে আনে। সেরা ফেভিকনগুলো একটি স্বতন্ত্র মার্ক হিসেবে কাজ করে — এমনকি একটি মোবাইল ব্রাউজার হোম স্ক্রিনে ১৬ px বৃত্তে ক্রপ করলেও চেনা যায়। আপনার সোর্স PNG যখন ৫১২×৫১২ বা তার বড় হয়, তখন কোয়ালিটির যথেষ্ট জায়গা থাকে; চ্যালেঞ্জটা কী রাখব তা নয়, কী বাদ দেব তা নিয়ে সিদ্ধান্ত নেওয়া।

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