সাইটগুলি বিকাশ করার সময় আমি এই বৈশিষ্ট্যটি সর্বদা ব্যবহার করি ... তাই আমি এক নজরে দেখতে পাচ্ছি কোন ট্যাবটিতে স্থানীয়, ডেভ বা প্রোড চলছে।
এখন যে ক্রোম এসভিজি ফেভিকনগুলিকে সমর্থন করে এটি একে পুরোপুরি সহজ করে তোলে।
টেম্পারমনকি স্ক্রিপ্ট
টেম্পারমনকি স্ক্রিপ্টের জন্য https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f এ একটি ছদ্মবেশ পান যা আমি ডেকে আনা একটি ডেমো সাইটকে নির্দেশ করে https://elliz.github.io/svg-favicon/
বেসিক কোড
এটি অন্য উত্তর থেকে রূপান্তরিত ... উন্নত করা যেতে পারে তবে আমার প্রয়োজনের জন্য যথেষ্ট ভাল।
(function() {
'use strict';
// play with https://codepen.io/elliz/full/ygvgay for getting it right
// viewBox is required but does not need to be 16x16
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
<circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
</svg>
`;
var favicon_link_html = document.createElement('link');
favicon_link_html.rel = 'icon';
favicon_link_html.href = svgToDataUri(svg);
favicon_link_html.type = 'image/svg+xml';
try {
let favicons = document.querySelectorAll('link[rel~="icon"]');
favicons.forEach(function(favicon) {
favicon.parentNode.removeChild(favicon);
});
const head = document.getElementsByTagName('head')[0];
head.insertBefore( favicon_link_html, head.firstChild );
}
catch(e) { }
// functions -------------------------------
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function svgToDataUri(svg) {
// these may not all be needed - used to be for uri-encoded svg in old browsers
var encoded = svg.replace(/\s+/g, " ")
encoded = replaceAll(encoded, "%", "%25");
encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
encoded = replaceAll(encoded, "<", "%3c");
encoded = replaceAll(encoded, ">", "%3e");
encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
encoded = replaceAll(encoded, "{", "%7b");
encoded = replaceAll(encoded, "}", "%7d");
encoded = replaceAll(encoded, "|", "%7c");
encoded = replaceAll(encoded, "^", "%5e");
encoded = replaceAll(encoded, "`", "%60");
encoded = replaceAll(encoded, "@", "%40");
var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
return dataUri;
}
})();
শীর্ষে কনস্টে কেবল নিজের নিজস্ব এসভিজি (সম্ভবত আপনি কোনও সরঞ্জাম ব্যবহার করছেন তবে জ্যাক আর্কিবাল্ডের এসভিজিওএমজি দিয়ে পরিষ্কার করুন) পপ করুন। নিশ্চিত হয়ে নিন যে এটি বর্গক্ষেত্র (ভিউবক্স বৈশিষ্ট্যটি ব্যবহার করে) এবং আপনি যেতে ভাল।