Monday, March 15, 2021

ব্লগারে Favicon অ্যাড করার পদ্ধতি

একটু খেয়াল করলে আমরা ব্রাউজারের ওয়েব এড্রেস এর সাথে একটি ছোট লোগো দেখতে পাবো, সাধারণ ভাবে এই লোগোটিকে বলা হয় Favicon.

এখানে উইকিপিডিয়ার এড্রেসের সাথে Favicon দেখানো হয়েছে

 এখানে উইকিপিডিয়ার এড্রেসের সাথে Favicon দেখানো হয়েছে


আসলে Favorite Icon কে সংক্ষেপে Favicon বলা হয়।এর আরো অনেক নাম আছে যেমনঃ বুকমার্ক আইকন (Bookmark Icon), শর্টকাট আইকন (Shortcut Icon),ট্যাব আইকন(Tab Icon) এবং ইউ আর এল আইকন(URL Icon)। এছাড়াও এটিকে ওয়েবসাইট আইকনও বলা হয়।


মূলত একটা ওয়েবসাইট মানসম্মত কী না তা যাচাইয়ের জন্য Favicon সবচেয়ে গুরুত্বপূর্ণ ভূমিকা পালন করে। তাহলে এর গুরুত্ব অনুধাবন করতেই পারছো।


মনে আছে,আমরা গুগলের ব্লগার দিয়ে একটি ওয়েবসাইট তৈরি করেছিলাম। এখন আমরা সেই ওয়েবসাইটটির জন্য Favicon তৈরি করবো।


Favicon তৈরি করার আগে আমাদের মনে রাখতে হবে Favicon টি যেনো ওয়েবসাইটটির পরিচয় বহন করতে পারে,অনেকটাই প্রতিষ্ঠানের লোগো তৈরি করার মতো। এক্ষেত্রে আমরা লোগোটিকে Favicon হিসেবে ব্যবহার করবো।


Favicon টি অবশ্যই বর্গাকার ও ১০০ KB এর নিচে হতে হবে।তাই Favicon তৈরি করার জন্য ভালো কোন ফটোশপ অথবা ইলস্ট্রেটর সফটওয়্যার ব্যবহার করাই উত্তম।


এছাড়াও আমরা সহজেই Favicon জেনারেটর ব্যাবহার করে আমাদের Favicon তৈরি করতে পারবো। এক্ষেত্রে অবশ্যই মানসম্মত একটি লোগো তৈরি করে রাখতে হবে।


Favicon তৈরি করার জন্য আমরা যে জেনারেটর টি ব্যাবহার করবো সেটি হলো favicon-generator.org


ব্লগারে কিন্তু Favicon দুইভাবে অ্যাড করা যায়।যথাঃ ১) ব্লগারের Settings এ গিয়ে Favicon অ্যাড করা ও ২) ব্লগার থিমের HTML সম্পাদনা করার মাধ্যমে Favicon অ্যাড করা।


১) ব্লগারের Settings এ গিয়ে Favicon অ্যাড করা 


এক্ষেত্রে আমরা প্রথমেই favicon-generator.org এ গিয়ে লোগোটি কে Favicon এ কনভার্ট করে নেবো।

favicon-generator.org


তবে লক্ষ্য রাখতে হবে Choose file এ ক্লিক করে লোগোটি সিলেক্ট করার পর Generate only 16x16 favicon.ico সিলেক্ট করে দেবো।এরপর Create Favicon এ ক্লিক করলেই Favicon তৈরি হয়ে যাবে। এরপর সেটিকে ডাউনলোড করে ফেলেবো।

favicon-generator.org


এখন চলে যাবো ব্লগার ড্যাশবোর্ডে।ড্যাশবোর্ডের Settings এ ট্যাপ করবো। নিচের মতো একটি পেজ আসবে, যেখানে Favicon লেখা থাকবে।

ব্লগার ড্যাশবোর্ড


অতঃপর Favicon লেখায় ক্লিক করলে নিচের মতো আরেকটি পেজ আসবে।যেখানে Favicon সিলেক্ট করতে বলা হবে। এখন আমরা ডাউনলোড করা Favicon টি আপলোড করে দিয়ে Save করে দেবো।

Favicon সিলেক্ট করা


ব্যাস কাজ শেষ। এখন ওয়েবসাইট টি ব্রাউজ করলেই এড্রেস বারে Favicon টি দেখতে পাবো। 


২) ব্লগার থিমের HTML সম্পাদনা করার মাধ্যমে Favicon অ্যাড করা


Favicon অ্যাড করার আরেকটি পদ্ধতি হলো HTML সম্পাদনা করার মাধ্যমে।


এখন আমরা নিচের কোডগুলো কপি করে নিই।এখানে http://place-your-favicon-url-here এর জায়গায় Favicon টির লিঙ্ক কপি করে পেস্ট করে দিতে হবে।



<link href="http://place your-favicon-url-here" rel="icon"/>

<link href="http://placeyour-favicon-url-here" rel="shortcut icon" type="image/x-icon" />

এখন চলে যাবো ব্লগার ড্যাশবোর্ডে Theme এ ট্যাপ করবো। নতুন একটি পেজ আসবে যেখানে Customize লেখা থাকবে এবং এর পাশে থ্রী ডট আইকন থাকবে।

থিম কাস্টমাইজ


এখন আমরা এই থ্রী ডট আইকনে ক্লিক করবো এবং Edit HTML এ ক্লিক করবো।

HTML সম্পাদনা


এবার HTML সম্পাদনা করার জন্য একটি পেজ আসবে।এখন <head> ট্যাগের পরে কপি করা কোডগুলো পেস্ট করে দেবো এবং কোডগুলো অবশ্যই </head> ট্যাগের ভিতরে থাকবে। তারপর Save এ ক্লিক করলেই Favicon অ্যাড হয়ে যাবে।

HTML সম্পাদনা


(<head> ট্যাগটি খুঁজতে Ctrl + f প্রেস করো তারপর একটি সার্চ বক্স আসবে সেখানে ট্যাগটি লিখে সার্চ দিলেই পেয়ে যাবে।)


এখন সাইটটি ব্রাউজ করলেই আমরা Favicon টি দেখতে পাবো।


প্রোগ্রামিং ভালোবাসি আর ধর্মকে সাথে করে বাঁচতে চাই।অন্যায় আর অধর্মকে ঘৃণা করি।বইয়ের সাথে আমার প্রচুর ভাব। আমার প্রফেশনাল পরিচয় হলো "কম্পিউটারের পোকা"।

1 comment: