Favicon জেনারেটর

Favicon জেনারেটর কী?#

Favicon হলো সেই ছোট আইকন যা একটি ব্রাউজার ট্যাবে, বুকমার্ক তালিকায়, ফোনের “হোম স্ক্রিনে যোগ করুন” প্রিভিউতে, এবং একটি Windows টাইলে দেখায়। অসুবিধাটি হলো “একটি favicon” একটি ফাইল নয় — ভিন্ন প্ল্যাটফর্ম ভিন্ন আকার এবং ভিন্ন ফাইলের নাম আশা করে। একটি ডেস্কটপ ব্রাউজার একটি ক্লাসিক favicon.ico চায়, iOS একটি 180×180 apple-touch-icon.png চায়, একটি ইনস্টলযোগ্য PWA একটি site.webmanifest-এ 192 এবং 512 চায়, এবং আধুনিক ব্রাউজারগুলো স্বতন্ত্র PNG-ও তোলে। সেগুলোর সবগুলো হাতে তৈরি করা, সাথে সেগুলোকে যুক্ত করে <head> ট্যাগগুলো, ঠিক সেই ধরনের ক্ষুদ্র কাজ যা আপনার কখনো দুবার হাতে করা উচিত নয়।

এই পৃষ্ঠাটি একটি একক সোর্স থেকে সম্পূর্ণ সেট তৈরি করে: হয় আপনার সরবরাহ করা একটি ছবি, বা একটি কঠিন ব্যাকগ্রাউন্ডে একটি অক্ষর (একটি দ্রুত “প্রথম অক্ষর” ব্র্যান্ড চিহ্নের জন্য সুবিধাজনক)। আপনার প্রয়োজনীয় আকারগুলো বেছে নিন, এবং এটি সবকিছু একটি .zip-এ বান্ডল করে — মাল্টি-ইমেজ ICO, স্বতন্ত্র PNG, webmanifest, এবং একটি HTML স্নিপেট যা পেস্ট করার মতো সঠিক <link> এবং <meta> ট্যাগ তালিকাভুক্ত করে। সমস্ত রাস্টারাইজেশন আপনার ব্রাউজারে হয়।

যেভাবে ব্যবহার করবেন#

1. একটি উৎস বেছে নিন:
   • ছবি — যেকোনো আনুমানিক বর্গাকার ছবি টেনে আনুন (বা বেছে নিন)। এটি প্রতিটি নির্বাচিত আকারে আঁকা হয়।
   • অক্ষর — এক বা দুটি অক্ষর টাইপ করুন (ডিফল্ট A), একটি পটভূমির রং (ডিফল্ট আকাশ নীল) এবং একটি লেখার রং (ডিফল্ট সাদা) বেছে নিন। অক্ষরটি প্রতিটি আকারে ব্যাকগ্রাউন্ডে কেন্দ্রে রাখা হয়।
2. 16, 32, 48, 180, 192, 512 থেকে আপনার প্রয়োজনীয় আকার টিক চিহ্ন দিন। ডিফল্টভাবে সব ছয়টি চালু। 48 শুধুমাত্র favicon.ico-এর ভেতরে থাকে (কোনো স্বতন্ত্র PNG নেই), তাই এটি স্বয়ংক্রিয়ভাবে বান্ডল করা হয় যখন 16 এবং 32 থাকে।
3. পূর্বরূপ ক্যানভাসটি দেখুন — এটি একটি স্বচ্ছতা চেকারবোর্ডে বৃহত্তম নির্বাচিত আকার রেন্ডার করে যাতে আপনি যেকোনো স্বচ্ছ এলাকা দেখতে পান।
4. .zip ডাউনলোড ক্লিক করুন। আর্কাইভে রয়েছে, ডিফল্ট সমস্ত-আকার নির্বাচনের জন্য:
   • favicon.ico — একটি মাল্টি-ইমেজ ICO যা 16, 32, এবং 48-কে এম্বেডেড PNG হিসেবে বান্ডল করে (Vista+ ফরম্যাট যা প্রতিটি আধুনিক ব্রাউজার গ্রহণ করে)।
   • favicon-16x16.png, favicon-32x32.png — স্বতন্ত্র PNG।
   • apple-touch-icon.png — ১৮০×১৮০ iOS আইকন।
   • android-chrome-192x192.png, android-chrome-512x512.png — PWA ম্যানিফেস্ট আইকন।
   • site.webmanifest — 192/512 আইকনগুলো উল্লেখ করে, থিম এবং ব্যাকগ্রাউন্ড রঙ সহ।
   • html-snippet.html — <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest">, এবং <meta name="theme-color"> ট্যাগ।
5. আপনার সাইট রুটে আনজিপ করুন, স্নিপেটটি আপনার <head>-এ পেস্ট করুন, এবং আইকনগুলো / থেকে সমাধান হয়।

প্রধান বৈশিষ্ট্য#

• একটি zip-এ একটি সম্পূর্ণ, প্রচলিত-নামের সেট। ফাইলের নামগুলো (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) মেলে যা ব্রাউজার এবং বিল্ড টুল ডিফল্টভাবে সাইট রুটে খুঁজে।
• স্ব-লিখিত ICO এনকোডার। একটি সঠিক মাল্টি-ইমেজ Vista+ ICO (ICONDIR + ICONDIRENTRY টেবিল + এম্বেডেড PNG পেলোড), শূন্য থেকে লেখা — একটি একক-ইমেজ 32×32 স্টাব নয়।
• তাৎক্ষণিক ব্র্যান্ড চিহ্নের জন্য অক্ষর মোড। দুটি অক্ষর, দুটি রঙ পিকার, সম্পন্ন — অভ্যন্তরীণ টুল এবং ডেমোর জন্য কার্যকর যেগুলোর ত্রিশ সেকেন্ডে একটি স্বীকৃতিযোগ্য আইকন প্রয়োজন।
• শুধুমাত্র আপনার আসলে প্রয়োজনীয় ফাইল। একটি আকার আনটিক করুন এবং তার PNG বা ম্যানিফেস্ট এন্ট্রির কোনোটাই নির্গত হয় না; HTML স্নিপেটটি মেলাতে পুনরায় তৈরি করা হয়।
• পেস্ট-প্রস্তুত head স্নিপেট। সঠিক <link> এবং <meta> লাইনগুলো, শুধুমাত্র উপস্থিত অ্যাসেটে সীমাবদ্ধ, যাতে আপনি এমন ফাইলের রেফারেন্স পেস্ট না করেন যা আপনি তৈরি করেননি।
• ১০০% স্থানীয়। সোর্স ছবি বা অক্ষর ব্রাউজারে রাস্টারাইজ করা হয়; zip ব্রাউজারে একত্রিত করা হয়। কোনো আপলোড নেই।

বিস্তারিত উদাহরণ#

আপনি “Glide” নামের একটি সাইড প্রজেক্টের জন্য favicon চান। উৎস: অক্ষর বেছে নিন, G টাইপ করুন, পটভূমির রং #0ea5e9 এবং লেখার রং #ffffff সেট করুন, সব ছয়টি আকার টিক রাখুন, এবং .zip ডাউনলোড ক্লিক করুন। আনজিপ করলে পাওয়া যায়:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

html-snippet.html হুবহু এটি ধারণ করে:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

সেই আটটি ফাইল আপনার সাইট রুটে ফেলুন, ছয়টি লাইন আপনার <head>-এ পেস্ট করুন, এবং প্রতিটি প্ল্যাটফর্ম — ব্রাউজার ট্যাব, iOS হোম স্ক্রিন, Android PWA — সঠিক আইকন সমাধান করে।

সাধারণ জিজ্ঞাসা#

কেন কোনো স্বতন্ত্র 48×48 PNG নেই?#

48 শুধুমাত্র favicon.ico-এর ভেতরে ব্যবহৃত হয় (কিছু লিগেসি টুলিং ICO থেকে 48 এন্ট্রি পড়ে)। একটি স্বতন্ত্র favicon-48x48.png নির্গত করা শুধু মৃত ওজন হবে যা কোনো ব্রাউজার আনে না, তাই টুলটি 48-কে ICO-তে বান্ডল করে এবং স্বতন্ত্র ফাইলটি এড়িয়ে যায়।

আমার কি সত্যিই সব ছয়টি আকার প্রয়োজন?#

সম্পূর্ণ কভারেজের জন্য, হ্যাঁ। আপনি যদি শুধু ব্রাউজার ট্যাবের কথা চিন্তা করেন এবং iOS বা PWA নয়, তবে 180, 192, এবং 512 আনটিক করুন এবং আপনি শুধু ICO এবং 16/32 PNG পান — অনেক ছোট বান্ডল। স্নিপেটটি তখন শুধু icon লিঙ্ক ধারণ করে, কোনো ম্যানিফেস্ট বা apple-touch লাইন নেই।

ICO-কে “এম্বেডেড PNG” হিসেবে বর্ণনা করা হয়েছে — এটা কি বৈধ?#

হ্যাঁ। Windows Vista থেকে, একটি ICO PNG পেলোড এম্বেড করতে পারে (পুরোনো BMP ফরম্যাটের বদলে), এবং প্রতিটি আধুনিক ব্রাউজার এই রূপটি পড়ে। এটি একটি পৃথক BMP এনকোডার এড়ায় এবং 48 আকারের জন্য ছোট ফাইল তৈরি করে।

আমার অক্ষর একটি আকারে কেন্দ্রে নেই।#

অক্ষরটি একটি সামঞ্জস্যপূর্ণ ফন্ট ব্যবহার করে প্রতিটি আকারে ক্যানভাসে কেন্দ্রে রাখা হয়; খুব বর্গাকার অক্ষর (যেমন M) এবং অ্যাসেন্ডার বা ডিসেন্ডার সহ অক্ষরগুলো ফন্ট মেট্রিক্সের কারণে সামান্য উঁচু বা নিচু দেখাতে পারে। যদি পিক্সেল-নির্ভুল কেন্দ্রীকরণ গুরুত্বপূর্ণ হয়, তবে চিহ্নটি একটি ইমেজ এডিটরে রেন্ডার করুন এবং উৎস: ছবি ব্যবহার করুন।