2020 সালে হত্যাকারী সমাধান
এই সমাধানটি মূলত প্রশ্নটি মূলত জিজ্ঞাসা করার নয় বছর পরে আসবে, কারণ মোটামুটি সম্প্রতি অবধি বেশিরভাগ ব্রাউজারগুলি ফ্যাভিকনগুলিতে এতে পরিচালনা করতে সক্ষম হয়নি .svg
ফরম্যাটে ।
সেটা আর হয় না।
দেখুন: https://caniuse.com/#feat=link-icon-svg
1) ফ্যাভিকন ফর্ম্যাট হিসাবে এসভিজি চয়ন করুন
এখনই, 2020-এ, এই ব্রাউজারগুলি এসভিজি ফ্যাভিকনগুলি পরিচালনা করতে পারে :
- ক্রৌমিয়াম
- ফায়ারফক্স
- প্রান্ত
- অপেরা
- অ্যান্ড্রয়েডের জন্য ক্রোম
- কাইওএস ব্রাউজার
মনে রাখবেন যে এই ব্রাউজারগুলি এখনও পারবেন না:
- আফ্রিকায় শিকার অভিযান
- আইওএস সাফারি
- অ্যান্ড্রয়েডের জন্য ফায়ারফক্স
উপরের বিষয়টি মাথায় রেখে আমরা আত্মবিশ্বাসের সাথে একটি এসভিজি ফ্যাভিকন ব্যবহার করতে পারি ।
2) এসভিজিকে ডেটা ইউআরআই হিসাবে উপস্থাপন করুন
এখানে মূল উদ্দেশ্য HTTP অনুরোধগুলি এড়ানো avoid
অন্যান্য সমাধান যেমন উল্লেখ করেছে, এটি করার একটি দুর্দান্ত স্মার্ট উপায় হ'ল এইচটিটিপি ইউআরএল না করে ডেটা ইউআরআই ব্যবহার করা ।
এসভিজি (বিশেষত ছোট এসভিজি) নিজেকে ডেটা ইউআরআইতে পুরোপুরি leণ দেয় , কারণ পরবর্তীটি কেবল সরল বাক্য (যে কোনও সম্ভাব্য অস্পষ্ট অক্ষর শতাংশ-এনকোডযুক্ত থাকে) এবং প্রাক্তন, এক্সএমএল হ'ল, সরলখরটির দীর্ঘ লাইন হিসাবে লিখিত হতে পারে (বিড়বিড় করে) শতাংশের কোডগুলির) অবিশ্বাস্যভাবে সরলভাবে।
3) সম্পূর্ণ এসভিজি একটি ইমোজি
ডিসেম্বরে 2019, লায়ানড্রো লিনিয়ার্স প্রথম অনুধাবন করেছিলেন যে ক্রোম যেহেতু এসভিজি ফ্যাভিকনগুলিকে সমর্থন করার জন্য ফায়ারফক্সে যোগ দিয়েছিল, তাই ইমোজি থেকে কোনও ফ্যাভিকন তৈরি করা যায় কিনা তা দেখার জন্য এটি পরীক্ষামূলক ছিল:
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
লিনিয়ার্সের কুঁচি ঠিক ছিল।
বেশ কয়েক মাস পরে (মার্চ 2020), কোড পাইরেট লিয়া ভেরু একই জিনিস বুঝতে পেরেছিলেন:
https://twitter.com/leaverou/status/1241619866475474946
এবং ফ্যাভিকনগুলি আর কখনও একই ছিল না।
4) সমাধানটি নিজেকে কার্যকর করা:
এখানে একটি সাধারণ এসভিজি:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16 16">
<text x="0" y="14">🦄</text>
</svg>
এবং এখানে ডেটা ইউআরআই হিসাবে একই এসভিজি রয়েছে :
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E
এবং অবশেষে, ফ্যাভিকন হিসাবে এখানে ডেটা ইউআরআই রয়েছে :
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
5) আরও কৌশল
যেহেতু ফ্যাভিকন একটি এসভিজি, তাই এটিতে যে কোনও সংখ্যক ফিল্টার ইফেক্ট (এসভিজি এবং সিএসএস উভয়) প্রয়োগ করা যেতে পারে।
উদাহরণস্বরূপ, উপরে হোয়াইট ইউনিকর্ন ফ্যাভিকনের পাশাপাশি , আমরা সহজেই ফিল্টারটি প্রয়োগ করে একটি কালো ইউনিকর্ন ফ্যাভিকন বানাতে পারি :
style="filter: invert(100%);"
ব্ল্যাক ইউনিকর্ন ফ্যাভিকন:
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />