প্রদত্ত উত্তরগুলি (এই পোস্টের সময়ে) কেবলমাত্র লিঙ্কের উত্তর তাই আমি ভেবেছিলাম যে আমি লিঙ্কগুলিকে একটি উত্তরের সংক্ষিপ্ত করব এবং আমি কী ব্যবহার করব।
ক্রস ব্রাউজার ফ্যাভিকনস (টাচ আইকন সহ) তৈরিতে কাজ করার সময় কয়েকটি বিষয় বিবেচনা করতে হবে।
প্রথম (অবশ্যই) ইন্টারনেট এক্সপ্লোরার। আইই সংস্করণ ১১ পর্যন্ত পিএনজি ফ্যাভিকনগুলিকে সমর্থন করে না। সুতরাং আমাদের প্রথম লাইন আইই 9 এবং নীচে ফেভিকনগুলির জন্য একটি শর্তাধীন মন্তব্য:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
আইকনের ব্যবহারগুলি কভার করতে এটি 32x32 পিক্সেল এ তৈরি করুন। rel="shortcut icon"আইইনটির আইকনটি সনাক্ত করতে আই- এর জন্য লক্ষ্য করুন shortcutযা এটি শব্দটির প্রয়োজন যা আদর্শ নয়। এছাড়াও আমরা .icoফেভিকনটিকে একটি আইআই শর্তযুক্ত মন্তব্যে আবদ্ধ করি কারণ ক্রম এবং সাফারি .icoফাইল উপস্থিত থাকলে এটি ব্যবহার করবে , অন্যান্য বিকল্প উপলব্ধ থাকা সত্ত্বেও আমরা যা চাই তা নয়।
উপরেরগুলি আইই 9.9 পর্যন্ত আই কভার করে IE এছাড়াও আইই 10 10 শর্তসাপেক্ষ মন্তব্যগুলি পড়ে না তাই আইই 10 10 ফেভিকনটি দেখায় না। আইই ১১ এবং এজ উপলভ্য সহ আমি আইই 10 টি ব্যাপক ব্যবহারে দেখতে পাচ্ছি না, তাই আমি এই ব্রাউজারটিকে উপেক্ষা করি।
বাকি ব্রাউজারগুলির জন্য আমরা একটি ফেভিকন উদ্ধৃত করার জন্য স্ট্যান্ডার্ড উপায়টি ব্যবহার করতে যাচ্ছি:
<link rel="icon" href="path/to/favicon.png">
এই আইকনটি ব্যবহার করতে পারে এমন সমস্ত ডিভাইস কভার করতে এই আইকনটির আকার 196x196 পিক্সেল হওয়া উচিত।
মোবাইল ডিভাইসে টাচ আইকনগুলি কভার করতে আমরা একটি স্পর্শ আইকন উদ্ধৃত করার জন্য অ্যাপলের মালিকানাধর্মী উপায়টি ব্যবহার করতে যাচ্ছি:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
ব্যবহার rel="apple-touch-icon-precomposed"যখন iOS এ বুকমার্ক প্রতিফলিত উজ্জ্বল প্রযোজ্য হবে না। আইওএসের জন্য চকচকে ব্যবহার প্রয়োগ করুন rel="apple-touch-icon"। এই আইকনটির আকার 180x180 পিক্সেল হওয়া উচিত কারণ এটি সর্বশেষতম আইফোন এবং আইপ্যাডগুলির জন্য অ্যাপলের প্রস্তাবিত আকার। আমি পড়েছি ব্ল্যাকবেরিও ব্যবহার করবে rel="apple-touch-icon-precomposed"।
একটি নোট হিসাবে: অ্যান্ড্রয়েডের জন্য ক্রোম জানিয়েছে:
আপেল-টাচ- * হ্রাস করা হয়েছে, এবং কেবল অল্প সময়ের জন্য সমর্থন করা হবে। (ক্রমের এম 31 এর জন্য বিটা হিসাবে লিখিত)।
উইন্ডোজ 8.1+ এ আইই 11+ এর জন্য কাস্টম টাইলস
উইন্ডোজ 8.1+ এ আইই 11+ আপনার সাইটের জন্য পিন টাইলস তৈরি করার উপায় সরবরাহ করে।
মাইক্রোসফ্ট নীচের আকারে কয়েকটি টাইলস তৈরির প্রস্তাব দিচ্ছে:
ছোট: 128 x 128
মাঝারি: 270 x 270
প্রশস্ত: 558 x 270
বৃহত্তর: 558 x 558
এগুলি স্বচ্ছ চিত্র হওয়া উচিত কারণ আমরা পরবর্তী বর্ণের পটভূমি সংজ্ঞায়িত করব।
এই চিত্রগুলি তৈরি হয়ে গেলে browserconfig.xmlআপনার নীচের কোড সহ একটি এক্সএমএল ফাইল তৈরি করা উচিত :
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
আপনার সাইটের মূলে এই এক্সএমএল ফাইলটি সংরক্ষণ করুন। যখন কোনও সাইট পিন করা থাকে তখন IE এই ফাইলটি সন্ধান করবে। আপনি যদি এক্সএমএল ফাইলটির কিছু আলাদা নাম রাখতে চান বা অন্য কোনও জায়গায় রাখতে চান তবে এই মেটা ট্যাগটি এতে যুক্ত করুন head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
IE 11+ কাস্টম টাইলস এবং এক্সএমএল ফাইল ব্যবহারের অতিরিক্ত তথ্যের জন্য মাইক্রোসফ্টের ওয়েবসাইটে যান ।
সবগুলোকে একত্রে রাখ:
এগুলি সমস্ত একসাথে রাখার জন্য উপরের কোডটি দেখতে এরকম হবে:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
উইন্ডোজ ফোন লাইভ টাইলস
যদি কোনও ব্যবহারকারী কোনও উইন্ডোজ ফোন ব্যবহার করে তবে তারা কোনও ওয়েবসাইটকে তাদের ফোনের প্রারম্ভিক স্ক্রিনে পিন করতে পারেন। দুর্ভাগ্যক্রমে, যখন তারা এটি করে এটি আপনার ফোনের একটি স্ক্রিনশট প্রদর্শন করে, ফ্যাভিকন নয় (উপরে বর্ণিত এমএস নির্দিষ্ট কোডও নয়)। আপনার ওয়েবসাইটের উইন্ডোজ ফোন ব্যবহারকারীদের জন্য একটি "লাইভ টাইল" তৈরি করতে অবশ্যই নিম্নলিখিত কোডটি ব্যবহার করতে হবে:
মাইক্রোসফ্ট থেকে এখানে বিস্তারিত নির্দেশাবলী দেওয়া হয়েছে তবে এখানে একটি সংক্ষিপ্তসার রয়েছে:
ধাপ 1
হাই-রেজ-স্ক্রিনগুলি সমর্থন করতে আপনার ওয়েবসাইটের জন্য একটি বর্গক্ষেত্রের চিত্র তৈরি করুন এটি আকারের 768x768 পিক্সেল এ তৈরি করুন।
ধাপ ২
এই চিত্রটির একটি লুকানো ওভারলে যুক্ত করুন। মাইক্রোসফ্টের উদাহরণ কোড এখানে:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
ধাপ 3
তারপরে আপনি লিঙ্কটি শুরু করতে পিন যুক্ত করতে নতুন নিম্নলিখিত লাইনটি যুক্ত করতে পারেন:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
মাইক্রোসফ্ট আপনাকে উইন্ডোজ ফোন সনাক্ত করতে পরামর্শ দেয় এবং কেবলমাত্র সেই লিঙ্কগুলি সেই ব্যবহারকারীদেরই দেখায় যেহেতু এটি অন্যান্য ব্যবহারকারীর পক্ষে কাজ করবে না।
পদক্ষেপ 4
এরপরে আপনি ওভারলে দৃশ্যমানতা টগল করতে কিছু জেএস যুক্ত করুন
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
আকারগুলিতে নোট করুন
আমি প্রতিটি আকারের হিসাবে একটি ব্রাউজটি প্রয়োজনীয় হিসাবে চিত্রটি কমিয়ে আনব। নিম্ন ব্যান্ডউইদথের লোকদের জন্য চাইলে আমি একাধিক মাপ নির্দিষ্ট করতে আরও HTML যুক্ত করতে পারতাম তবে আমি ইতিমধ্যে পিএনজি ফাইলগুলি ভারীভাবে টিনিপিএনজি ব্যবহার করে সংকুচিত করছি এবং এটি আমার উদ্দেশ্যে অপ্রয়োজনীয় বলে মনে করি। এছাড়াও, অনুযায়ী philippe_b এর উত্তর Chrome এবং ফায়ারফক্স বাগ যা ব্রাউজারকে কারণ আইকন সব আকারের লোড করতে হবে। একাধিক ছোট আইকনগুলির চেয়ে একটি বড় আইকন ব্যবহার করা ভাল কারণ এটি।
আরও পড়া
যারা আরও বিশদ চান তাদের জন্য নীচের লিঙ্কগুলি দেখুন: