এই উদাহরণটি অনুসরণ করুন, তারপর একই কন্ট্রোলগুলো আপনার নিজের ইমেজের জন্য ব্যবহার করুন। ফেভিকন / ICO জেনারেটর খুলুন.
একটি স্পষ্ট লোগো বেছে নিন অথবা আদ্যক্ষর দিয়ে শুরু করুন
Favicon / ICO জেনারেটর খুলুন এবং ইমেজ বেছে নিন। একটি PNG, JPG, JPEG, WebP অথবা GIF আপলোড করুন, অথবা Try a sample নির্বাচন করুন। এই উদাহরণে favicon-orbit.png ব্যবহার করা হয়েছে, যা একটি 512 × 512 পিক্সেল ভায়োলেট অরবিট মার্ক যার কোণাগুলো স্বচ্ছ। ইনপুটটি 202,491 বাইটের।
লোগো তৈরি না থাকলে, টুল পেজে টেক্সট নির্বাচন করুন। এক বা দুটি অক্ষর লিখুন এবং চালিয়ে যান বেছে নিন। এডিটরে Modern sans, Classic serif এবং Monospace ফন্ট রয়েছে, সাথে আলাদা টেক্সট ও ব্যাকগ্রাউন্ড কালার। তিনটি পর্যন্ত অক্ষর দেওয়া যায়, তবে বেশি অক্ষর ছোট আকারে বোঝা কঠিন হতে পারে।
মূল আর্টওয়ার্কটি রাখুন। জেনারেটর নতুন আইকন ফাইল তৈরি করে এবং সোর্স ফাইলটি ওভাররাইট করে না। GIF ইনপুট একটি অ্যানিমেটেড ফ্যাভিকনের পরিবর্তে স্থির আইকন হয়ে যায়।
মনোগ্রামের জন্য, ফন্ট মেনুতে তিনটি স্টাইল থাকে। সমর্থিত ডেস্কটপ ব্রাউজারে সিস্টেম ফন্ট ব্যবহার করুন নির্বাচন করুন এবং আপনার ডিভাইসে ইনস্টল করা ফন্টগুলো যোগ করার অনুমতি দিন। আগের ও পরের অ্যারো ব্যবহার করে ফন্টগুলো তুলনা করুন, অথবা একটি ফ্যামিলি বেছে নিয়ে লাইভ প্রিভিউ দেখুন, বিশেষ করে 16 পিক্সেল আকারে। ফন্টগুলো আপনার ডিভাইসেই থাকে; অন্তর্ভুক্ত স্টাইলগুলো অনুমতি ছাড়াই কাজ করে।
একটি সাধারণ সিলুয়েট ব্যবহার করুন। একটি বিস্তারিত ছবি 512 পিক্সেল আকারে আকর্ষণীয় দেখালেও 16 পিক্সেল আকারে অস্পষ্ট হয়ে যেতে পারে।
ফ্রেম ঠিক করুন এবং ছোট প্রিভিউগুলো দেখুন
এডিটর হালকা ও গাঢ় ব্রাউজার ট্যাব এবং সাধারণ আইকন সাইজের প্রিভিউ দেখায়। প্রথমে 16-পিক্সেল উদাহরণটি দেখুন; এটি মার্কটি চেনা যাচ্ছে কি না তা বোঝার সবচেয়ে কঠোর পরীক্ষা। অ্যাপল টাচ প্রিভিউ একটি 180-পিক্সেল এক্সপোর্ট নির্দেশ করে এবং ওয়ার্কস্পেসে ছোট আকারে দেখানো হয়।
ফোনে, সেটিংস খুলুন। Create from-কে Uploaded image এবং Image fit-কে “পুরো ছবিটি দেখুন”-এ রাখুন। এই নমুনার জন্য, Space around content-কে 0 সেট করুন এবং স্বচ্ছ ব্যাকগ্রাউন্ড চালু করুন। সোর্সে আগে থেকেই গোলাকার ভায়োলেট শেপ এবং ক্লিয়ার মার্জিন আছে, তাই আলাদা রঙিন ব্যাকগ্রাউন্ডের প্রয়োজন নেই।
অন্য সোর্সের ক্ষেত্রে, পুরো ছবিটি দেখুন তার প্রান্তগুলো বজায় রাখে, কিন্তু Fill the icon সেগুলোকে ক্রপ করতে পারে। Rounded square, Square এবং Circle বাইরের আকৃতি নির্ধারণ করে। স্বচ্ছ ব্যাকগ্রাউন্ড স্বচ্ছ অংশগুলো বজায় রাখে কিন্তু ছবির ভেতরে থাকা অস্বচ্ছ ব্যাকগ্রাউন্ড সরাতে পারে না। প্রতিটি ফ্রেম পরিবর্তনের পর সবচেয়ে ছোট প্রিভিউটি দেখুন।
স্বচ্ছ কোণাযুক্ত লোগোতে আলাদা অস্বচ্ছ ব্যাকগ্রাউন্ড যোগ করলে একটি অনাকাঙ্ক্ষিত দ্বিতীয় ফ্রেম চলে আসতে পারে। উভয় ব্যাকগ্রাউন্ড অপশনই প্রিভিউ করে দেখুন।
এই নির্দেশিকার উদাহরণ
একটি নমুনা ব্যবহার করে দেখুন: favicon-orbit.png, 512 × 512 পিক্সেল। আপলোড করা ইমেজ; পুরো ইমেজ দেখান; গোলাকার বর্গক্ষেত্র; কন্টেন্টের চারপাশে জায়গা 0%; স্বচ্ছ ব্যাকগ্রাউন্ড সক্রিয়; ওয়েবসাইট আইকন প্যাকেজ (ZIP); ওয়েবসাইটের নাম আমার ওয়েবসাইট।
- উৎস ছবি
- 512 × 512 PNG · 202,491 বাইট
- ICO ফ্রেম
- 16, 24, 32, 48, 64, 128 এবং 256 পিক্সেল
- প্যাকেজ
- 9 ফাইল · 304,351 বাইট
- প্রদর্শিত ফলাফল
- আসল 256 × 256 ICO ফ্রেম
একটি মাল্টি-সাইজ ICO অথবা ওয়েবসাইট প্যাকেজ বেছে নিন
Download-এর অধীনে, এই উদাহরণের জন্য Website icon package (ZIP) বেছে নিন। নমুনার জন্য Website name-কে My website রাখুন, অথবা আপনার প্রজেক্টের জন্য আসল ব্র্যান্ড নাম দিন। এই নামটি site.webmanifest-এ ব্যবহৃত হয়; এটি ইমেজের ওপর টেক্সট হিসেবে যোগ করা হয় না।
Start নির্বাচন করুন। ব্রাউজার একটি সাত-ফ্রেমের favicon.ico তৈরি করবে যার স্কয়ার ইমেজগুলো 16, 24, 32, 48, 64, 128 এবং 256 পিক্সেলের। এটি PNG আইকনগুলো 16, 32, 48, 180, 192 এবং 512 পিক্সেল আকারে, একটি ম্যানিফেস্ট এবং ইনস্টলেশন নির্দেশিকা তৈরি করবে। ফলাফলটি একটি ZIP ফাইল, প্রতিটি আইকনের জন্য আলাদা ডাউনলোড বাটন নয়।
যদি আপনার শুধু একটি ক্লাসিক favicon.ico প্রয়োজন হয়, তবে Multi-size ICO বেছে নিন। এটি তখন কার্যকর যখন ওয়েবসাইট প্ল্যাটফর্ম একটি ICO আপলোড গ্রহণ করে এবং আলাদা প্যাকেজের প্রয়োজন হয় না।
প্যাকেজটি ওয়েবসাইট আইকন অ্যাসেটের একটি সেট। এটি স্বয়ংক্রিয়ভাবে সাইটটিকে প্রগ্রেসিভ ওয়েব অ্যাপে পরিণত করে না।
আইকন ফাইলগুলো ডাউনলোড, ইনস্টল এবং যাচাই করুন
ডাউনলোড করলে website-icons.zip সেভ হবে। আসল উদাহরণটিতে নয়টি ফাইল আছে এবং এটি 304,351 বাইটের। উপরের তুলনাটি 512-পিক্সেল সোর্স এবং এক্সপোর্ট করা ICO থেকে নেওয়া আসল 256-পিক্সেল ফ্রেমটি দেখায়, কোনো সিমুলেটেড ব্রাউজার স্ক্রিনশট নয়।
ZIP ফাইলটি এক্সট্র্যাক্ট করুন, আইকন ফাইলগুলো আপনার ওয়েবসাইটের রুটে আপলোড করুন এবং INSTALL.txt পড়ুন। এতে ICO, PNG আইকন, অ্যাপল টাচ আইকন এবং ওয়েব ম্যানিফেস্টের জন্য HTML লিঙ্ক ট্যাগ অন্তর্ভুক্ত আছে। যদি ফাইলগুলো সাবফোল্ডারে রাখেন, তবে HTML পাথ এবং site.webmanifest-এর ভেতরের আইকন পাথগুলো আপডেট করুন।
একটি নতুন ব্রাউজার ট্যাবে এবং আপনার প্রয়োজনীয় ডিভাইসগুলোতে সাইটটি পরীক্ষা করুন। ব্রাউজারগুলো ফ্যাভিকন ক্যাশে করে রাখতে পারে, তাই পুরনো আইকন দেখা মানেই এই নয় যে ইনস্টলেশন ব্যর্থ হয়েছে। এডিটর রিফ্রেশ করার আগে সোর্স ইমেজ এবং ডাউনলোড করা প্যাকেজটি সংরক্ষণ করুন, কারণ রিফ্রেশ করলে তা মূল টুল পেজে ফিরে যায়।
একটি ক্যানোনিকাল আইকন লোকেশন বেছে নিন এবং HTML পাথগুলো সামঞ্জস্যপূর্ণ রাখুন। জেনারেটরটি অ্যাসেট তৈরি করে; সেগুলো প্রকাশ করা আপনার ওয়েবসাইট ওয়ার্কফ্লোর অংশ।
সাধারণ প্রশ্ন
আমি কি লোগো আপলোড না করেই ফ্যাভিকন তৈরি করতে পারি?
হ্যাঁ। টেক্সট নির্বাচন করুন, আপনার আদ্যক্ষর লিখুন, তারপর এডিটরে ফন্ট, রঙ, আকৃতি এবং স্পেসিং বেছে নিন।
ICO ফাইলে কোন কোন আকার থাকে?
ICO-এ সাতটি PNG-ভিত্তিক ফ্রেম থাকে: 16, 24, 32, 48, 64, 128 এবং 256 পিক্সেল বর্গাকার। ব্রাউজার একটি উপযুক্ত ফ্রেম নির্বাচন করে।
ওয়েবসাইট জিপ (ZIP)-এ কী কী অন্তর্ভুক্ত থাকে?
এতে favicon.ico, ব্রাউজার, অ্যাপল এবং অ্যান্ড্রয়েড ব্যবহারের জন্য ছয়টি PNG আইকন, site.webmanifest এবং HTML লিঙ্ক ট্যাগসহ INSTALL.txt থাকে।
আমার ফ্যাভিকনের কি স্বচ্ছ ব্যাকগ্রাউন্ড থাকতে পারে?
হ্যাঁ। স্বচ্ছ ব্যাকগ্রাউন্ড সক্রিয় করুন। এটি সোর্সের চারপাশের স্বচ্ছ অংশগুলো বজায় রাখে; এটি কোনো ছবি থেকে অস্বচ্ছ ব্যাকগ্রাউন্ড মুছে ফেলে না।
ছবিটি কি কনভার্সনের জন্য আপলোড করা হয়?
না। এই টুলটি আপনার ব্রাউজারে আইকন ফাইলগুলো তৈরি এবং প্যাকেজ করে। ডাউনলোড করা ফাইলগুলো সংরক্ষণ করুন কারণ এডিটরটি কোনো স্থায়ী প্রজেক্ট স্টোরেজ নয়।
আমি কি আমার কম্পিউটারে ইনস্টল করা ফন্ট ব্যবহার করতে পারি?
হ্যাঁ, যখন আপনার ব্রাউজার লোকাল ফন্ট অ্যাক্সেস সমর্থন করে। টেক্সট/মনোগ্রাম বেছে নিন, সিস্টেম ফন্ট ব্যবহার করুন নির্বাচন করুন এবং ব্রাউজারের অনুমতি দিন। আপনার উপলব্ধ ফন্ট ফ্যামিলিগুলো ফন্ট তালিকায় প্রদর্শিত হবে। অনুমতি প্রত্যাখ্যান করা হলে বা লোকাল ফন্ট অ্যাক্সেস উপলব্ধ না থাকলে অন্তর্ভুক্ত স্টাইলগুলো ব্যবহারযোগ্য থাকে।
আপনার পরবর্তী ওয়েবসাইটকে একটি স্পষ্ট ছোট স্বাক্ষর দিন।
একটি নমুনা ব্যবহার করে দেখুন বা আপনার নিজের ফাইল ব্যবহার করুন এবং শেয়ার করার আগে ফলাফল পর্যালোচনা করুন।
