এইচটিএমএল ফেভিকন টিউটোরিয়াল (বাংলায়)

ফেভিকন (ফেভারিট আইকন) হলো একটি ছোট আইকন যা ব্রাউজার ট্যাব, বুকমার্ক বা ইতিহাসে ওয়েবসাইটের পাশে প্রদর্শিত হয়। এই টিউটোরিয়ালে আমরা শিখব কীভাবে এইচটিএমএল-এ ফেভিকন যোগ করা যায়।

১. ফেভিকন কী?

ফেভিকন হলো একটি ছোট ছবি (সাধারণত ১৬x১৬ বা ৩২x৩২ পিক্সেল) যা ওয়েবসাইটের পরিচয় বহন করে। এটি ব্রাউজার ট্যাবে, বুকমার্কে এবং মোবাইল হোম স্ক্রিনে দেখা যায়। ফেভিকন সাধারণত .ico, .png, বা .jpg ফরম্যাটে হয়।

ফেভিকন যোগ করতে <link> ট্যাগ ব্যবহৃত হয়।

সিনট্যাক্স: <link rel="icon" type="image/png" href="favicon.png">

২. ফেভিকন যোগ করার উদাহরণ

উদাহরণ ১: সাধারণ ফেভিকন

একটি সাধারণ ফেভিকন যোগ করা। এই পেজে একটি প্লেসহোল্ডার ফেভিকন ব্যবহার করা হয়েছে।

এটি ব্রাউজার ট্যাবে দেখা যাবে।

কোড:

<link rel="icon" type="image/png" href="https://via.placeholder.com/16">
        

ব্যাখ্যা: rel="icon" ফেভিকন নির্দেশ করে, এবং href ছবির পাথ নির্দেশ করে। type ফাইলের ফরম্যাট নির্দিষ্ট করে।

<link rel="icon" type="image/x-icon" href="favicon.ico">
        

<link rel="apple-touch-icon" href="apple-touch-icon.png">
        

<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
        

৩. ফেভিকন তৈরি ও ব্যবহারের টিপস

• ফরম্যাট: .ico ফরম্যাট সর্বাধিক সমর্থিত, তবে .png এবং .jpg ও ব্যবহার করা যায়।
• সাইজ: সাধারণত ১৬x১৬, ৩২x৩২, বা ৬৪x৬৪ পিক্সেল ব্যবহার করুন। মোবাইলের জন্য ১৮০x১৮০।
• অপ্টিমাইজেশন: ফেভিকনের ফাইল সাইজ ছোট রাখুন যাতে পেজ দ্রুত লোড হয়।
• ডিজাইন: ফেভিকন সহজ এবং পরিষ্কার হওয়া উচিত যাতে ছোট সাইজেও স্পষ্ট হয়।
• টুল: ফেভিকন তৈরির জন্য অনলাইন টুল যেমন Favicon.io বা Canva ব্যবহার করুন।
• ব্রাউজার সামঞ্জস্য: বিভিন্ন ব্রাউজারে ফেভিকন টেস্ট করুন।

৪. ফেভিকন কীভাবে তৈরি করবেন?

১. একটি ছবি তৈরি করুন (যেমন লোগো বা আইকন)।
২. এটিকে .ico বা .png ফরম্যাটে রূপান্তর করুন।
৩. ফাইলটি আপনার প্রজেক্ট ফোল্ডারে রাখুন।
৪. <link> ট্যাগ ব্যবহার করে ফেভিকন যোগ করুন।