ফেভিকন তৈরি করুন

একটি আইকন কেন নয়টি ফাইল হয়ে গেল

সেটের প্রতিটি ফাইল আছে, কারণ নির্দিষ্ট কিছু একটা শুধু সেটাই পড়ে, আর কিছু নয়। ১৬, ৩২ ও ৪৮ ধারণ করা favicon.ico এখনো সেই ফাইল, যা ব্রাউজার ডিফল্টভাবে সাইটের রুটে খোঁজে, আর বহু পুরোনো সফটওয়্যার প্রথমে এটাই দেখে। favicon-16x16.png ও favicon-32x32.png এখনকার ব্রাউজার ট্যাবের জন্য পছন্দ করে, কারণ স্কেল করার চেয়ে ঠিক সাইজের PNG ভালো। ১৮০ পিক্সেলের apple-touch-icon.png iOS হোম স্ক্রিনে বসায় — এতে স্বচ্ছতা সমর্থিত নয়, তাই কালো কোণসহ না এসে একটি নিরেট ব্যাকগ্রাউন্ডের ওপর বসানো হয়। android-chrome-192x192.png ও 512x512.png ইনস্টল করা প্রগ্রেসিভ ওয়েব অ্যাপ তার লঞ্চার আইকন ও স্প্ল্যাশ স্ক্রিনের জন্য ব্যবহার করে, যা site.webmanifest-এ ঘোষণা করা থাকে।

সবার জন্য একটি বড় PNG দেওয়া সব জায়গায় খারাপ কাজ করে, অথচ এটাই সবচেয়ে প্রচলিত শর্টকাট। ব্রাউজার ষোলো পিক্সেল আঁকতে আধা মেগাবাইট ডাউনলোড করে, iOS স্বচ্ছতার নিয়ম মানে না আর আপনার লোগো কালো বর্গের ওপর বসিয়ে দেয়, আর প্ল্যাটফর্ম যে মাস্কই লাগাক, লঞ্চার আইকন তাতে কেটে যায়। সেটটা ঝামেলার, ঠিক এ কারণেই যে প্রত্যেক ব্যবহারকারীর চাহিদা আলাদা।

ছবিগুলোর মতোই HTML স্নিপেটও জরুরি। এই ফাইলগুলোর বেশিরভাগ ব্রাউজার নিজে থেকে খুঁজে পায় না — প্রথা অনুযায়ী শুধু রুটের favicon.ico খুঁজে পাওয়া যায় — তাই link ট্যাগগুলোই এদের যুক্ত করে, আর manifest-এর জন্য লাগে আলাদা ট্যাগ। স্নিপেট রুট-রিলেটিভ পাথ ব্যবহার করে, যা ফাইলগুলো ওয়েব রুটে থাকলে কোনো বদল ছাড়াই কাজ করে; সাবফোল্ডারে রাখলে স্নিপেট ও manifest দুটোরই পাথ ঠিক করে নিতে হবে।

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

অন্য কিছু দরকার হলে

এখানে তৈরি সেটটি ব্যবহারিক আধুনিক মূল অংশ। পুরো লম্বা তালিকা দরকার হলে — Windows টাইল ছবি, Safari-র pinned-tab mask icon, Microsoft browserconfig, Apple-এর পুরোনো সাইজগুলো — RealFaviconGenerator সেগুলো দেয় এবং পরে আপনার চালু সাইটও যাচাই করে, যা সত্যিই কাজের এবং এই টুল তা পারে না।

বিল্ড পাইপলাইনের জন্য হাতে আইকন বানানো একেবারেই ভুল ধরনের কাজ। favicons, pwa-asset-generator আর sharp-এর ওপর তৈরি ফ্রেমওয়ার্ক প্লাগইনগুলো প্রতিবার ডিপ্লয় করার সময় একটি মূল ফাইল থেকে পুরো সেট বানায়, তাই লোগো বদলালে আইকন পুরোনো হয়ে পড়ে থাকতে পারে না — আর বাস্তবে সবসময় ঠিক এটাই ঘটে।