কী অন্তর্ভুক্ত করতে হবে?
নুন্যতম
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
অবসেসিভের জন্য
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
favicon.ico
ফেভিকন.ইকো ফ্যাভিকনগুলির মধ্যে প্রাচীনতম, এটি পড়ার আগে প্রচুর লোক জন্মগ্রহণ করেছিল এবং আজও পুরোপুরি কাজ করে।
মাইক্রোসফ্ট 16x16, 32x32 এবং 48x48 আকারের চিত্রগুলি অন্তর্ভুক্ত করার প্রস্তাব দিচ্ছে।
আপনার ফেভিকনটি সংজ্ঞায়নের মানক উপায়:
<link rel="shortcut icon" href="/favicon.ico" />
ব্রাউজারগুলি আপনার ওয়েবসাইটের মূল ডিরেক্টরিটি অনুসন্ধান করবে favicon.ico
যাতে আপনি লিঙ্কটি বাদ দিতে পারেন। আরও প্রবীণ ব্রাউজারগুলি ঘোষিত ডিফল্ট হবে favicon.ico
এমনকি যদি আরও উপযুক্ত মাপের পিএনজি ঘোষিত হয়, সুতরাং আইসিওটিকে মূল হিসাবে অঘোষিত রেখে দেওয়া এবং বিভিন্ন আকারের পিএনজি ঘোষণা করা ভাল ধারণা হতে পারে।
favicon.png
এইচটিএমএল 5 sizes
একাধিক আকারের আইকনগুলি ঘোষণাতে সহায়তা করার জন্য বৈশিষ্ট্যটি প্রবর্তন করেছিল । নির্দিষ্ট পিএনজি ব্যবহার করা আপনাকে ব্যবহৃত আকারের উপর আরও বেশি নিয়ন্ত্রণ দেয় এবং এর অর্থ শুধুমাত্র সঠিক চিত্রটি লোড হচ্ছে।
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
আপনি যে আকারগুলি ঘোষণা করেন সেগুলি ডিভাইসগুলির উপর নির্ভর করে যা আপনি সমর্থন করতে চান। কিছু সাধারণ এবং তেমন সাধারণ আকার নয়:
- 32x32
- 48x48
- 64x64
- 96x96
- 128x128 ক্রোম ওয়েব স্টোর আইকন
- অ্যান্ড্রয়েডের জন্য 160x160 ক্রোম
- অ্যান্ড্রয়েডের জন্য 192x192 ক্রোম
- 195x195 অপেরা স্পিড ডায়াল আইকন
- Android এর জন্য 196x196 ক্রোম
- 228x228 অপেরা কোস্ট আইকন
অ্যাপল টাচ আইকন
আইওএস ওয়েব ক্লিপ আইকনগুলি বিভিন্ন ডিভাইস এবং রেজোলিউশনের জন্য বিভিন্ন আকারে আসে। আপনি এক বা একাধিক আকারের আইকন নির্দিষ্ট করতে পারেন, যদি প্রাসঙ্গিক আকারে কোনও আইকন না পাওয়া যায়, তবে ঘোষিত আকারের জেনেরিক আইকন ব্যবহার করা হবে না।
কোনও লিঙ্ক উপাদান ব্যবহার করে যদি কোনও আইকন নির্দিষ্ট না করা থাকে, তবে আইওএস apple-touch-icon
প্রিফিক্সের সাহায্যে আইকনগুলির জন্য মূল ডিরেক্টরিটি অনুসন্ধান করবে । আইওএস ডিভাইসগুলি (আশ্চর্যের সাথে যথেষ্ট) এই আইকনগুলি ব্যবহার করার একমাত্র ডিভাইস নয় (উদাহরণস্বরূপ, অ্যান্ড্রয়েড ক্রোম, উদাহরণস্বরূপ) সেগুলি ঘোষণা করা নিরাপদ বিকল্প।
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
উইন্ডোজ টাইলস
উইন্ডোজ বা উইন্ডোজ ফোন দুটিতে আপনি যখন কোনও ওয়েবসাইটকে স্টার্ট স্ক্রিনে পিন করেন এবং বিভিন্ন আকারে আসেন তখন টাইলস ব্যবহার করা হয়।
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
প্রস্তাবিত চিত্রের মাপগুলি images চিত্রগুলির নামের চেয়ে বড়। এগুলি মাইক্রোসফট.কম থেকে প্রস্তাবিত আকারগুলি
| Minimum | Recommended
Small | 70 x 70 | 56 x 56 | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide | 310 x 150 | 248 x 120 | 558 x 270
Large | 310 x 310 | 248 x 248 | 558 x 558
টাইলের রঙ এবং শিরোনাম
টাইলগুলির ডিফল্ট আচরণ হ'ল <title>
ট্যাগ থেকে টাইলের শিরোনাম নেওয়া এবং পটভূমির রঙ দেখিয়ে টাইলের চিত্রগুলিতে কোনও স্বচ্ছতার সম্মান করা। আপনি এই মেটা ট্যাগ ব্যবহার করে রঙ এবং শিরোনাম কাস্টমাইজ করতে পারেন:
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
browserconfig.xml
সমস্ত msapplication
মেটা ট্যাগগুলি মুছে ফেলা যেতে পারে এবং ডাকা রুট ফোল্ডারে একটি এক্সএমএল ফাইল দিয়ে এটি প্রতিস্থাপন করা যেতে পারে browserconfig.xml
। এক্সএমএল ফাইলটি দেখতে এমন হওয়া উচিত:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/tile-small.png"/>
<square150x150logo src="images/tile-medium.png"/>
<wide310x150logo src="images/tile-wide.png"/>
<square310x310logo src="images/tile-large.png"/>
<TileColor>#582686</TileColor>
</tile>
</msapplication>
</browserconfig>
আরও পঠন ও সংস্থানসমূহ