কীভাবে ব্যবহার করবেন
- Text / emoji বেছে 1 থেকে 3টি অক্ষর লিখুন, অথবা Image বেছে আপনার লোগো আপলোড করুন (SVG বা অন্তত 512 px-এর বর্গাকার PNG সবচেয়ে ভালো কাজ করে)।
- রং ও একটি আকৃতি বেছে নিন — বর্গ, গোলাকার কোণ বা বৃত্ত।
- 16, 32, 64 এবং 128 px-এ প্রিভিউ দেখুন; ছোট আকারে নকশাটি এখনও পড়া যায় কি না তা বোঝা যায়।
- ZIP ডাউনলোড করুন, ফাইলগুলি আপনার সাইটের root folder-এ আপলোড করুন এবং HTML-টি head-এ পেস্ট করুন।
অপশনগুলোর ব্যাখ্যা
- favicon.ico
- ব্রাউজার, বুকমার্ক এবং Windows shortcut-এর জন্য 16, 32 ও 48 px সংস্করণ থাকে।
- apple-touch-icon.png
- iPhone বা iPad-এর home screen-এ কেউ আপনার সাইট যোগ করলে ব্যবহারের জন্য solid background-সহ 180 × 180 px।
- icon-192.png / icon-512.png
- Android home screen এবং install করা যায় এমন web app-এর জন্য site.webmanifest-এ এটি উল্লেখ করা থাকে।
- icon.svg
- আধুনিক ব্রাউজারের জন্য মাপ পরিবর্তনযোগ্য icon; source লেখা বা SVG file হলে এটি অন্তর্ভুক্ত হয়।
HTML
সাইটের root-এ ফাইলগুলি আপলোড করার পর প্রতিটি পেজের head-এ এটি যোগ করুন:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">সচরাচর জিজ্ঞাসিত প্রশ্ন
আমার আসলে কোন ফাইলগুলি দরকার?
সাইটের root-এ থাকা favicon.ico সব ব্রাউজার কভার করে। iOS-এর জন্য apple-touch-icon.png যোগ করুন; আর সাইট Android-এ ইনস্টল বা পিন করলে সঠিক icon দেখাতে 192/512 icon-সহ manifest যোগ করুন।
16 px-এ আমার favicon ঝাপসা দেখায় কেন?
16 × 16 pixels-এ সূক্ষ্ম বিবরণ হারিয়ে যায়। লেখাসহ পুরো লোগোর বদলে গাঢ় অক্ষর বা সরলীকৃত logo mark ব্যবহার করুন।
favicon আপডেট করেও পুরোনোটাই দেখছি।
ব্রাউজার favicon খুব জোরালোভাবে cache করে। পেজটি hard reload করুন, অথবা link tag-এ /favicon.ico?v=2-এর মতো version query যোগ করুন।
favicon হিসেবে emoji ব্যবহার করতে পারি?
হ্যাঁ। emoji আপনার সিস্টেমের emoji font দিয়ে আঁকা হয়, তাই ফলাফল প্রিভিউতে যা দেখেন তার সঙ্গে মেলে।
গোপনীয়তা
এই টুলটি পুরোপুরি আপনার ব্রাউজারে চলে। আপনার ফাইল ও লেখা আপনার ডিভাইসেই প্রসেস হয় এবং কখনো আমাদের সার্ভারে আপলোড হয় না।