কীভাবে একটি ফেভিকন বানাবেন
সব জায়গায় দেখা যায় এমন ফেভিকনের জন্য যে মাপ, ফরম্যাট ও কোড লাগে।
ফেভিকন হলো ব্রাউজারের ট্যাবে, বুকমার্কে এবং মোবাইলে Google-এর সার্চ ফলাফলে আপনার সাইটের পাশে থাকা ছোট্ট আইকন। ফেভিকন না থাকলে সাইটটি অসম্পূর্ণ দেখায়, আর ঝাপসা ফেভিকন আরও খারাপ দেখায়। ভালো একটি বানাতে কয়েক মিনিটই লাগে।
সঠিক ডিজাইন দিয়ে শুরু করুন
একটি ফেভিকন 16 × 16 পিক্সেলের মতো ছোট আকারেও দেখানো হয়, তাই লেখাসহ পূর্ণ লোগো পড়াই যাবে না। একটি সহজ চিহ্ন ব্যবহার করুন: আপনার লোগোর প্রতীক, একটি আদ্যক্ষর, অথবা আপনার ব্র্যান্ডের রঙে একটি গাঢ় আকৃতি। স্ক্রিনে এটিকে এক-চতুর্থাংশ আকারে ছোট করে পরীক্ষা করুন: তখনো যদি বোঝা যায় এটি কী, তাহলে কাজ করবে।
অন্তত 512 × 512 পিক্সেলের একটি বর্গাকার ছবি দিয়ে শুরু করুন, আদর্শভাবে স্বচ্ছ ব্যাকগ্রাউন্ডসহ একটি PNG। আপনার লোগো বর্গাকার না হলে অনুপাত 1:1-এ লক করে বর্গাকারে ক্রপ করুন।
যে ফাইলগুলো লাগবে
| ফাইল | মাপ | যে ব্যবহার করে |
|---|---|---|
| favicon.ico | 16, 32 ও 48 পিক্সেলের সংস্করণ থাকে | ব্রাউজার, পুরোনো সিস্টেম, /favicon.ico-এর ডিফল্ট অনুরোধ |
| একটি PNG আইকন | 32 × 32 এবং 192 × 192 | আধুনিক ব্রাউজার, Android-এর হোম স্ক্রিন |
| apple-touch-icon.png | 180 × 180 | iPhone ও iPad-এর হোম স্ক্রিন বুকমার্ক |
Google Search-ও ফলাফলে আপনার ফেভিকন ব্যবহার করে। এটিকে অন্তত 48 × 48 পিক্সেলের বর্গাকার হতে হবে এবং আপনার সাইটে ক্রলারের জন্য প্রবেশযোগ্য থাকতে হবে।
ICO ফাইল তৈরি করা
আপনার বর্গাকার PNG-টি PNG থেকে ICO কনভার্টারে টেনে আনুন। এটি একটি আসল .ico ফাইল তৈরি করে, যাতে ব্রাউজার যে ছোট মাপগুলো চায় সেগুলো থাকে। PNG সংস্করণগুলোর জন্য একই বর্গাকার ছবি 180, 192 ও 32 পিক্সেলে আকার বদলান।
আপনার সাইটে যোগ করা
favicon.ico আপনার সাইটের রুট ফোল্ডারে আপলোড করুন, যাতে এটি yoursite.com/favicon.ico ঠিকানায় পাওয়া যায়, এবং আপনার পেজগুলোর head অংশে এই লাইনগুলো যোগ করুন:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/bn/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/bn/apple-touch-icon.png">
WordPress-এ Appearance, Customize, Site Identity-তে গিয়ে Site Icon হিসেবে একটি বর্গাকার ছবি আপলোড করুন; WordPress আপনার জন্য মাপগুলো তৈরি করে দেয়। Shopify, Wix ও Squarespace প্রত্যেকটিতে সাইট বা থিমের সেটিংসে একটি ফেভিকন সেটিং আছে।
নতুন ফেভিকন দেখা না গেলে
ব্রাউজার জেদ করে পুরোনো ফেভিকন ক্যাশে রেখে দেয়। সাইটটি একটি প্রাইভেট উইন্ডোতে খুলুন, অথবা সরাসরি yoursite.com/favicon.ico-তে গিয়ে রিফ্রেশ করুন। আপনার হোমপেজ আবার ক্রল করার পর সার্চ ফলাফলে আইকন আপডেট করতে Google-এর কয়েক দিন বা কয়েক সপ্তাহ লাগতে পারে।
প্রচলিত ভুলগুলো
- ছোট লেখাসহ পূর্ণ লোগো ব্যবহার করা, যা 16 পিক্সেলে একটি দাগে পরিণত হয়।
- স্বচ্ছ ব্যাকগ্রাউন্ডে সাদা আইকন, যা হালকা রঙের ব্রাউজার ট্যাবে অদৃশ্য হয়ে যায়।
- শুধু 16 পিক্সেলের ছোট্ট একটি ফাইল দেওয়া, যা উচ্চ রেজোলিউশনের স্ক্রিনে ঝাপসা দেখায়।
- /favicon.ico-তে ফাইলটি রাখতে ভুলে যাওয়া, যা কিছু ব্রাউজার ও ক্রলার পেজে যা-ই লেখা থাকুক না কেন অনুরোধ করে।