কিভাবে সাইটের জন্য একটি ফেভিকন তৈরি করতে হবে: দরকারী টিপস এবং সেবা

  1. কিভাবে একটি ফেভিকন তৈরি করতে
  2. কিভাবে ফটোশপ মধ্যে একটি ফেভিকন করতে
  3. কিভাবে একটি favicon সংরক্ষণ করুন
  4. কিভাবে ফেভিকন সাইট সন্নিবেশ করা
  5. কিভাবে ফেভিকন প্রতিস্থাপন
  6. কিভাবে আরো জটিল favicons তৈরি করতে

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

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

কিভাবে একটি ফেভিকন তৈরি করতে

এর ফেভিকন নকশা দিয়ে শুরু করা যাক। ভাল নকশা, তার কম্প্যাক্ট সত্ত্বেও, আপনার সাইটের সারাংশ প্রতিফলিত করা উচিত এবং কর্পোরেট পরিচয়ের একটি জৈব অংশ হতে হবে। সাধারণত, আইকনটি একটি কোম্পানির গ্রাফিক চিহ্ন (আইকন) এবং সম্পূর্ণ লোগো নয় (আইকন, পাঠ্য এবং স্লোগান)।

একটি ফেভিকন হিসাবে, এই ওয়েবসাইট তাদের আইকন (অথবা তাদের কাছে ছবিগুলি) ব্যবহার করে। একটি ফেভিকন হিসাবে, এই ওয়েবসাইট তাদের আইকন (অথবা তাদের কাছে ছবিগুলি) ব্যবহার করে।

ফ্যাভিচনের পাঠ্যটি ব্যবহার করা উচিত নয়, যেহেতু ছোট চিত্র আকারের কারণে এই পাঠ্যটি অপঠনীয় হবে। এই নিয়মের ব্যতিক্রমগুলি বিশ্বের বিখ্যাত পাঠ্য অক্ষর যা স্বয়ংক্রিয়ভাবে একটি নির্দিষ্ট ব্র্যান্ডের সাথে যুক্ত হয়। উদাহরণস্বরূপ, অনলাইন রিসোর্স উইকিপিডিয়া তার মূল অক্ষর "W" এবং ফেসবুক - "F" অক্ষরটি ফavিকন ছেড়ে চলে গেছে।

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

Favicons ছোট ইমেজ, যেহেতু প্রতিটি পিক্সেল একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। কখনও কখনও লোগো হ্রাস করার পরে, পৃথক পিক্সেল দৃশ্যমান হয়ে যায়, যার কারণে চিত্রটি "বিবর্ণ" হয়ে যায়। স্বচ্ছতা অর্জন করতে, আপনাকে পিক্সেল পর্যায়ে আইকনটি সম্পাদনা করতে হবে।

এটি এড়ানোর জন্য আপনাকে ফটোশপ বা জিআইএমপি হিসাবে বিশেষ সম্পাদক ব্যবহার করে লোগোটির আকার পরিবর্তন করতে হবে।  প্রথমে আপনাকে ইমেজটির আকার 64x64 পিক্সেলে কমাতে হবে (এটি বৃহত্তম আকারের ফ্যাভিকন)।  তারপরে ছবিটি পরিষ্কার না হওয়া পর্যন্ত আপনাকে পেন্সিল সরঞ্জাম ব্যবহার করে প্রতিটি পিক্সেল সম্পাদনা করতে হবে।  এটি একটি শ্রমসাধ্য প্রক্রিয়া, কিন্তু ফলাফল এটা মূল্য।  যখন ফেভিকন 64x64 প্রস্তুত হয়, তখন আপনাকে 16 × 16, 24 × 24 এবং 32 × 32 পিক্সেলের চিত্রের সাথে একই কাজ করতে হবে।  আপনি ইমেজ প্রয়োজন অনেক মাপ সঠিকভাবে সব ব্রাউজার এবং গ্যাজেট প্রদর্শিত:
এটি এড়ানোর জন্য আপনাকে ফটোশপ বা জিআইএমপি হিসাবে বিশেষ সম্পাদক ব্যবহার করে লোগোটির আকার পরিবর্তন করতে হবে। প্রথমে আপনাকে ইমেজটির আকার 64x64 পিক্সেলে কমাতে হবে (এটি বৃহত্তম আকারের ফ্যাভিকন)। তারপরে ছবিটি পরিষ্কার না হওয়া পর্যন্ত আপনাকে পেন্সিল সরঞ্জাম ব্যবহার করে প্রতিটি পিক্সেল সম্পাদনা করতে হবে। এটি একটি শ্রমসাধ্য প্রক্রিয়া, কিন্তু ফলাফল এটা মূল্য। যখন ফেভিকন 64x64 প্রস্তুত হয়, তখন আপনাকে 16 × 16, 24 × 24 এবং 32 × 32 পিক্সেলের চিত্রের সাথে একই কাজ করতে হবে। আপনি ইমেজ প্রয়োজন অনেক মাপ সঠিকভাবে সব ব্রাউজার এবং গ্যাজেট প্রদর্শিত:

  • 64x64 - সাফারি ব্রাউজার বুকমার্ক;
  • 32x32 - উচ্চ রেজল্যুশন প্রদর্শন (র্যাটিনা);
  • 24x24 - বুকমার্ক ইন্টারনেট এক্সপ্লোরার এবং মাইক্রোসফ্ট এজ;
  • 16x16 - গুগল ক্রোম এবং অন্যান্য ব্রাউজার।

কিভাবে ফটোশপ মধ্যে একটি ফেভিকন করতে

প্রথমে আপনাকে উপরের মাত্রাগুলির সাথে কয়েকটি ক্যানভাস তৈরি করতে হবে।

তারপরে আপনাকে ক্যানভাসে একটি আইকন, একটি অক্ষর বা অন্য চিত্র যুক্ত করতে হবে।
তারপরে আপনাকে ক্যানভাসে একটি আইকন, একটি অক্ষর বা অন্য চিত্র যুক্ত করতে হবে।

তারপরে আপনাকে ক্যানভাসে একটি আইকন, একটি অক্ষর বা অন্য চিত্র যুক্ত করতে হবে।

কিভাবে একটি favicon সংরক্ষণ করুন

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

এক্স-আইকন এডিটরতে আপনার PNG চিত্রগুলি আপলোড করে, আপনি আউটপুটটিতে একটি ICO ফাইল পাবেন।
এক্স-আইকন এডিটরতে আপনার PNG চিত্রগুলি আপলোড করে, আপনি আউটপুটটিতে একটি ICO ফাইল পাবেন।

কিভাবে ফেভিকন সাইট সন্নিবেশ করা

সুতরাং, আপনি ইতিমধ্যে একটি আইসিও ফাইল আছে। এখন আপনি এটি ওয়েবসাইটে যোগ করতে হবে। ফাইলটি favicon.ico এ পুনঃনামকরণ করুন এবং এটি আপনার ওয়েবসাইটের রুট ফোল্ডারে রাখুন (যেখানে index.html ফাইল এবং অন্যান্য স্ট্যান্ডার্ড ফাইল সংরক্ষণ করা হয়)। সফল সংযোজন পরে, আপনি এটি আপনার ওয়েবসাইটে দেখতে পারেন .com / favicon.ico। প্রায় সব ব্রাউজার মূল ফোল্ডারে favicon.ico ফাইলটি সন্ধান করে। অতএব, আপনি এই ফোল্ডারে ফেভিকন ডাউনলোড করুন গুরুত্বপূর্ণ। বিভিন্ন ব্রাউজারের সাথে সামঞ্জস্যের জন্য, এটির অবস্থান নির্দেশ করে এমন কোনও HTML উপাদান বা লিঙ্ক যোগ করা ভাল নয়। এই কৌশলটি IE6 পর্যন্ত সমস্ত ব্রাউজারের জন্য কাজ করে। এছাড়াও, যদি আপনার ওয়ার্ডপ্রেস সাইট থাকে, তবে অনেক থিমগুলিতে আপনি থিম সেটিংসে একটি ফেভিকন যুক্ত করতে পারেন। এই পদ্ধতি ব্যবহার করা যেতে পারে।

কিভাবে ফেভিকন প্রতিস্থাপন

কিছু অযৌক্তিক কারণে, ব্রাউজার ক্যাশে যুক্ত করুন। অতএব, যখন আপনি একটি নতুন আইসিও ফাইল আপলোড করেন, তখন ব্রাউজার আপনার পুরানো ফেভিকন দেখাতে পারে। এই ক্ষেত্রে কি করতে হবে? আপনি একটি অস্থায়ী HTML ফাইল যোগ করতে পারেন যা আপনার নতুন ফেভিকনটির অবস্থানকে নির্দেশ করে। এছাড়াও URL এর শেষে আপনাকে একটি ছোট ক্যোয়ারী স্ট্রিং যুক্ত করতে হবে:

<link rel = "শর্টকাট আইকন" href = "আপনার ওয়েবসাইট .com / favicon.ico? v = 2" />

তাই ব্রাউজার মনে করবে যে এটি একটি অনন্য URL এবং তাই, একটি নতুন আইকন প্রদর্শন করতে বাধ্য হবে। ফেভিকন আপডেট করার পরে, এই HTML কোডটি সম্পূর্ণভাবে মুছে ফেলা যেতে পারে। যদি আপনি ফেভিকন পরিবর্তন করতে চান, একই কৌশলটি ব্যবহার করুন, প্রতিটি বার ক্যোয়ারী স্ট্রিংয়ের "v" এর পরে সংখ্যা বৃদ্ধি করে। এইভাবে, ব্রাউজার প্রতিটি সময় এই ইউআরএলটি অনন্য হিসাবে এবং এটির নতুন সংস্করণ প্রদর্শন করবে। এবং একটি সফল আপডেটের পরে HTML কোডটি মুছে ফেলতে ভুলবেন না।

কিভাবে আরো জটিল favicons তৈরি করতে

এই প্রবন্ধে, আমি কোনও প্ল্যাটফর্মের সাথে কাজ করে এমন ফেভিকন তৈরি করার সর্বজনীন এবং সহজ উপায় বর্ণনা করতে চেয়েছিলাম। কিন্তু ওয়েব ডিজাইন এবং বিকাশে পরিপূর্ণতা কোন সীমা নেই। যদি আপনি আরো জটিল আইকনগুলি কীভাবে তৈরি করতে চান তা শিখতে চান তবে আপনি সেটি ব্যবহার করার চেষ্টা করতে পারেন favico.js । এটা আপনি বিভিন্ন সংখ্যা সঙ্গে গতিশীল ইমেজ তৈরি করতে পারবেন। এই আইকনের জন্য ধন্যবাদ, আপনি অপঠিত বার্তাগুলির সংখ্যা দেখতে পারেন, এমনকি সংশ্লিষ্ট ট্যাব সক্রিয় না থাকলেও। আপনি অনলাইনে অ্যানিমেটেড ফেভিকন তৈরি করতে চান, আপনি একটি ফেভিকন জেনারেটর ব্যবহার করার চেষ্টা করতে পারেন favicon.cc

আরো অনলাইন জেনারেটর আপনি খুঁজে পেতে পারেন এখানে

আপনি যদি ফেভিকন তৈরির বিষয়ে আপনার টিপস শেয়ার করতে চান বা একটি প্রশ্ন জিজ্ঞাসা করতে চান তবে আমি আপনার মন্তব্যের জন্য অপেক্ষা করছি!