কীভাবে ফেভিকন বানাবেন
ফেভিকন বানাতে উপরে আপনার লোগো যোগ করুন - অথবা একটি অক্ষর বা ইমোজি লিখুন - চেহারা ঠিক করুন, তারপর ZIP ডাউনলোড করুন। প্রিভিউতে প্রতিটি আসল সাইজে এবং ব্রাউজার ট্যাবে, লাইট ও ডার্ক মোডে আইকনটি দেখা যায়।
- উৎস বেছে নিন। PNG বা SVG লোগো সবচেয়ে ভালো কাজ করে; অন্য যেকোনো ছবি একটি চৌকোর ভেতরে বসানো হয়। লোগো নেই? রঙিন ব্যাকগ্রাউন্ডে একটি অক্ষর বা ইমোজি ব্যবহার করুন।
- চেহারা ঠিক করুন। ব্যাকগ্রাউন্ডের রং বা স্বচ্ছ, আকৃতি (গোলাকার কোণ, চৌকো বা বৃত্ত) এবং ছবির চারপাশে কতটা প্যাডিং থাকবে।
- ডাউনলোড করুন। সব আইকন ডাউনলোড করুন দিলে পুরো প্যাকেজ পাবেন; শুধু favicon.ico দিলে শুধু ওই একটি ফাইল পাবেন।
ফেভিকন প্যাকেজে কী কী আছে
| ফাইল | সাইজ | কোথায় ব্যবহার হয় |
|---|---|---|
favicon.ico | 16, 32 ও 48 px | সব ব্রাউজার, Windows, সার্চ রেজাল্ট |
favicon-16x16.png, favicon-32x32.png | 16 ও 32 px | ব্রাউজার ট্যাব ও বুকমার্ক |
apple-touch-icon.png | 180 px | iPhone ও iPad-এর হোম স্ক্রিন |
android-chrome-192x192.png, -512x512.png | 192 ও 512 px | Android হোম স্ক্রিন, ইনস্টল করা ওয়েব অ্যাপ |
site.webmanifest | - | Android ও ওয়েব অ্যাপের জন্য আইকন ও রঙের নাম ঠিক করে |
favicon-html.txt | - | আপনার পেজে বসানোর ট্যাগ |
Apple আইকনে সবসময় সলিড ব্যাকগ্রাউন্ড ও চৌকো কোণ থাকে: iPhone নিজেই কোণ গোল করে এবং স্বচ্ছ অংশ কালো দেখায়।
আপনার ওয়েবসাইটে ফেভিকন যোগ করুন
- প্যাকেজটি আনজিপ করে ফাইলগুলো আপনার ওয়েবসাইটের রুট ফোল্ডারে, হোম পেজের পাশে আপলোড করুন,
যাতে
yoursite.com/favicon.icoখুললে আইকনটি দেখা যায়। - HTML ট্যাগগুলো (উপরে দেখানো আছে, এবং
favicon-html.txt-এও) আপনার পেজের<head>-এ বসান। - ক্যাশে মুছে রিলোড করুন। ব্রাউজার পুরনো ফেভিকন ধরে রাখে, তাই প্রাইভেট উইন্ডোতে দেখাই সবচেয়ে দ্রুত যাচাইয়ের উপায়।
WordPress-এ বিকল্প হিসেবে Customizer-এ 512 px আইকনটি সাইট আইকন হিসেবে সেট করতে পারেন, বাকি সাইজ ওটা নিজেই বানিয়ে নেয়।
স্পষ্ট ফেভিকনের টিপস
- সহজ রাখুন। 16 পিক্সেলে বিস্তারিত লোগো ঝাপসা হয়ে যায়। টেক্সটসহ পুরো লোগোর বদলে আপনার লোগোর প্রতীক বা তার প্রথম অক্ষর ব্যবহার করুন।
- কনট্রাস্ট রাখুন। ব্রাউজারের থিম অনুযায়ী ট্যাব হালকা বা গাঢ় হয় - দুটি প্রিভিউই দেখে নিন।
- প্যাডিংয়ের দিকে খেয়াল রাখুন। প্যাডিং কম হলে ট্যাবে আইকন বড় দেখায়; ফোনের হোম স্ক্রিনে একটু বেশি প্যাডিং ভালো লাগে।
তার বদলে ভিন্ন সাইজের একটি .ico ফাইল দরকার? ইমেজ কনভার্টার যেকোনো ছবি ICO হিসেবে সেভ করে।
সচরাচর জিজ্ঞাসা
কীভাবে ফেভিকন বানাব?
এই পেজের বক্সে আপনার লোগো বা যেকোনো চৌকো ছবি যোগ করুন, অথবা একটি অক্ষর বা ইমোজি লিখুন। ব্যাকগ্রাউন্ড, প্যাডিং ও আকৃতি ঠিক করে নিন, তারপর সব আইকন সাইজ এবং আপনার সাইটে বসানোর HTML সহ ZIP ডাউনলোড করুন।
ফেভিকনের জন্য কোন কোন সাইজ লাগে?
ব্রাউজার ও Windows-এর জন্য 16, 32 ও 48 পিক্সেলের সংস্করণসহ একটি favicon.ico যথেষ্ট; iPhone ও iPad-এর জন্য 180 পিক্সেলের apple-touch-icon; আর Android ও ইনস্টল করা ওয়েব অ্যাপের জন্য 192 ও 512 পিক্সেলের আইকন। প্যাকেজে সবকটিই থাকে।
আমার ওয়েবসাইটে ফেভিকন কীভাবে যোগ করব?
ZIP-এর ফাইলগুলো আপনার সাইটের রুট ফোল্ডারে আপলোড করুন, যাতে yoursite.com/favicon.ico ঠিকানায় favicon.ico খোলে। এরপর HTML ট্যাগগুলো আপনার পেজের head অংশে বসিয়ে দিন।
আমার নতুন ফেভিকন দেখা যাচ্ছে না কেন?
ব্রাউজার অনেক দিন ধরে ফেভিকন ক্যাশে রেখে দেয়। ফেভিকনের ঠিকানাটি সরাসরি খুলুন, রিলোড করুন, অথবা প্রাইভেট উইন্ডোতে দেখুন। সার্চ রেজাল্টে বদলাতে কয়েক সপ্তাহ লাগতে পারে।
টেক্সট বা ইমোজি থেকে কি ফেভিকন বানানো যায়?
হ্যাঁ। "অক্ষর বা ইমোজি" বেছে নিন, এক বা দুটি অক্ষর লিখুন এবং রং ঠিক করুন। লোগো ছাড়াই একটি পরিচ্ছন্ন আইকন পাওয়ার এটি দ্রুত উপায়।
আমার ছবি কি আপলোড হয়?
না। সব আইকন আপনার ব্রাউজারেই তৈরি হয়, আপনার ছবি কখনও আপনার ডিভাইসের বাইরে যায় না।