কিভাবে একটি ফেভিকন তৈরি করবেন
একটি ফেভিকন তৈরি করা সঠিক টুল দিয়ে দুই মিনিটের কাজ। একটি বর্গাকার সোর্স ইমেজ থেকে শুরু করুন — কমপক্ষে 512×512 পিক্সেল — এটিকে favicon generator এর মাধ্যমে চালান এবং একটি সম্পূর্ণ প্যাকেজ পান: মাল্টি-সাইজ .ico, SVG, apple-touch-icon, এবং ম্যানিফেস্ট PNGs৷ এই গাইডটি উৎস প্রস্তুতি থেকে ব্রাউজার যাচাইকরণ পর্যন্ত প্রতিটি ধাপে চলে। একটি গভীর-ডাইভ রেফারেন্সের জন্য full tutorial দেখুন।
একটি ফ্যাভিকন হল ছোট আইকন যা একটি ব্রাউজার ট্যাব বার, ঠিকানা বার এবং বুকমার্ক তালিকায় প্রদর্শন করে। মোবাইলে, কোনো ব্যবহারকারী আপনার সাইট সংরক্ষণ করলে এটি হোম-স্ক্রীন আইকনে পরিণত হয়। Windows-এ এটি টাস্কবার পিন এবং ডেস্কটপ শর্টকাটগুলিতে প্রদর্শিত হয়। ফ্যাভিকনটি সঠিকভাবে পাওয়া একটি ছোট প্রচেষ্টা যার বাইরের আকারের ব্র্যান্ড প্রভাব রয়েছে — প্রতিটি পৃষ্ঠা দৃশ্য ব্যবহারকারীর ট্যাবে বসে থাকা আপনার আইকন দিয়ে শুরু হয়।
আধুনিক ফেভিকন সেটআপ একটি একক ফাইল নয় - এটি একটি সমন্বিত সেট। একটি বহু-আকার .ico সার্বজনীন ব্রাউজার ফলব্যাক পরিচালনা করে। একটি SVG ডার্ক-মোড সমর্থন সহ আধুনিক ব্রাউজারগুলিতে খাস্তা স্কেলযোগ্য রেন্ডারিং সরবরাহ করে। একটি 180×180 PNG (apple-touch-icon) হল যা iOS হোম-স্ক্রীন ইনস্টল করার জন্য ব্যবহার করে। একটি 192×192 এবং একটি 512×512 PNG Android PWA ইনস্টল প্রম্পট ফিড করে। একটি ভাল-প্রস্তুত সোর্স ইমেজ একযোগে এই সব তৈরি করে।
উত্স ইমেজ প্রস্তুতি সবচেয়ে উপেক্ষিত পদক্ষেপ. আপনার লোগো অবশ্যই বর্গাকার হতে হবে — একটি অসমমিত ফসল সর্বদা একটি প্রসারিত ফলাফল তৈরি করে। আপনার ব্র্যান্ড চিহ্নের একটি সরলীকৃত সংস্করণ ডিজাইন করুন যা ছোট আকারে স্পষ্টভাবে পড়ে: সূক্ষ্ম রেখাগুলি হ্রাস করুন, ক্ষুদ্র পাঠ্য সরান এবং বৈসাদৃশ্য বাড়ান৷ 512×512 এ যা মার্জিত দেখায় তা 16×16 এ একটি অপঠনযোগ্য ব্লব হয়ে উঠতে পারে যদি আপনি এই সরলীকরণ পাসটি এড়িয়ে যান।
SVG হল আদর্শ উৎস বিন্যাস কারণ এটি রেজোলিউশন-স্বাধীন। একটি ভেক্টর গ্রাফিক মানের ক্ষতি ছাড়াই যেকোনো পিক্সেল ঘনত্বে রাস্টারাইজ করে। যদি আপনার কাছে শুধুমাত্র একটি রাস্টার PNG বা JPG থাকে, তবে এটি তৈরি করার আগে এটি কমপক্ষে 512×512 হয় তা নিশ্চিত করুন — ছোট কিছু থেকে ডাউনস্কেল করা অস্পষ্টতার পরিচয় দেয় যা প্রতিটি রিসাইজ ধাপের মাধ্যমে যৌগিক হয় এবং একটি অস্পষ্ট ট্যাব আইকনে পরিণত হয়।
.ico বিন্যাস একটি ধারক, একটি একক ছবি নয়। এটি একাধিক রাস্টার ফ্রেম ধারণ করে — সাধারণত 16×16, 32×32, 48×48, এবং 64×64 — একটি ফাইলে। ব্রাউজারটি ICO ডিরেক্টরিকে পার্স করে এবং শুধুমাত্র সেই ফ্রেমটি রেন্ডার করে যা এটির প্রয়োজনীয় ডিসপ্লে ঘনত্বের সাথে সবচেয়ে ঘনিষ্ঠভাবে মেলে৷ এই একক-ফাইল পদ্ধতির অর্থ হল প্রতিটি রেজোলিউশনের জন্য আপনার আলাদা লিঙ্ক ট্যাগের প্রয়োজন নেই — একটি ট্যাগ সমস্ত ট্যাব আকারকে কভার করে।
favicon generator-এ আপনার সোর্স ইমেজ আপলোড করুন। টুলটি আপনার ব্রাউজারে স্থানীয়ভাবে সবকিছু প্রসেস করে — আপনার ছবি কখনই আপনার ডিভাইস ছেড়ে যায় না। কয়েক সেকেন্ডের মধ্যে এটি favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, এবং site.webmanifest এবং পেস্ট-রেডি XXPHX4 লিঙ্ক সহ একটি ডাউনলোড প্যাকেজ তৈরি করে৷
ফাইল স্থাপন সোজা. আপনার সাইটের সর্বজনীন রুট ডিরেক্টরিতে সমস্ত উত্পন্ন ফাইল ড্রপ করুন — একই ফোল্ডার যা আপনার index.html পরিবেশন করে৷ Vite এবং React অ্যাপ প্রোজেক্ট তৈরি করার জন্য এটি হল /public ফোল্ডার। Next.js App Router প্রকল্পগুলির জন্য, /app-এর ভিতরে favicon.ico এবং /public-এ PNG ফাইলগুলি রাখুন৷ স্ট্যাটিক সাইটগুলির জন্য, আপনার HTML ফাইলগুলির পাশাপাশি সবকিছু ফেলে দিন৷
HTML লিঙ্ক ট্যাগগুলি ব্রাউজারকে প্রতিটি প্রসঙ্গের জন্য কোন ফাইল ব্যবহার করতে হবে তা বলে৷ সর্বনিম্ন একটি লাইন: `<link rel='icon' href='/favicon.ico'>`৷ সম্পূর্ণ প্রস্তাবিত সেটটিতে আরও তিনটি লাইন যোগ করা হয়েছে: একটি SVG ভেরিয়েন্টের জন্য, একটি apple-touch-icon-এর জন্য এবং একটি ওয়েব ম্যানিফেস্টের জন্য৷ আপনার `<head>` উপাদানের ভিতরে জেনারেট করা স্নিপেট পেস্ট করুন। ট্যাগ অর্ডার যতক্ষণ পর্যন্ত `</head>` এর আগে থাকে ততক্ষণ কোনো ব্যাপার নয়।
ব্রাউজার ক্যাশিং হল বিভ্রান্তির প্রধান কারণ যখন একটি ফেভিকন আপডেট হয় না। ব্রাউজার ক্যাশে /favicon.ico প্রতি মূল এবং স্ট্যান্ডার্ড ক্যাশে-নিয়ন্ত্রণ শিরোনামগুলি অন্যান্য সম্পদের জন্য যেভাবে করে সেভাবে সম্মান নাও করতে পারে। যদি আপনার পুরানো আইকনটি টিকে থাকে, একটি নতুন ছদ্মবেশী উইন্ডো খুলুন, বা ব্রাউজারগুলিকে আপডেট করা ফাইলটি আনতে বাধ্য করতে আপনার লিঙ্ক ট্যাগে href-এ `?v=2`-এর মতো একটি ক্যাশে-বাস্টার ক্যোয়ারী স্ট্রিং যুক্ত করুন৷
সাধারণ ভুলগুলির মধ্যে রয়েছে একটি অ-বর্গাকার ছবি আপলোড করা (প্রসারিত আইকন তৈরি করে), 256×256 পিক্সেলের নীচে একটি উত্স ব্যবহার করা (বড় ডিসপ্লে আকারে ব্লার) এবং apple-touch-icon বাদ দেওয়া (iOS হোম-স্ক্রীন ইনস্টলগুলি পরিবর্তে একটি পৃষ্ঠার স্ক্রিনশট দেখায়)। তিনটিই একটি বর্গাকার 512×512 PNG বা SVG উত্স থেকে শুরু করে এবং জেনারেটরকে প্রতিটি আউটপুট আকার পরিচালনা করার মাধ্যমে সমাধান করা হয়।
ডার্ক-মোড সমর্থন শুরু থেকেই তৈরি করা মূল্যবান। ব্যবহারকারীর সিস্টেম ডার্ক মোডে থাকলে অনেক ব্রাউজার ট্যাব বারটিকে একটি অন্ধকার ক্রোমে রেন্ডার করে। যদি আপনার আইকনটি একটি স্বচ্ছ ব্যাকগ্রাউন্ডে একটি অন্ধকার চিহ্ন হয় তবে এটি একটি অন্ধকার ট্যাবে অদৃশ্য হয়ে যেতে পারে। একটি এমবেডেড `@media (prefers-color-scheme: dark)` শৈলী ব্লক সহ একটি SVG ফ্যাভিকন পাঠান যা ফিল কালার পরিবর্তন করে — কোনও অতিরিক্ত HTML ট্যাগের প্রয়োজন নেই, শুধুমাত্র একটি আপডেট করা SVG ফাইল৷
স্থাপনের পর live favicon tester ব্যবহার করে আপনার ফেভিকন যাচাই করুন। পরীক্ষক ব্রাউজার ট্যাব, বুকমার্ক এবং ইন্সটল-প্রম্পট প্রসঙ্গগুলিকে অনুকরণ করে এবং দেখায় যে কীভাবে আপনার আইকনটি 16, 32, 48, 128, এবং 512 পিক্সেল পাশাপাশি রেন্ডার হয়৷ এছাড়াও ম্যানুয়ালি Chrome এবং Safari-এ একটি পিন করা ট্যাব পরীক্ষা করুন এবং apple-touch-icon নিশ্চিত করতে iOS-এ 'হোম স্ক্রীনে যোগ করুন' ব্যবহার করুন৷
প্ল্যাটফর্ম-নির্দিষ্ট ওয়াকথ্রুগুলির জন্য, favicon for WordPress, favicon for Shopify, favicon for React, এবং favicon for Next.js দেখুন। উত্পন্ন ফাইল সেটটি সমস্ত প্ল্যাটফর্ম জুড়ে অভিন্ন — আপনি যেখানে ফাইলগুলি আপলোড করেন এবং কীভাবে প্ল্যাটফর্ম HTML লিঙ্ক ট্যাগগুলিকে ইনজেক্ট করে বা ওভাররাইড করে তা আলাদা হয়৷
আপনি যখনই রিব্র্যান্ড করবেন তখন আপনার ফেভিকনটি আবার দেখুন। একটি সাইট পুনঃডিজাইন লাইভ হওয়ার পরেও ক্যাশে করা ফেভিকনগুলি বুকমার্ক এবং মোবাইল হোম স্ক্রিনে টিকে থাকে৷ আপনার লিঙ্ক ট্যাগ href-এ সংস্করণ স্ট্রিং আপডেট করা ব্রাউজারগুলিকে পরবর্তী ভিজিটে নতুন ফাইল আনতে বাধ্য করে, ধীরে ধীরে সমস্ত ক্যাশে করা অবস্থানে পুরানো আইকনটি প্রতিস্থাপন করে৷ ফাইল-আকার এবং সামঞ্জস্যপূর্ণ ট্রেড-অফের বিন্যাস-দ্বারা-ফরম্যাট ব্রেকডাউনের জন্য best favicon format গাইড দেখুন।
এটি কিভাবে কাজ করে
- 1
একটি বর্গাকার উৎস চিত্র প্রস্তুত করুন
আপনার লোগো বা আইকন রপ্তানি করুন একটি 512×512 PNG একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ, বা একটি SVG একটি বর্গক্ষেত্র viewBox (যেমন, `viewBox='0 0 512 512'`)। সূক্ষ্ম বিবরণ সরলীকরণ করুন যা 16×16 এ অদৃশ্য হবে।
- 2
আপনার ফেভিকন প্যাকেজ তৈরি করুন
উত্সটি [favicon generator](tool:favicon-generator) এ আপলোড করুন৷ টুলটি favicon.ico (মাল্টি-সাইজ 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, এবং XXPH1X-এ সবগুলি পাস করে।
- 3
আপনার সাইটের রুটে সমস্ত ফাইল কপি করুন
ডাউনলোড জিপ থেকে প্রতিটি ফাইল আপনার প্রোজেক্টের পাবলিক রুটে রাখুন — যে ডিরেক্টরিটি index.html পরিবেশন করে। Next.js App Router-এর জন্য, favicon.ico /app-এ যায়; PNGগুলি /public-এ যায়৷
- 4
HTML লিঙ্ক ট্যাগগুলিকে <head>-এ আটকান৷
জেনারেট করা HTML স্নিপেটটি অনুলিপি করুন এবং এটিকে আপনার `<head>` উপাদানের মধ্যে যোগ করুন। সম্পূর্ণ সেটটি .ico ফলব্যাক, SVG ভেরিয়েন্ট, apple-touch-icon, এবং ম্যানিফেস্ট লিঙ্ককে কভার করে — মোট ছয়টি লাইন।
- 5
ব্রাউজার এবং ডিভাইস জুড়ে যাচাই করুন
Chrome, Safari, Firefox, এবং Edge-এ আপনার সাইট খুলুন। ট্যাব, বুকমার্ক বার এবং ঠিকানা বার পরিদর্শন করুন। iOS-এ, শেয়ার শীটে আলতো চাপুন এবং apple-touch-icon পরীক্ষা করতে 'হোম স্ক্রিনে যোগ করুন'৷ দ্রুত সিমুলেশনের জন্য [favicon tester](utility:favicon-tester) ব্যবহার করুন।
- 6
একটি বিদ্যমান ফেভিকন আপডেট করার সময় ক্যাশে-বাস্ট
যদি একটি লাইভ ফেভিকন প্রতিস্থাপন করা হয়, তাহলে আপনার লিঙ্ক ট্যাগ href (`?v=2`, `?v=3`, ইত্যাদি) সংস্করণ স্ট্রিং বৃদ্ধি করুন। এটি সমস্ত ব্রাউজারকে ক্যাশে করা সংস্করণ পরিবেশন করার পরিবর্তে পরবর্তী পৃষ্ঠা লোডে আপডেট করা ফাইল আনতে বাধ্য করে৷
এখনই চেষ্টা করুন
এখন আপনার ফেভিকন তৈরি করুন
ফেভিকন জেনারেটরসাধারণ প্রশ্ন
একটি ফেভিকন তৈরি করার সবচেয়ে সহজ উপায় কি?+
FetchFavicon জেনারেটরে একটি 512×512 বর্গ PNG বা SVG আপলোড করুন৷ এটি সমস্ত প্রয়োজনীয় ফাইল তৈরি করে — .ico, SVG, apple-touch-icon, ম্যানিফেস্ট PNG — প্লাস পেস্ট-রেডি HTML এক সেকেন্ডের মধ্যে, কোনও সাইনআপ ছাড়াই এবং কোনও সার্ভার আপলোড নেই৷
আমার উৎস ইমেজ কি আকার হওয়া উচিত?+
কমপক্ষে 512×512 পিক্সেল, আদর্শভাবে একটি SVG হিসাবে। Windows দ্বারা ব্যবহৃত 256×256 আকারে এবং PWA ইনস্টল প্রম্পটের জন্য প্রয়োজনীয় 512×512 আকারে ছোট ঝুঁকিগুলি দৃশ্যমান অস্পষ্ট হয়ে যায়৷ একটি ছোট ইমেজ বাড়ালে প্রতিটি রিসাইজ ধাপে গুণমানের ক্ষতি হয়।
আমার কি একটি apple-touch-icon দরকার?+
হ্যাঁ, যদি কোনো দর্শক আইফোন বা আইপ্যাড ব্যবহার করেন। এটি ছাড়া, iOS হোম-স্ক্রীন ইনস্টলগুলি আপনার ব্র্যান্ড চিহ্নের পরিবর্তে আপনার পৃষ্ঠার একটি নিম্ন-মানের স্ক্রিনশট থাম্বনেল দেখায়। `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>` এর সাথে লিঙ্কযুক্ত একটি 180×180 PNG যা আপনার প্রয়োজন।
কেন আমার ফেভিকন ব্রাউজার ট্যাবে দেখায় না?+
প্রায়শই এটি একটি ক্যাশিং সমস্যা। একটি ব্যক্তিগত/ছদ্মবেশী উইন্ডো খুলুন এবং আপনার সাইটে নেভিগেট করুন। যদি এটি এখনও প্রদর্শিত না হয়, তাহলে যাচাই করুন যে favicon.ico আপনার ডোমেন রুটে পরিবেশন করা হয়েছে এবং লিঙ্ক ট্যাগ href পাথ সঠিকভাবে সমাধান করেছে — টাইপো এবং অনুপস্থিত লিডিং স্ল্যাশগুলি পরীক্ষা করুন৷
আমার কি .ico এবং SVG দুটোই দরকার?+
হ্যাঁ, সম্পূর্ণ কভারেজের জন্য। .ico লিগ্যাসি ব্রাউজার, Windows শর্টকাট এবং তৃতীয় পক্ষের সরঞ্জামগুলি পরিচালনা করে যা সরাসরি /favicon.ico নিয়ে আসে। SVG Chrome, Firefox, Edge, এবং Safari 15+ এ ক্রিস্প রেন্ডারিং পরিচালনা করে এবং ডার্ক-মোড কালার সুইচিং সমর্থন করে। সম্মিলিত ফাইলের আকার সাধারণত 30 KB এর নিচে হয়।
একটি ফেভিকন পরিবর্তন প্রচার করতে কতক্ষণ সময় নেয়?+
সেকেন্ড থেকে কয়েক দিন পর্যন্ত যে কোনো জায়গায়, ব্রাউজারটি আসলটি কতটা আক্রমনাত্মকভাবে ক্যাশে করেছে তার উপর নির্ভর করে। দ্রুততম সমাধান হল আপনার ফেভিকন href-এ একটি নতুন ক্যোয়ারী স্ট্রিং (`?v=2`) যুক্ত করা। এটি ব্রাউজারগুলিকে এটিকে একটি নতুন URL হিসাবে বিবেচনা করে এবং অবিলম্বে একটি নতুন অনুলিপি নিয়ে আসে৷
আমি কি আমার ফেভিকন উত্স হিসাবে একটি JPEG ব্যবহার করতে পারি?+
আপনি জেনারেটরে একটি JPEG আপলোড করতে পারেন, কিন্তু JPEG স্বচ্ছতা সমর্থন করে না। যদি আপনার আইকনের একটি স্বচ্ছ ব্যাকগ্রাউন্ডের প্রয়োজন হয় — যা ব্রাউজার ট্যাবে সবচেয়ে ভালো দেখায় — তার পরিবর্তে একটি PNG-32 বা SVG থেকে শুরু করুন। জেনারেটর সঠিকভাবে .ico এবং PNG তে রূপান্তর করবে।