Webflow এর জন্য ফেভিকন

Webflow এর ফেভিকন আপলোড হল প্রজেক্ট সেটিংস প্যানেলের অংশ, যা ডিজাইনার ক্যানভাস থেকে আলাদা৷ Webflow ড্যাশবোর্ডে প্রকল্পের নামে ক্লিক করুন, তারপরে প্রকল্প সেটিংস > সাধারণ-এ নেভিগেট করুন। ফেভিকন এবং অ্যাপ আইকন বিভাগে নীচে স্ক্রোল করুন, আপলোড এলাকায় ক্লিক করুন এবং আপনার ছবি ফাইল চয়ন করুন। Webflow PNG, ICO, এবং GIF ফর্ম্যাটগুলি গ্রহণ করে৷

একটি 32×32 পিক্সেল PNG হল Webflow এর ফেভিকন আপলোডারের জন্য ন্যূনতম প্রয়োজনীয় মাপ, কিন্তু 512×512 থেকে শুরু করলে অনেক তীক্ষ্ণ ফলাফল পাওয়া যায়। Webflow ট্যাব ডিসপ্লে এবং যেকোনো CDN-জেনারেটেড ভেরিয়েন্টের জন্য আপনার ইমেজ ডাউন নমুনা করে। সর্বদা আপনার কাছে সবচেয়ে বড় পরিষ্কার উৎস প্রদান করুন — জেনারেটর যেকোনো লোগো থেকে একটি 512×512 PNG তৈরি করা সহজ করে তোলে।

Webflow একটি স্বয়ংক্রিয়ভাবে উত্পন্ন URL (সাধারণত uploads-ssl.webflow.com/... ফর্ম্যাটে) সহ নিজস্ব CDN-এ ফ্যাভিকন হোস্ট করে। আপনাকে ম্যানুয়ালি একটি CDN পাথ প্রদান করতে হবে না। আপলোড করার পরে, সংরক্ষণ করুন ক্লিক করুন এবং তারপর আপনার প্রকল্প প্রকাশ করুন। ফেভিকনটি প্রকাশের সময় ইনজেকশন করা হয়, শুধুমাত্র সংরক্ষণে নয় — অপ্রকাশিত পরিবর্তনগুলি আপনার লাইভ ডোমেনে দৃশ্যমান নয়।

স্বচ্ছ ব্যাকগ্রাউন্ডগুলি Webflow ফ্যাভিকন আপলোডগুলির সাথে সঠিকভাবে কাজ করে৷ CDN PNG আলফা চ্যানেল সংরক্ষণ করে, তাই একটি স্বচ্ছ-ব্যাকগ্রাউন্ড আইকন ডার্ক-মোড ব্রাউজার থিমগুলির বিরুদ্ধে পরিষ্কারভাবে রেন্ডার করে। যদি আপনার লোগোতে একটি কঠিন সাদা বা রঙিন ব্যাকগ্রাউন্ড থাকে, তাহলে এটি ব্রাউজার ট্যাবে একটি বর্গাকার বক্স হিসেবে প্রদর্শিত হবে। আপলোড করার আগে কোন ব্যাকগ্রাউন্ড ফিল ছাড়াই আপনার লোগো রপ্তানি করুন।

Webflow এর অন্তর্নির্মিত ফেভিকন আপলোডার SVG ফাইলগুলিকে সমর্থন করে না৷ আপনি যদি কোনো স্কেল এবং ডার্ক-মোড সমর্থনে খাস্তা রেন্ডারিংয়ের জন্য একটি ভেক্টর SVG ফ্যাভিকন চান, কাস্টম কোড ইনজেকশনের মাধ্যমে এটি যোগ করুন। প্রজেক্ট সেটিংস > কাস্টম কোড > হেড কোডে যান এবং যোগ করুন: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`। আপনার নিজের সার্ভারে বা একটি CDN পরিষেবাতে SVG ফাইলটি হোস্ট করুন৷

iOS হোম-স্ক্রীন ইনস্টলের জন্য একটি apple-touch-icon যোগ করার জন্যও Webflow-এ কাস্টম কোডের প্রয়োজন, যেহেতু অন্তর্নির্মিত আপলোডার শুধুমাত্র স্ট্যান্ডার্ড ফেভিকন পরিচালনা করে। আপনার 180×180 apple-touch-icon.png একটি ফাইল হোস্টে আপলোড করুন (অথবা যদি আপনার পরিকল্পনা এটি সমর্থন করে তবে Webflow সম্পদ), তারপরে `<link rel='apple-touch-icon' sizes='180x180' href='URL_TO_YOUR_FILE'>` প্রজেক্ট সেটিংস > কাস্টম কোড ফিল্ডে ইনজেক্ট করুন।

Webflow এর PWA আইকন সমর্থন Next.js এর মত ফ্রেমওয়ার্কের তুলনায় সীমিত। Webflow-এ কোনো নেটিভ ওয়েব ম্যানিফেস্ট জেনারেটর নেই। সম্পূর্ণ PWA ইনস্টল সমর্থনের জন্য, ম্যানুয়ালি একটি site.webmanifest JSON ফাইল তৈরি করুন, এটি বাহ্যিকভাবে হোস্ট করুন এবং কাস্টম কোডের মাধ্যমে ম্যানিফেস্ট লিঙ্ক ট্যাগটি ইনজেক্ট করুন৷ ম্যানিফেস্ট আইকন অ্যারেতে 192×192 এবং 512×512 PNG এন্ট্রি অন্তর্ভুক্ত করুন।

আপনি যদি একটি ক্লায়েন্টের জন্য একটি Webflow সাইট তৈরি করেন, ফেভিকনটি প্রায়শই প্রকল্পে দেরিতে সেট করা হয় এবং তারপর ভুলে যায়৷ একটি দরকারী কর্মপ্রবাহ হল প্রকল্পের প্রথম দিকে একটি স্থানধারক ফেভিকন সেট করা এবং হ্যান্ডঅফের আগে এটি প্রতিস্থাপন করা। Webflow ফেভিকন ইতিহাসের সংস্করণ করে না — একবার আপনি একটি নতুন ফেভিকন সংরক্ষণ করলে, পুরানোটি প্রকল্প সেটিংস থেকে চলে যায়, যদিও এটি কিছু সময়ের জন্য এটির CDN URL এর মাধ্যমে অ্যাক্সেসযোগ্য থাকতে পারে।

মাল্টি-ডোমেন Webflow সাইটগুলি — যেখানে একই প্রকল্প একাধিক কাস্টম ডোমেনে প্রকাশিত হয়েছে — একটি একক প্রকল্প সেটিংস ফেভিকন ভাগ করুন৷ নেটিভ Webflow-এ কোনো প্রতি-ডোমেন ফেভিকন ওভাররাইড নেই। সমস্ত প্রকাশিত ডোমেনে একই আইকন দেখা যায়। আপনার যদি প্রতি-ডোমেন আইকনগুলির প্রয়োজন হয়, শর্তসাপেক্ষে আইকন লিঙ্ক ট্যাগকে ওভাররাইড করতে কাস্টম কোড ইনজেকশন ব্যবহার করুন (এর জন্য একটি Webflow CMS বা কাস্টম লজিক প্রয়োজন)।

CDN ক্যাশিংয়ের কারণে Webflow-এ ফেভিকন আপডেটগুলি প্রচারে সময় নিতে পারে। একটি নতুন ফেভিকন প্রকাশ করার পরে, পুরানোটি 24-48 ঘন্টার জন্য ব্রাউজারে উপস্থিত হতে পারে৷ স্থানীয় ব্রাউজার ক্যাশে হস্তক্ষেপ ছাড়াই আপডেট করা আইকন দেখতে একটি ব্যক্তিগত/ছদ্মবেশী উইন্ডোতে আপনার লাইভ সাইট খুলুন। যদি আপনার শ্রোতারা CDN-ক্যাশে করা পৃষ্ঠাগুলি ব্যবহার করে, তাহলে প্রচারের বিলম্ব Webflow-এর CDN TTL সেটিংসের উপর নির্ভর করে।

Webflow সম্পাদক ব্যবহারকারীদের জন্য (ক্লায়েন্ট ডিজাইনার অ্যাক্সেস ছাড়াই সামগ্রী সম্পাদনা করে), সম্পাদকের মাধ্যমে ফেভিকন পরিবর্তন করা যাবে না — এটি প্রকল্প সেটিংসে লক করা আছে। শুধুমাত্র ডিজাইনার অ্যাক্সেস সহ সহযোগীরা বা অ্যাকাউন্ট মালিকরা ফেভিকন আপডেট করতে পারেন৷ ক্লায়েন্টদের কাছে এটি স্পষ্টভাবে যোগাযোগ করুন যাতে তারা জানে ভবিষ্যতে ফেভিকন আপডেটের জন্য কোথায় অনুরোধ করতে হবে।

আপনার Webflow ফেভিকন প্রকাশ করার পরে, এটি আপনার প্রোডাকশন ডোমেনে সমাধান হয়েছে তা নিশ্চিত করতে favicon tester ব্যবহার করুন৷ প্রত্যাশিত আকারের সাথে ফলাফলের তুলনা করুন: ট্যাবের জন্য 32×32, iOS এর জন্য 180×180 যদি আপনি apple-touch-icon যোগ করেন। কোন আকারগুলি আপনার সাইটের আইকন সম্পূর্ণতা স্কোর উন্নত করে তা বোঝার জন্য best favicon size গাইডটিও পর্যালোচনা করুন৷