Favorite icon কে সংক্ষেপে Favicon বলা হয়।
যেমন, যদি আমরা http://www.firefox.com সাইটটি Mozila বা Firefox দিয়ে ব্রাউজ করি তাহলে address bar যে আইকোনটি দেখতে পাবো সেটিই Favicon.
Favicon একটি icon ফাইল তাই এর ফাইল extention হলো .ico
Mozila বা Firefox ব্রাইজারে কোন সাইট ব্রাউজ করার সময়, সাইটটিতে যদি Favicon সংযুক্ত থাকে তাহলে সেটি সরাসরি দেখাতে পারে। Internet Explorer6 এ সাইট Favorite/Bookmark না করলে দেখাতে পারতোনা। বর্তমানে Internet Explorer8 অবশ্য এটি দেখায়।
Favicon এর ব্যবহার বা প্রয়োজনীয়তা:
আমরা প্রায়শই পছন্দের ওয়েব সাইটগুলো Favorite/Bookmark করি। ক্রমেই এই তালিকা এত বড় হয়ে যায় যে পরে কোন একটি বিশেষ সাইটকে খুজে পাওয়া কঠিন হয়ে যায়। এইক্ষেত্রে কোন বিশেষ সাইট খুজে পেতে Favicon খুবই কার্যকরী। কেননা Favicon চোখে পড়লেই আমাদের স্মরনে চলে আসে কাংক্ষিত সাইট।
Favicon এর ব্যবহার বা প্রয়োজনীয়তা খুব বেশী না হলেও নিচের দুটি কারন গুরুত্তপুর্ন:
১। কোন ওয়েব সাইটের ব্র্যান্ডিং ইমেজ গড়ে তোলার জন্য Favicon গুরুত্ব পুর্ন।
২। আর Favorite/Bookmark এর তালিকা থেকে কমসময়ে সাইট খুজে পাবার জন্য।
Favicon কিভাবে তৈরী করবো:
ফটোশপের মতো বহুল ব্যবহৃত একটি Software কেন কোন ছবিকে সরাসরি .ico ফাইল হিসাবে সেভ করার সুবিধা দেওয়া হয়নি তা আমার মাথায় আসেনা। আছে হয়তো কোন কারন। তবে ফটোশপেও এটি সম্ভব একটি Plugin ব্যবহার করে। সেটি পরে বলছি। আগে সহজ পদ্ধতিটি দেখি।
অনলাইন টুলের সাহায়্যে Favicon তৈরী করা সবচেয়ে সহজ। প্রথমে যে ছবিটি .ico করতে চাচ্ছেন সেটি ছোট আকারের একটি .jpg/.gif ফাইল করে নিন। এবার নিচের যেকোন অনলাইন টুলের সাহায়্যে ঐ ছবি .ico করতে পারবেন।
http://tools.dynamicdrive.com/favicon/
http://www.chami.com/html-kit/services/favicon/
http://www.favicongenerator.com/
Favicon কিভাবে সাইটে Add করবো:
<link rel=”shortcut icon” type=”image/x-icon” href=”name.ico”>
উপরের কোড <head></head> এর মধ্যে বসিয়ে দিন। অবশ্যই কাজ করবে তবু টেষ্টকরুন বিভন্ন ব্রাউজারে।
ফটোশপ দিয়ে FavIcon তৈরী করা:
ফটোশপ থেকে ICON/.ICO ফাইল হিসাবে সেভ করা যায় না। এর জন্য প্রয়োজন হবে একটি Plugin । Plugin টি এখান থেকে ডাউনলোড করে নিন।
Plugin টি Install করুন: আপনার কম্পিউটারে ফটোশপ যেখানে Install করেছেন সেখানে সঠিক ভাবে Plugin টি রাখুন।
উদাহরন: C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats
Plugin টি Install হলে আপনার ফটোশপে SaveAs অপশনে .ico পাবেন। এখন সহজেই .ico ফাইল সেভ করতে পারবেন।
একটি Favicon তৈরী করি: 16×16 Pixels সাইজেরএকটি নুতন ফাইল নিন। যে কোন একটি ব্যাকগ্রাউন্ড কালার দিন এবং যেকোন একটি অক্ষর বা চিহ্ন আকুন।
এবার File Menu থেকে SaveAs ক্লিক করুন এবং .ico File হিসাবে সেভ করুন।
হয়ে গেল আপনার Favicon
নিচের কোড <head></head> এর মধ্যে বসিয়ে দিন। অবশ্যই কাজ করবে তবু টেষ্টকরুন বিভিন্ন ব্রাউজারে।
<link rel=”shortcut icon” type=”image/x-icon” href=”name.ico”>
আমি সামির কবির। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 30 টি টিউন ও 130 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
Freelancer web designer !
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
ধন্যবাদ।