সঠিক ফ্যাভিকন সেট মানে একটার বেশি ফাইল: ব্রাউজার চায় বহু-মাপের .ico, iOS চায় 180px apple-touch-icon, Android চায় 192 ও 512px PNG সঙ্গে একটি ওয়েব ম্যানিফেস্ট। এই টুল একটি মাত্র ছবি থেকে সবগুলো রেন্ডার করে এক ZIP-এ ভরে দেয়, সঙ্গে থাকে আপনার <head>-এ পেস্ট করার হুবহু HTML ট্যাগ।
প্রিভিউতে আপনার আইকন আসল 16, 32 ও 48px মাপে দেখা যায়, তাই প্রকাশের আগেই যাচাই করে নিতে পারেন ছোট মাপেও এটা চেনা যাচ্ছে কি না।
যেভাবে ব্যবহার করবেন
- আপনার লোগো যোগ করুনবর্গাকার ছবিই সবচেয়ে ভালো; অন্যগুলো মাঝ-বরাবর ক্রপ হয়।
- ছোট মাপগুলো দেখে নিন16px প্রিভিউটাই বেশিরভাগ ব্যবহারকারী আসলে ট্যাবে দেখবে।
- ZIP ডাউনলোড করুনfavicon.ico, ছয়টি PNG, site.webmanifest আর পেস্ট-প্রস্তুত html-snippet.txt।
একটা ছবি দিন, পুরো ফ্যাভিকন সেট নিন
একটামাত্র লোগো বা আইকন ফেলুন — এই জেনারেটর আধুনিক সাইটের দরকারি পুরো সেটটা বানিয়ে দেয়: 16, 32 আর 48 পিক্সেল সংস্করণ একসঙ্গে বাঁধা মাল্টি-সাইজ favicon.ico, আলাদা PNG 16, 32, 48-এ, Apple টাচ আইকনের জন্য 180, Android ও PWA ইনস্টলের জন্য 192 আর 512, সঙ্গে একটা site.webmanifest। সব আসে এক ZIP-এ — সরাসরি প্রজেক্ট রুটে ফেলে দিন।
সঙ্গে পাবেন পেস্ট-রেডি HTML হেড স্নিপেট — সঠিক link আর meta ট্যাগ আগেই বসানো। টেমপ্লেটে কপি করুন, ফাইলগুলো আপলোড করুন, আর ফ্যাভিকন ব্রাউজার ট্যাব, বুকমার্ক আর হোম-স্ক্রিন শর্টকাটে দেখা যাবে — নিজে হাতে কোনো মার্কআপ লিখতে হবে না।
প্রতিটি মাপে ঝকঝকে আইকন
ফ্যাভিকন নির্মমভাবে ছোট, তাই জেনারেটর 16, 32 আর 48 পিক্সেলে ট্রু-সাইজ প্রিভিউ রেন্ডার করে — ব্রাউজার ট্যাবে ঠিক যেমন দেখাবে। ফলে 16px-এ কোন লোগো কাদা হয়ে যাচ্ছে, শিপ করার আগেই ধরতে পারবেন। সোর্স ইমেজ স্কয়ার না হলে টুলটি মাঝ বরাবর ক্রপ করে, যাতে আইকন চ্যাপ্টা না হয়ে সুষম থাকে।
পুরো প্রক্রিয়াটা আপনার মূল ছবি থেকে ব্রাউজারেই চলে — মানে হাই-রেজোলিউশন লোগো থেকে ফ্যাভিকন PNG আর ICO বানাতে পারবেন কোনো আপলোড বা অ্যাকাউন্ট ছাড়াই।
মানুষ এটা যেসব কাজে ব্যবহার করে
নতুন সাইট লঞ্চ — favicon.ico আর প্রতিটি PNG সাইজ একবারে বানান, যাতে প্রথম দিন থেকেই ট্যাব আর বুকমার্ক পরিপাটি দেখায়।
PWA ইনস্টল আইকন যোগ — 192 আর 512 PNG সঙ্গে site.webmanifest এক্সপোর্ট করুন, যাতে অ্যাপ ঠিকঠাক হোম-স্ক্রিন আইকনসহ ইনস্টল হয়।
Apple টাচ আইকন — 180x180 apple-touch-icon বানান, যাতে iOS বুকমার্ক আর হোম স্ক্রিনে ঝকঝকে টাইল দেখায়।
চালু সাইটের রিব্র্যান্ডিং — নতুন একটা লোগো জেনারেটরে চালিয়ে পুরো আইকন সেট একবারে বদলে ফেলুন।
ক্লায়েন্ট হ্যান্ডঅফ — ico, PNG, ম্যানিফেস্ট আর হেড স্নিপেটের এক ZIP ধরিয়ে দিন — ডেভেলপার শুধু বসিয়ে দেবে।
ছোট মাপে পাঠযোগ্যতা যাচাই — ট্রু-সাইজ 16px প্রিভিউ দিয়ে দেখুন খুঁটিনাটিওয়ালা লোগো আইকন হিসেবেও পড়া যায় কি না।
স্কয়ার নয় এমন লোগো — চওড়া ওয়ার্ডমার্ক দিন — সেন্টার-ক্রপ সেটাকে সুষম স্কয়ার ফ্যাভিকনে বদলে দেবে।
স্ট্যাটিক সাইট বা ফ্রেমওয়ার্ক প্রজেক্ট — তৈরি হেড ট্যাগগুলো Next, Astro বা সাধারণ HTML টেমপ্লেটে কপি করে শিপ করুন।
কেন IMG.DIY
সম্পূর্ণ সেট
ICO + 16/32/48/180/192/512 PNG + ম্যানিফেস্ট।
কপি-পেস্ট HTML
হুবহু লিংক ট্যাগগুলো টেক্সট ফাইল হিসেবে অন্তর্ভুক্ত।
আসল-মাপের প্রিভিউ
আগেই দেখুন আইকনটি আসল 16/32/48px-এ কেমন।
গোপনীয়
আপনার লোগো কখনও ব্রাউজার ছেড়ে যায় না।