ফ্যাভিকন ও ওয়েব ম্যানিফেস্ট

একটা ছবি ঢোকান, গোটা সেট বেরোয়: সত্যিকারের বহু-মাপের ICO, অ্যাপলের শর্ত মেনে চ্যাপ্টা করা Apple touch আইকন, ম্যানিফেস্টের PNG, ম্যানিফেস্ট ফাইলটাই, আর সেঁটে দেওয়ার মতো HTML ব্লক। অ্যান্ড্রয়েডের maskable কাটাটাও কামড় বসানোর আগে দেখিয়ে দেয় — বেশির ভাগ আইকন নিঃশব্দে ওখানেই নিজের কিনারা হারায়।

ছবি এখানে টেনে আনুন বা ক্লিক করে বেছে নিন
বর্গাকার সবচেয়ে ভালো কাজ করে, অন্তত ৫১২ পিক্সেল। স্বচ্ছ PNG হলে ফল সবচেয়ে পরিষ্কার হয়।
হোম স্ক্রিনে আইকনের নিচে যতটুকু ধরে।
যেখানে স্বচ্ছতা চলে না সেখানে ভরাট করে, আর maskable আইকনের প্রান্তও দেয়।
ফাইলআকারকে ব্যবহার করে

    

.ico এখনও কেন গুরুত্বপূর্ণ

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

maskable নিরাপদ অঞ্চল

অ্যান্ড্রয়েড কথা দেয় না যে আপনার আইকন বর্গাকারেই দেখাবে। লঞ্চার ভেদে সেটা বৃত্তে, স্কোয়ার্কলে, বা গোল কোণের বর্গে কেটে নিতে পারে, আর নিশ্চয়তা কেবল ভেতরের বৃত্তটুকুর — প্রস্থের আশি শতাংশ, মাঝ বরাবর। যে ছবি কিনারা পর্যন্ত পৌঁছায়, সেই ছবিই কিনারা হারায়। সমাধান হলো ম্যানিফেস্ট আইকনে প্রান্ত যোগ করে সেগুলোকে নিরাপদ অঞ্চলের ভেতরে আনা, আর এখানকার প্রিভিউ কাটার রেখাটা এঁকে দেয় যাতে ব্যবহারকারীর আগে আপনিই দেখে নেন।

Apple touch আইকনে স্বচ্ছতা কেন থাকে না

iOS হোম স্ক্রিনের আইকনকে নিজের গোল আকৃতির ওপর বসায় আর অ্যালফা চ্যানেলকে আপনি যেমন চাইবেন তেমন মানে না; স্বচ্ছ জায়গা কালো হয়ে বেরোয়। তাই ওই একটা ফাইলই এনকোড হওয়ার আগে আপনার পটভূমির রঙে চ্যাপ্টা করা হয়, আর ম্যানিফেস্টের PNG নিজেদের অ্যালফা ধরে রাখে — সেখানে সেটার সঙ্গে ঠিকঠাক আচরণ হয়।

ফাইলগুলো নিয়ে কী করবেন

এগুলো সাইটের গোড়ায় রাখুন, কোনো assets ফোল্ডারে নয় — ব্রাউজার আর ক্রলার ফ্যাভিকনের পথটা নিজেরাই আন্দাজ করে, আর কেউ কেউ আপনি লিংক দিন বা না দিন, চেয়ে বসে। এরপর HTML ব্লকটা আপনার পাতার head-এ সেঁটে দিন। ফাইল আপনি আসলে যেখানে রেখেছেন তার সঙ্গে মিলতে হবে কেবল ম্যানিফেস্টের পথটুকুর।

FAQ

PNG থাকলেও কি favicon.ico লাগে?

কড়াভাবে বললে, না। বাস্তবে, হ্যাঁ — বহু ক্রলার, ফিড রিডার আর পুরোনো টুল ফ্যাভিকনটা পথ ধরে চায় আর আপনার মার্কআপ দেখেই না। খরচ মোটে কয়েক কিলোবাইট।

১৬ পিক্সেলে আমার আইকন ঘোলাটে দেখায়। কী করব?

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

maskable প্রান্তটা কি বন্ধ করে দেব?

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

আমার ছবি কি কোথাও আপলোড হয়?

না। প্রতিটা মাপ এই পাতার ক্যানভাসেই আঁকা হয় আর আর্কাইভটা মেমরিতেই জোড়া লাগে। কিছুই পাঠানো হয় না।

GO AI দলের তৈরি। অ্যাপ আইকন জেনারেটর · ব্যাচ রিসাইজার · বিনামূল্যের সব টুল