ফেভিকন জেনারেটর কী এবং এটি কীভাবে কাজ করে?
ফেভিকন জেনারেটর হলো একটি অনলাইন টুল যা আপনার প্রদান করা একটি মাত্র ইমেজ ফাইলকে বিভিন্ন ডিভাইসে ব্যবহারের উপযোগী আইকন ফাইলের একটি সংগ্রহে রূপান্তর করে। একটি ওয়েবসাইট তৈরি করার সময় ব্রাউজার ট্যাব আইকন, অ্যাপল টাচ আইকন এবং প্রোগ্রেসিভ ওয়েব অ্যাপস (PWAs)-এর জন্য বিভিন্ন সাইজের আইকনের প্রয়োজন হয়। এই টুলটি আপনার আপলোড করা ছবি থেকে সেই সমস্ত প্রয়োজনীয় আইকন তৈরি করে এবং সেগুলোকে একটি ডাউনলোডযোগ্য ZIP ফাইলে প্যাক করে দেয়। এর পাশাপাশি, আইকনগুলো আপনার ওয়েবসাইটে যুক্ত করার জন্য প্রয়োজনীয় HTML কোড স্নিপেটও এটি তৈরি করে দেয়।
এই টুলটি ব্যবহার করার জন্য আপনি ইনপুট হিসেবে একটি PNG, JPG অথবা SVG ছবি ব্যবহার করতে পারেন। PNG বা JPG ছবির ক্ষেত্রে অন্তত ৫১২ × ৫১২ পিক্সেল সাইজের ছবি ব্যবহার করার পরামর্শ দেওয়া হয়, কারণ এর চেয়ে ছোট ছবি ব্যবহার করলে বড় আইকনগুলো কিছুটা ঝাপসা বা নরম দেখাতে পারে। এই টুলে সর্বোচ্চ ৫০ মেগাবাইট (50 MB) পর্যন্ত ফাইল সাইজ আপলোড করা সম্ভব।
ইনপুট ছবির ফিটিং এবং ব্যাকগ্রাউন্ড অপশন
আপনার সোর্স ছবিটি যদি বর্গাকার না হয়, তবে ফেভিকন জেনারেটর সেটি হ্যান্ডেল করার জন্য দুটি অপশন প্রদান করে, কারণ আইকনগুলো সবসময় বর্গাকার হয়:
- ফিট করুন (প্যাডিং): এই অপশনে পুরো ছবিটি চারপাশে প্যাডিং সহ মাঝখানে দৃশ্যমান থাকে। ডিফল্টভাবে বর্গাকার নয় এমন ছবিগুলোকে এই নিয়মে মাঝখানে প্যাডিং দিয়ে বসানো হয়।
- ফিল করুন (ক্রপ): এই অপশনটি নির্বাচন করলে ছবিটি বর্গাকার অংশটি পূরণ করে এবং বাইরের বাড়তি বা উপচে পড়া অংশগুলো কেটে ফেলা হয়।
আইকনের ব্যাকগ্রাউন্ডের জন্য দুটি বিকল্প রয়েছে:
- স্বচ্ছ (Transparent): ডিফল্টভাবে আইকনের ব্যাকগ্রাউন্ড স্বচ্ছ থাকে। ব্রাউজার ট্যাবের জন্য স্বচ্ছ ব্যাকগ্রাউন্ডের আইকনগুলো দেখতে সুন্দর লাগে এবং এটিই সবচেয়ে উপযুক্ত।
- রঙ: ব্যবহারকারী চাইলে নিজের পছন্দমতো একটি ব্যাকগ্রাউন্ড কালার বেছে নিতে পারেন। আইফোন এবং আইপ্যাডের হোম স্ক্রিন আইকনের জন্য একটি ব্যাকগ্রাউন্ড কালার থাকা নিরাপদ, কারণ আইফোনের হোম স্ক্রিনে আইকনের স্বচ্ছ অংশগুলো কালো রঙে প্রদর্শিত হয়।
জেনারেট হওয়া আইকন প্যাকের আউটপুটসমূহ
আইকন তৈরি হয়ে যাওয়ার পর আপনি একটি ZIP ফাইল ডাউনলোড করতে পারবেন যার মধ্যে নিচের ফাইলগুলো অন্তর্ভুক্ত থাকে:
- favicon.ico: এই ফাইলটিতে ১৬, ৩২ এবং ৪৮ পিক্সেল সংস্করণের আইকন থাকে, যা ক্লাসিক ট্যাব আইকন হিসেবে কাজ করে।
- PNG আইকন: ১৬, ৩২, ১৮০, ১৯২ এবং ৫১২ পিক্সেল সাইজের বিভিন্ন PNG আইকন।
- site.webmanifest: এটি একটি ছোট টেক্সট ফাইল যা বড় আইকনগুলোর তালিকা ধারণ করে এবং ডিভাইসগুলোকে আইকনের অবস্থান জানায়।
- ভেক্টর ফাইল: আপনি যদি ইনপুট হিসেবে একটি SVG ফাইল ব্যবহার করেন, তবে আইকন প্যাকে মূল ভেক্টর ফাইলটিও অন্তর্ভুক্ত থাকে, যা যেকোনো সাইজে একদম শার্প বা নিখুঁত দেখায়।
- কোড কপি করুন: আপনার ওয়েবসাইটের প্রতিটি পেজের
<head>অংশে পেস্ট করার জন্য একটি প্রয়োজনীয় HTML কোড স্নিপেট।
এছাড়াও, টুলটি লোড হওয়া ছবির প্রস্থ ও উচ্চতা "dimensions" (যেমন: "{w} × {h} px") হিসেবে প্রদর্শন করে।
নিয়মাবলী এবং ত্রুটিসমূহ (Error Messages)
টুলটি ব্যবহারের সময় কিছু নির্দিষ্ট নিয়ম ও ত্রুটি বার্তা দেখা যেতে পারে:
- আপনি যদি ছবি নির্বাচন না করেই আইকন তৈরি করতে যান, তবে বার্তা দেখাবে: "প্রথমে একটি PNG, JPG বা SVG ছবি বেছে নিন।"।
- শুধুমাত্র PNG, JPG এবং SVG ফরম্যাটের ছবিই এখানে সমর্থিত। অন্য ফরম্যাটের ক্ষেত্রে ত্রুটি দেখাবে: "শুধুমাত্র PNG, JPG এবং SVG ছবি সমর্থিত।"।
- ফাইল সাইজ ৫০ মেগাবাইটের বেশি হলে সতর্কবার্তা আসবে: "এই ফাইলটি ৫০ মেগাবাইটের (50 MB) চেয়ে বড়। ছোট সাইজের সোর্স ছবি ব্যবহার করুন।"।
- ফাইলটি যদি ক্ষতিগ্রস্ত বা খালি হয়, তবে বার্তা দেখাবে: "এই ফাইলটি ছবি হিসেবে খোলা যায়নি। এটি ক্ষতিগ্রস্ত, খালি বা ছবি নাও হতে পারে।"।
- আপলোড করা SVG ফাইলটিতে কোনো সমস্যা থাকলে দেখাবে: "এই SVG ফাইলটি রিড করা যায়নি। ফাইলটি একটি বৈধ SVG ডকুমেন্ট কিনা তা পরীক্ষা করুন।"।
- ছোট সাইজের ছবির ক্ষেত্রে সতর্কবার্তা দেখাবে: "ছোট সোর্স ছবি (
{w}×{h}px): বড় আইকনগুলো কিছুটা ঝাপসা দেখাতে পারে। সেরা ফলাফলের জন্য ৫১২ × ৫১২ বা তার বড় — অথবা একটি SVG — ব্যবহার করুন।"। - আইকন তৈরিতে কোনো ব্যর্থতা হলে বার্তা আসবে: "আইকন তৈরি করা যায়নি। অন্য একটি ছবি চেষ্টা করুন।"।
গোপনীয়তা এবং ডেটা প্রসেসিং
এই টুলটি ব্যবহার করার সময় আপনার গোপনীয়তা সম্পূর্ণ সুরক্ষিত থাকে। আপনার প্রদান করা ছবিটি আইকনে রূপান্তরের পুরো কাজটি সরাসরি আপনার ব্রাউজারেই সম্পন্ন হয়। প্রক্রিয়াকরণের জন্য কোনো ছবি বা ফাইল BroBroGo-তে আপলোড করা হয় না।
এই টুলটি কাদের জন্য প্রয়োজনীয়?
- ওয়েবসাইট নির্মাতা: যারা তাদের বিদ্যমান লোগো বা ছবিকে ব্রাউজার ট্যাব, অ্যাপল টাচ আইকন এবং অ্যান্ড্রয়েড আইকনে রূপান্তর করতে চান।
- ডেভেলপার ও ডিজাইনার: যাদের ওয়েবসাইটের আইকন ব্যবহারের জন্য একটি প্রস্তুত ফাইল প্যাকেজ (ZIP) এবং সরাসরি ব্যবহারযোগ্য HTML কোড স্নিপেটের প্রয়োজন।
- সাধারণ ব্যবহারকারী: যারা একটি মাত্র PNG, JPG বা SVG ফাইল থেকে সহজে
favicon.icoএবং সম্পূর্ণ সাইট আইকন প্যাক তৈরি করতে চান।
সাধারণ জিজ্ঞাসা (FAQ)
আইকন প্যাকে কী কী ফাইল থাকে?
এর মধ্যে থাকবে ১৬, ৩২ এবং ৪৮ পিক্সেল সংস্করণের favicon.ico, ১৬, ৩২, ১৮০, ১৯২ এবং ৫১২ পিক্সেলের PNG আইকন এবং একটি site.webmanifest ফাইল যা বড় আইকনগুলোর তালিকা ধারণ করে। আপনি যদি SVG দিয়ে শুরু করেন, তবে ভেক্টর ফাইলটিও অন্তর্ভুক্ত থাকবে। একটি মাত্র ZIP ফাইলেই সবকিছু পেয়ে যাবেন।
আমার সোর্স ছবির সাইজ কত হওয়া উচিত?
একটি SVG ফাইল সবচেয়ে আদর্শ — প্রতিটি আইকন ভেক্টর থেকে তৈরি হয়, তাই ১৬ পিক্সেল সাইজেও এটি একদম শার্প থাকে। PNG বা JPG-এর ক্ষেত্রে অন্তত ৫১২ × ৫১২ সাইজ দিয়ে শুরু করুন; ছোট ছবিগুলোর সাইজ বাড়ালে সেগুলো কিছুটা ঝাপসা দেখাতে পারে।
ব্যাকগ্রাউন্ড কি স্বচ্ছ নাকি রঙিন হওয়া উচিত?
ব্রাউজার ট্যাবের আইকনগুলো স্বচ্ছ হলে দেখতে সুন্দর লাগে। তবে আইফোন এবং আইপ্যাডের হোম স্ক্রিনে স্বচ্ছ অংশগুলো কালো দেখায় — তাই ব্যবহারকারীরা যদি আপনার সাইটটি তাদের হোম স্ক্রিনে যোগ করতে পারেন, তবে একটি ব্যাকগ্রাউন্ড কালার বেছে নেওয়া ভালো।
ছবিটি বর্গাকার না হলে কী হবে?
আইকনগুলো বর্গাকার হয়, তবে আপনার ছবিকে কখনোই টেনে-হেঁচড়ে বিকৃত করা হবে না। ডিফল্টভাবে এটি চারপাশে প্যাডিং দিয়ে মাঝখানে বসানো হয়; লম্বা অংশগুলো কেটে বাদ দিতে চাইলে আপনি "ফিল করুন (ক্রপ)" অপশনটি বেছে নিতে পারেন।
ফাইলগুলো আমার সাইটের কোথায় রাখতে হবে?
ফাইলগুলো আপনার সাইটের রুট ফোল্ডারে আপলোড করুন, যাতে favicon.ico ফাইলটি /favicon.ico হিসেবে অ্যাক্সেস করা যায়। তারপর তৈরি হওয়া কোডগুলো আপনার পেজের <head> অংশে পেস্ট করুন। ব্রাউজারগুলো স্বয়ংক্রিয়ভাবে সঠিক সাইজটি বেছে নেবে।