ফ্যাভিকন স্ট্যান্ডার্ড - 2020 - এসভিজি, আইকো, পিএনজি এবং মাত্রা?

Question

2020 সালের হিসাবে কোন ফেভিকন মাত্রা, ফাইল ফর্ম্যাট এবং মেটা / লিঙ্ক ট্যাগগুলি ব্যবহার করা উচিত? এর মধ্যে রয়েছে অ্যাপল আইকন, উইন্ডোজ, অ্যান্ড্রয়েড এবং অন্যান্য ডিভাইসগুলি আজ লোকেরা ব্যবহার করে।

আমি অপেরা ব্যবহার করি এবং আমি দেখতে পাচ্ছি এটি এসভিজি ফর্ম্যাটকে সমর্থন করে। আজকাল এসভিজি ব্যবহার করা কি সেরা সমাধান? "একটি ফাইল সব ফিট করে" এর কোন বিকল্প নেই?

আমি অনেক ওয়েবসাইট ব্রাউজ করছি এবং বিভিন্ন "ফ্যাভিকন জেনারেটর" পরীক্ষা করেছি। তাদের সকলেরই বয়স পুরনো এবং বেশিরভাগ পিএনজি ফাইল দিয়ে কাজ করে।

উদাহরণস্বরূপ: আইকো এবং এসভিজির জন্য কোন কোড ব্যবহার করা উচিত?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

বা আইকোতে আরও মাপ রয়েছে তবে মাত্রা নির্দিষ্ট করা উচিত? আমি একটি ভাল উত্তর পাই না।

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

দয়া করে কোন ফ্যাভিকন ব্যবহার করা উচিত তার মাত্রা, ফাইল ফর্ম্যাট এবং মেটা / লিঙ্ক ট্যাগ সরবরাহ করুন।

Comments

রিয়েলফ্যাভিজেনজেনেরেটর.নেটকে নিয়মিত আপডেট করা হয় ( রিয়েলফ্যাভিজেনজেনেরেটর / এক্সচেঞ্জ_লগ )

— স্পিনহক্সিক্সেক্স

@ স্পিনএক্সএক্সএক্স আরএফজির লেখক হিসাবে, আপনাকে এখানে ধন্যবাদ জানাতে হবে :-)

— ফিলিপ_বি

favicon.pro

— nourza

ব্যক্তিগতভাবে আমি কেবল একটি বড় পিএনজি চিত্র ব্যবহার করব : 2019 সালে সমস্ত আধুনিক ব্রাউজার পিএনজি সমর্থন করে এবং এটির আকার পরিবর্তন করতে পারে। আমাদের ফ্যাভিকন এবং বয়কট ব্রাউজারগুলির এই পাগল প্রচারকে পুরোপুরি বন্ধ করা উচিত যা মানের সাথে সম্মতি দেয় না। ভবিষ্যতে একটি একক এসভিজি চিত্রও ঠিক থাকবে তবে এই মুহুর্তে এটি ব্যাপকভাবে সমর্থিত নয়।

— কলিমার্কো

Answer 1

দাবি অস্বীকার: আমি রিয়েলফ্যাভিকনজেনেটরের লেখক, যা আমি আপ টু ডেট হওয়ার প্রত্যাশা করি (বেশিরভাগ, নীচে দেখুন)। সুতরাং এই উত্তরটি আরএফজি কী উত্পন্ন করে তা মেলে যদি অবাক হবেন না।

এক-আকারের-সমস্ত কল্পিত

আইকনটি কোনও "এক আকারের ফিট করে না" is আপনি একটি একক এসভিজি আইকন তৈরি করতে পারবেন না এবং সর্বত্র এটি কাজ করার আশা করতে পারেন।

প্রযুক্তিগত দৃষ্টিকোণ থেকে, একটি একক এসভিজি আইকনটি ভাল জিনিস হবে। তবে একটি ইউআই এবং ইউএক্স দৃষ্টিকোণ থেকে, এটি পছন্দসই ফলাফল নয়। আইওএস এবং অ্যান্ড্রয়েডের তুলনা করুন। আইওএস-এ, সমস্ত হোম স্ক্রীন আইকনগুলি বৃত্তাকার কোণার সাথে স্কোয়ার হয় ( আইওএস কালো রঙের সাথে টাচ আইকনগুলির স্বচ্ছ অঞ্চলগুলি পূরণ করে )। অ্যান্ড্রয়েডে, হোম স্ক্রীন আইকনগুলি প্রায়শই অ-বর্গক্ষেত্র আকার এবং স্বচ্ছতা (গুগল অ্যাপ আইকন সহ) ব্যবহার করে। একটি একক টাচ আইকন জমা দিন এবং অ্যান্ড্রয়েড ক্রোম এটি ব্যবহার করবে। তবে আপনি অ্যান্ড্রয়েড আইকন নির্দেশিকাগুলির সাথে মিল রাখতে পারবেন না , যেখানে ডেডিকেটেড আইকনটি পারে।

সুতরাং আমি পরামর্শ দিচ্ছি ইচ্ছাকৃতভাবে একটি একক আইকন ব্যবহার করা এড়ানো। বরং প্রতিটি প্ল্যাটফর্মকে পৃথকভাবে লক্ষ্য করুন, যখন সম্ভব হবে (এটি সর্বদা ক্ষেত্রে হয় না)।

আইকন, প্ল্যাটফর্ম প্রতি প্ল্যাটফর্ম

আইওএস সাফারি

আইওএস সাফারি একটি স্পর্শ আইকন আশা করে । আজকের হিসাবে এটি একটি 180x180 পিএনজি চিত্র। এই চিত্রটি স্বচ্ছতা ব্যবহার করা উচিত নয় এবং হোম স্ক্রিনে যুক্ত হওয়ার সাথে এর কোণগুলি স্বয়ংক্রিয়ভাবে গোল হয়ে যাবে। এর সাথে ঘোষিত:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

বছরের পর বছর ধরে, এই আইকনটি অনেক ব্রাউজারের জন্য "ডিফল্ট উচ্চ রেজোলিউশন আইকন" হয়ে উঠেছে। সুতরাং বুকমার্ক ইত্যাদিতে যোগ করার সময় আপনি এটি অন্য কোথাও পাবেন

অ্যান্ড্রয়েড ক্রোম

অ্যান্ড্রয়েড ক্রোম ওয়েব অ্যাপ ম্যানিফেস্টের উপর নির্ভর করে । যদিও এই ম্যানিফেস্টটি অ্যান্ড্রয়েড ক্রোমে উত্সর্গীকৃত নয়, এটি বর্তমানে এটির প্রধান সমর্থক। সুতরাং এই মুহুর্তে, ওয়েব অ্যাপ ম্যানিফেস্টের আইকনগুলি অ্যান্ড্রয়েড ক্রোমের জন্য বিবেচনা করা এখনও যথেষ্ট নিরাপদ।

নামটি যেমন বোঝায়, ওয়েব অ্যাপ ম্যানিফেস্টটি ওয়েল, ওয়েব অ্যাপ্লিকেশনগুলির জন্য। তবে যে কোনও ওয়েব সাইট কিছু আইকনকে রেফারেন্স করার উপায় হিসাবে এটি ব্যবহার করতে পারে।

অ্যান্ড্রয়েড একটি 192x192 পিএনজি আইকন প্রত্যাশা করে, স্বচ্ছতার অনুমতি দেয় এবং উত্সাহিত করে।

ম্যানিফেস্টের সাথে ঘোষণা করা হয়েছে:

<link rel="manifest" href="/icons/site.webmanifest">

এজ এবং আইই 12

মাইক্রোসফ্ট ব্রাউজার কনফিগ চালু করেছে , এটি একটি এক্সএমএল নথি যা মেট্রো ইউআইয়ের সাথে মাপসই বিভিন্ন আইকন তালিকাভুক্ত করে।

ফাইল এবং পটভূমির রঙ এর সাথে ঘোষণা করা হয়েছে:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

ক্লাসিক ডেস্কটপ ব্রাউজারগুলি

উইন্ডোজ / ম্যাকোস ক্রোম, উইন্ডোজ / ম্যাকস ফায়ারফক্স, সাফারি, আইই ... এই জিনিসগুলি ছিল আরও একটু ঝাপসা। .তিহাসিকভাবে, একটি একক favicon.icoফাইল ছিল, এখনও সমর্থিত। তবে বেশিরভাগ সাম্প্রতিক ব্রাউজারগুলি পিএনজি আইকনগুলি বেছে নেয় যা হালকা। এছাড়াও কিছু ব্রাউজার আইসিও ফাইলে সঠিক আইকনটি নির্বাচন করতে সক্ষম হয় না (এই ফর্ম্যাটটি কোনও আইকনের বেশ কয়েকটি সংস্করণ এম্বেড করতে পারে), নিম্ন রেজোলিউশন আইকনটি ভুলভাবে ব্যবহৃত হচ্ছে leading

পুরানো favicon.icoপুরোপুরি ফেলে দেওয়ার জন্য প্রলুব্ধ করা যেতে পারে । যদিও আমি এই লিফটি আরএফজিতে করতে চাই, পুরানো ব্রাউজারগুলির প্রভাবটি মূল্যায়নের জন্য আমি প্রয়োজনীয় পরীক্ষা চালিয়েছি না।

সুতরাং আমি আজও favicon.icoকম্বোটি 16x16, 32x32 এবং 48x48 আইকন এম্বেড করে সুপারিশ করছি :

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

অন্যান্য ব্রাউজার

অন্যান্য ব্রাউজারগুলিতে ডেডিকেটেড আইকন থাকতে পারে। উদাহরণস্বরূপ অপেরা দ্বারা উপকূল 228x228 আইকন খুঁজছে । এই ব্রাউজারগুলিতে ফোকাস করার প্রয়োজনীয়তা সুস্পষ্ট নয়। যখন তারা "তাদের" আইকনটি খুঁজে না পায় তারা সাধারণত স্পর্শ আইকন বা অন্যান্য আইকন ব্যবহার করে।

উপসংহার

শুরুতে যেমন ঘোষণা করা হয়েছিল, রিয়েলফ্যাভিজনজেনেটর এটি তৈরি করে।

Comments

@ উইল সাম্প্রতিক কোন পরিবর্তন। এটি একটি মোড়ের কারণে: আপনি যদি নিজের আইকনগুলি মূল ডিরেক্টরিতে রাখেন (যেমন /favicon.ico)), আইই কনভেনশন অনুসারে এটি সন্ধান করবে। সুতরাং, এই বিশেষ ক্ষেত্রে কোন ঘোষণা। /path/to/iconsপথ হিসাবে আবার একটি ফ্যাভিকন উত্পন্ন করুন এবং এবার ঘোষণাটি উপস্থিত থাকবে।

— ফিলিপ_বি

@ ফিলিপ_বি আহ, ঠিক আছে! স্পষ্ট করার জন্য ধন্যবাদ।

— উইল

@ রবার্টবেকার ঠিক আছে এটি এখনও দেবের অধীনে তাই আপাতত ব্রাউজারকনফিগ এখনও যাওয়ার উপায়।

— ফিলিপ_বি

আপনি favicon.ico এর সম্ভাব্য অপসারণ বলতে চান? উইন এক্সপি এবং ভিস্তা পেতে এবং ইনস্টল করার জন্য আমার একটি দিন প্রয়োজন যাতে আমি বিভিন্ন প্যাকেজ পরীক্ষা করতে পারি ... এই গ্রীষ্মে?

— ফিলিপ_বি

আপনার মতো লোকেরা তাদের প্রাপ্য প্রেমটি পান না। আমি এখানে আপনাকে ভিজে, opালু, ঠাকুরমা দিতে যাচ্ছি আপনার কপালে অনেক বেশি লিপস্টিক চুম্বন। আপনার জেনারেটর, একটি মোহন আমাকে ভাল মানুষ, একটি কবজ ব্যবহার করেছেন। এসও পুলিশকে ধিক্কার জানাতে হবে, আমি বলছি ধন্যবাদ!

— মাইকেল ট্রানকিডা

Answer 2

এটিও উল্লেখযোগ্য যে ফ্যাভিকনের সাথে আরও কিছু ট্যাগ ওজি ট্যাগ, টুইটার কার্ড বা এমএস-অ্যাপ্লিকেশন যুক্ত করা উচিত। এটি সমস্ত একই উদ্দেশ্যে কাজ করে - আপনার ব্র্যান্ডের ভিজ্যুয়াল সনাক্তকরণ এবং এটিও অন্তর্ভুক্ত করা উচিত।

টুইটার কার্ডটি এখানে পাওয়া যাবে

আমি নিম্নলিখিত ট্যাগ যোগ করুন

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

আমি দেখতে পেয়েছি যে অনেক ব্যবহারকারী 1300px 650px এবং jpg / png ফর্ম্যাট দ্বারা চিত্র তৈরি করে।

সমস্ত ট্যাগ যুক্ত করার পরে সেগুলি এখানে বৈধ করা উচিত

---

ফেসবুক ওজির আরও বিকল্প রয়েছে তবে সাধারণ নিম্নরূপ:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

ফেসবুক চিত্রের নির্দিষ্ট অনুপাতের প্রস্তাব দেয় এবং ফাইলের আকারটি 8Mb এর মধ্যে সীমাবদ্ধ। টুইটার কার্ডের সাথে অনুরূপ চিত্রগুলি রাখার জন্য আমি 1240px দ্বারা 650px এবং jpg / png ফর্ম্যাটটির প্রস্তাব দিই। ফেসবুক এবং টুইটার এসভিজি গ্রহণ করে না ...

---

আমি দেখেছি যে কিছু বিশ্বব্যাপী ব্র্যান্ডগুলি তাদের ওয়েবসাইটে এই ট্যাগটি ব্যবহার করে। একটিতে মাত্রা 150x150 পিক্সেল এবং png ফর্ম্যাট ছিল। এই চিত্রটি অনুসন্ধানের ফলাফলগুলিতে প্রদর্শন করতে ব্রাউজারগুলি ব্যবহার করতে পারে।

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

---

রিয়েল ফ্যাভিকন জেনারেটর মাইক্রোসফ্ট ফেভিকনগুলিও কভার করে। পৃষ্ঠাটি ধনুকের অনুকূলিতকরণের জন্য এমএস-অ্যাপ্লিকেশনটির জন্য আরও অনেক মেটা ট্যাগ রয়েছে এবং অন্যান্য ইনফোগুলি যেমন চিত্র প্রদর্শিত হয়। এই বিষয়টিও পড়ার মতো।

আমি আশা করি এটি কারও পক্ষে উপকারী এবং আপনার ওয়েবসাইটের ব্র্যান্ডিংয়ের বিষয়টিকে প্রসারিত করবে।