ফ্যাভিকনসকে সমর্থন করে এমন সমস্ত ব্রাউজারগুলিতে ফ্যাভিকন পাওয়ার সর্বোত্তম উপায় কোনটি?

83

বর্তমানে এটি সমর্থিত সমস্ত ব্রাউজারগুলিতে ফ্যাভিকন পাওয়ার সর্বোত্তম উপায় কী?

অন্তর্ভুক্ত করুন:

  1. কোন চিত্রের ফর্ম্যাটগুলি কোন ব্রাউজারগুলি দ্বারা সমর্থিত?

  2. বিভিন্ন ব্রাউজারগুলির জন্য কোন স্থানে কোন লাইনের প্রয়োজন।

html  standards  favicon 
— ফ্রেড
সূত্র
4
আইফোনের জন্য এখানে 'ফেভিকন' অন্তর্ভুক্ত করাও মূল্যবান হতে পারে; এটি যদি ব্যবহারকারী আপনার ওয়েবসাইটকে তাদের হোম স্ক্রিনে যুক্ত করতে বেছে নেন। এই ক্ষেত্রে ব্যবহৃত কোডটি নিম্নরূপ: <লিঙ্ক rel = "আপেল-টাচ-আইকন" href = "touch.png" /> মাত্রা 57x57 পিক্সেল হওয়া উচিত। বিকল্পভাবে আপনি লিঙ্ক ট্যাগটি বাদ দিতে পারেন এবং কেবল আপনার ওয়েবসাইটের মূল ডিরেক্টরিতে 'আপেল-টাচ-আইকন.পিএনজি' নামে একটি ফাইল রাখতে পারেন।
— পৃথক
আপনি যখন যাচ্ছেন, এটি পড়ুন: mathiasbynens.be/notes/touch-icons
— Zach Lysobey
নোট করুন যে আইপ্যাড এবং রেটিনা আইফোন প্রদর্শনগুলির জন্য আপনার বড় আইকনগুলির প্রয়োজন। অ্যাপলের নির্দেশিকা দেখুন: বিকাশকারী
— অ্যাপ্লিকেশন / লাইব্রেরি /

উত্তর:

109

আমি এখানে একটি বেল্ট এবং ধনুর্বন্ধনী জন্য যান।

আমি উভয় একটি 32x32 আইকন তৈরি .icoএবং .pngফরম্যাটের নামক favicon.icoএবং favicon.png। আপনি পুরানো ব্রাউজারগুলির সাথে ডিল না করে আইকন নামটি আসলেই কিছু যায় আসে না।

  1. favicon.icoপুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য আপনার সাইটের রুটে রাখুন (olderচ্ছিক এবং কেবল পুরানো ব্রাউজারগুলির জন্য প্রাসঙ্গিক।
  2. আমার ইমেজ সাব-ডিরেক্টরিতে ফেভিকন.পিএনগ রাখুন (কেবল জিনিসগুলিকে পরিষ্কার রাখতে)।
  3. <head>উপাদানটির ভিতরে নিম্নলিখিত এইচটিএমএল যুক্ত করুন ।
<লিঙ্ক rel = "আইকন" href = "/ চিত্র / ফেভিকন.পিং" টাইপ = "চিত্র / পিএনজি" />
<লিঙ্ক rel = "শর্টকাট আইকন" href = "/ ফেভিকন.ইকো" />

দয়া করে মনে রাখবেন:

  • .icoফাইলগুলির জন্য মাইম টাইপটি আইএএনএ দ্বারা চিত্র / vnd.microsoft.icon হিসাবে নিবন্ধিত হয়েছিল ।
  • ইন্টারনেট এক্সপ্লোরার typeশর্টকাট আইকন সম্পর্কের বৈশিষ্ট্যটিকে উপেক্ষা করবে এবং এই সম্পর্ককে সমর্থন করার জন্য এটিই একমাত্র ব্রাউজার, এটি সরবরাহ করার প্রয়োজন নেই।

রেফারেন্স

— ব্রায়ান ম্যাথিউস
সূত্র
4
ঠিক আছে, আমি একটি 'মাইক্রোসফ্ট আমার স্নায়ু পেতে চলেছে' দিন। এটি স্ট্যাকওভারফ্লো সাইটের জন্য ফেভিকন দেখায় তা সত্ত্বেও আমি ইন্টারনেট এক্সপ্লোরারে কাজ করতে পারি না। এটির মতো অন্য কোনও সেটিংস রয়েছে যা ডক্টাইপ?
— Belugabob
4
এফওয়াইআই - আমি উত্তরটি পেয়েছি। যদি আপনি লোকালহোস্ট: 8080 / index.html এর মাধ্যমে সাইটটি উল্লেখ করেন তবে এটি কার্যকর হয় না - আপনি যদি মেশিনের আসল নামটি ব্যবহার করেন ( মেশিননাম: 8080 / সূচক html ) সমস্ত কিছু আপনার প্রত্যাশা মতো কাজ করে। আমি এমনকি এই আচরণটি বুঝতে শুরু করতে পারি না - কেউ চেষ্টা করার জন্য যত্নশীল?
— বেলুগাবোব
4
আপডেট - আচরণটি ব্রাউজারটি আইকন ক্যাশে করার কারণে ঘটে। অস্থায়ী ইন্টারনেট ফাইলগুলি সাফ করা এটিকে নিরাময় করবে, যদি আপনি নিজের ক্যাশে হারাতে খুশি হন।
— বেলুগাবোব
4
আইআই শর্তযুক্ত মন্তব্যে লিঙ্কটির আইই সংস্করণটি রাখা কি আরও সুস্পষ্ট হবে?
— EoghanM
9
32x32 ?? 16x16 আদর্শ নয়?
— এডুয়ার্ডো মোল্টেনি
10

আমি .ico ফর্ম্যাট ব্যবহার করি এবং নীচের দুটি লাইনটি <head>উপাদানটির মধ্যে রাখি :

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
— জন টপলি
সূত্র
6

ট্যাবলেট এবং স্মার্টফোনের জন্য টাচ আইকনগুলিকে সমর্থন করার জন্য আমি এইচটিএমএল 5 বয়লারপ্লেটের পদ্ধতিকে পছন্দ করি

স্পর্শ আইকন আরও তথ্য এই নিবন্ধে পাওয়া যাবে ।

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

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

  1. আপেল-টাচ-আইকন-57x57-precompised.png
  2. আপেল-টাচ-আইকন -57x57.png
  3. আপেল-টাচ-আইকন-প্রাকম্পোজড.পিএনজি
  4. আপেল-টাচ-আইকন.পিএনজি

আমার পরামর্শটি হ'ল আপনার নথিতে ফ্যাভিকন অন্তর্ভুক্ত না করা, তবে মূল ওয়েবসাইটটিতে ফাইলগুলির তালিকা প্রস্তুত রয়েছে:

  • আপেল-টাচ-আইকন -114x114-precompised.png
  • আপেল-টাচ-আইকন -144x144-precompised.png
  • আপেল-টাচ-আইকন-57x57-precompised.png
  • আপেল-টাচ-আইকন -72x72-precompised.png
  • আপেল-টাচ-আইকন-প্রাকম্পোজড.পিএনজি
  • আপেল-টাচ-আইকন.পিএনজি (57px*57px)
  • ফেভিকন.ইকো HiDPI (32x32px)

আপনি যখন html5boilerplate.com থেকে কোনও টেম্পলেট ডাউনলোড করেন তখন এগুলি সমস্ত অন্তর্ভুক্ত থাকে, আপনাকে কেবল তাদের নিজের আইকনগুলি দিয়ে প্রতিস্থাপন করতে হবে।

— উইলেম ডি উইট
সূত্র
প্রথম লিঙ্কটি পুরানো, এখন github.com/h5bp/html5-boilerplate/blob/master/src/doc/… যেতে হবে । আমি নিজেকে সম্পাদনা করব তবে এটি যথেষ্ট অক্ষর পরিবর্তিত হয়নি: / আপনার উত্তরের জন্য ধন্যবাদ!
— ব্রেন্ডন
4

আই 66 পিএনজিগুলি সঠিকভাবে পরিচালনা করতে পারে না, সতর্কতা অবলম্বন করুন।

— নিমিশ
সূত্র
3

সমস্ত ব্রাউজারে সঠিকভাবে কাজ করতে ফ্যাভিকন অবশ্যই একটি .ico ফাইল হওয়া উচিত ।

আধুনিক ব্রাউজারগুলি পিএনজি এবং জিআইএফ চিত্রগুলিকে সমর্থন করে।

আমি খুঁজে পেয়েছি যে সাধারণভাবে একটি তৈরির সহজতম উপায় হ'ল ফ্রিভ্যাকন.সি.সি . হিসাবে একটি মুক্তভাবে উপলব্ধ ওয়েব পরিষেবা ব্যবহার করা use

— আন্টি কিসানিয়েমি
সূত্র
3

এমন একটি সাইট রয়েছে যেখানে আপনি কোনও পৃষ্ঠার ফ্যাভিকনটি কীভাবে তৈরি হয় তা পরীক্ষা করতে পারেন

getfavicon.org

সেখানে আপনি ফ্যাভিকন, চিত্রের ধরণের এবং রেজোলিউশনগুলি তৈরি করার জন্য একটি টিউটোরিয়াল দেখতে পারেন, এটি দুর্দান্ত!

আর চালু নেই।
— রোমান স্টারকভ
2

একটি হচ্ছে favicon.*আপনার রুট ডিরেক্টরিটি স্বয়ংক্রিয়ভাবে অধিকাংশ ব্রাউজার দ্বারা সনাক্ত হয়। আপনি এটি ব্যবহার করে সনাক্ত করতে পারবেন:

 <link rel="icon" type="image/png" href="/path/image.png" />

ব্যক্তিগতভাবে আমি .png চিত্রগুলি ব্যবহার করি তবে বেশিরভাগ ফর্ম্যাটের কাজ করা উচিত।

— রস
সূত্র
না, এটি "ফেভিকন। *" নয়, খুব কম সংখ্যক ফর্ম্যাটই কাজ করে: আইকো, পিএনজি, জিআইএফ, জেপিগ এবং এসভিজি। En.wikedia.org/wiki/Favicon#File_format_support দেখুন ।
— নটহাগো
1

এই প্রশ্নের উত্তরটি যথেষ্ট জটিল হয়ে উঠেছে যে সর্বোত্তম উপায়টি হ'ল রিয়েলফ্যাভিকনজেনেটর এর মতো একটি সরঞ্জাম ব্যবহার করা, যা আপনাকে একটি পিএনজি / জেপিজি আপলোড করতে দেয় এবং তারপরে আপনার জন্য সমস্ত প্ল্যাটফর্মগুলি কভার করার জন্য ফ্যাভিকনস এবং কোড উত্পন্ন করে: https: // রিয়েলফ্যাভিগনিজারেটর। নেট /

— npfoss
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.