কিভাবে HTML এ একটি ফেভিকন যোগ করবেন
একটি প্লেইন HTML পৃষ্ঠায় একটি ফ্যাভিকন যোগ করা একটি এক-লাইন পরিবর্তন - কিন্তু আধুনিক, সম্পূর্ণ সেটআপটি ছয় লাইনের এবং iOS, Android, অন্ধকার মোড এবং PWA ইনস্টলকে কভার করে৷
প্রতিটি ব্রাউজার যে একক ট্যাগটিকে সম্মান করে তা হল <link rel="icon" href="/favicon.ico">৷ আপনার সাইট রুটে favicon.ico ড্রপ করুন এবং আপনি 80% সম্পন্ন করেছেন।
অবশিষ্ট 20% — apple-touch-icon, PNG ভেরিয়েন্ট, ডার্ক-মোড সমর্থন সহ SVG, এবং একটি ওয়েবমেনিফেস্ট — যা একটি ডিফল্ট আইকনকে একটি পালিশ ব্র্যান্ড অভিজ্ঞতা থেকে আলাদা করে৷
এটি কিভাবে কাজ করে
- 1
আপনার ফেভিকন প্যাকেজ তৈরি করুন
FetchFavicon প্যাকেজ জেনারেটর ব্যবহার করুন — আপনার প্রয়োজনীয় প্রতিটি ফাইল এবং পেস্ট-রেডি মার্কআপ তৈরি করে।
- 2
সাইট রুটে ফাইল ড্রপ
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
<head>-এ স্নিপেট পেস্ট করুন
ছয়টি <link> ট্যাগ + একটি <meta name="theme-color">।
এখনই চেষ্টা করুন
HTML স্নিপেট পান
ফেভিকন জেনারেটরসাধারণ প্রশ্ন
<link> ট্যাগগুলো কোথায় যায়?+
<head>-এর ভিতরে, যে কোনও জায়গায় — যতক্ষণ পর্যন্ত তারা </head>-এর আগে আসে ততক্ষণ অর্ডার কোন ব্যাপার না।
আমার কি .ico এবং PNG দুটোই দরকার?+
হ্যাঁ। .ico হল সর্বজনীন ফলব্যাক; PNG উচ্চ-DPI স্ক্রিনে সবচেয়ে তীক্ষ্ণ রেন্ডার করে।
অন্ধকার মোড সম্পর্কে কি?+
একটি SVG ভেরিয়েন্ট পাঠান যা তার <style> ব্লকের মধ্যে একটি prefers-color-scheme মিডিয়া ক্যোয়ারী এম্বেড করে।