একটি ফ্যাভিকন সেট যা ২০২৬ সালে সর্বত্র কাজ করে
ছয়টি সাইজ, একটি .ico, একটি manifest — সবকিছু যা আপনার সত্যিই প্রয়োজন একটি ফ্যাভিকন শিপ করতে যা ২০২৬ সালে প্রতিটি ব্রাউজার, iOS হোম স্ক্রিন এবং Windows টাস্কবারে সঠিক দেখায়।
ফ্যাভিকনগুলি তুচ্ছ মনে হয়। একটি শিপ করুন এবং একশত এজ কেস দেখা যায়: iOS হোম-স্ক্রিন আইকনটি ঝাপসা, Android ক্রোম ট্যাব ভুল রঙ, Windows পিন অস্পষ্ট ১६×१६ দেখায়। এই গাইডটি শব্দের মাধ্যমে কাটে এবং সঠিকভাবে কভার করে যা আপনার ২०२६ সালে প্রয়োজন — না বেশি, না কম।
ন্যূনতম কার্যকর সেট
ছয়টি সম্পদ প্রতিটি পৃষ্ঠকে কভার করে যা আপনার সাইটের আইকন দেখাবে:
favicon.ico— মাল্টি-সাইজ কন্টেইনার ১६×१६, ३२×३२, ४८×४८ অভ্যন্তরে (লিগেসি ব্রাউজার, Windows এক্সপ্লোরার, পিন করা ট্যাব)।favicon-16x16.png,favicon-32x32.png— আধুনিক ব্রাউজার ট্যাব।apple-touch-icon.png(१८०×१८०) — iOS হোম স্ক্রিন, Safari পড়া তালিকা।android-chrome-192x192.png,android-chrome-512x512.png— Android হোম স্ক্রিন, PWA ইনস্টল প্রম্পট।site.webmanifest— PWA কনফিগ যা Android আইকনগুলিকে নির্দেশ করে এবং থিম রঙ সংজ্ঞায়িত করে।
এটাই। অন্য সবকিছু (Safari পিন করা ট্যাব SVG, পুরানো Apple টাচ ভেরিয়েন্ট, Windows টাইল ছবি) লিগেসি। আধুনিক ব্রাউজারগুলি ১९२ বা ५१२ PNG-তে সুন্দরভাবে ফিরে পড়ে।
কেন .ico এখনও २०२६ সালে শিপ করা হয়
একটি .ico ফাইল একটি বাইনারি কন্টেইনার যা বিভিন্ন সাইজে একাধিক PNG ছবি ধরে রাখতে পারে। যখন একটি ব্রাউজার /favicon.ico জন্য অনুরোধ করে (যা কিছু এখনও ডিফল্টরূপে করে), এটি একটি অনুরোধে তিনটি সাইজই পায়। রেন্ডারার বর্তমান পৃষ্ঠের জন্য যা ফিট করে তা চয়ন করে — Windows এক্সপ্লোরারের জন্য একটি ४८×४८, একটি ব্রাউজার ট্যাবের জন্য একটি १६×१६।
একটি PNG যার নাম পরিবর্তন করা হয়েছে .ico-তে শুধুমাত্র একটি সাইজ রয়েছে। এটি বেশিরভাগই কাজ করে কারণ ব্রাউজারগুলি ক্ষমাশীল, তবে Windows এক্সপ্লোরার এবং কিছু ইমেল ক্লায়েন্ট এটি ঝাপসা রেন্ডার করবে বা এটি প্রদর্শন করতে অস্বীকার করবে। ধারাবাহিকতার জন্য একটি বাস্তব .ico শিপ করুন।
site.webmanifest কী করে
যখন কোনো ব্যবহারকারী আপনার সাইটটি তাদের Android হোম স্ক্রিনে যোগ করে বা এটি PWA হিসাবে ইনস্টল করে, ব্রাউজার site.webmanifest পড়ে জানতে যে ইনস্টল করা অ্যাপটি কীভাবে দেখতে হবে। এটি সংজ্ঞায়িত করে:
name/short_name— আইকনের অধীনে লেবেল।icons— কোন সাইজে কোন PNG ব্যবহার করতে হবে।theme_color— অ্যাপ খোলা থাকলে স্ট্যাটাস বারের রঙ।background_color— লঞ্চের সময় স্প্ল্যাশ স্ক্রিন পটভূমি।display— সাধারণতstandaloneযাতে অ্যাপ ব্রাউজার ক্রোম ছাড়াই খোলে।
একটি manifest ছাড়াই, Android apple-touch-icon-এ ফিরে পড়ে এবং আপনার সাইটটি একটি ব্রাউজার উইন্ডোর ভিতরে দেখায়। একটি সহ, এটি একটি নেটিভ অ্যাপের মতো দেখায়।
HTML স্নিপেট
প্রতিটি ফাইল আপনার ওয়েব রুটে যায়। প্রতিটি সাইটের এই ব্লকটি <head> এ প্রয়োজন:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">१६×१६ এর জন্য ডিজাইন করা
আপনার সুন্দর বিস্তারিত লোগো १६ পিক্সেলে মারা যায়। একটি ফ্যাভিকন তৈরির জন্য নিয়মগুলি যা সেই সাইজে স্পষ্টভাবে পড়ে:
- একটি আকৃতি। একটি বৃত্ত, একটি বর্গ, বা একটি শক্তিশালী মোনোগ্রাম। যৌগিক ফর্ম এড়ান।
- উচ্চ বৈপরীত্য। অগ্রভাগ এবং পটভূমি কমপক্ষে WCAG AA পৃথক হতে হবে। সূক্ষ্ম গ্রেডিয়েন্ট অদৃশ্য হয়ে যায়।
- নিরাপদ মার্জিন। १०-२০% প্যাডিং ছেড়ে যান। ব্রাউজারগুলি প্রায়শই তাদের নিজস্ব १px সীমানা যোগ করে।
- পাঠ? একটি একক সাহসী অক্ষর १६px এ সম্পূর্ণ শব্দের চেয়ে ভাল কাজ করে।
aukimi ফ্যাভিকন জেনারেটর একটি ছবি বা ३० সেকেন্ডের মধ্যে একটি অক্ষর থেকে ছয়টি ফাইল এবং HTML স্নিপেট তৈরি করে। এটি একটি বাস্তব মাল্টি-সাইজ .ico তৈরি করে (Microsoft ICONDIR স্পেক অনুযায়ী), একটি নাম পরিবর্তন করা PNG নয়। আপলোড করুন, আপনার সাইজগুলি চয়ন করুন, একটি zip-less বান্ডেল ডাউনলোড করুন, স্নিপেটটি পেস্ট করুন — সম্পন্ন।
সাধারণ ভুল
- CDN থেকে
.icoসেবা দেওয়া ক্যাশ হেডার ছাড়াই। ব্রাউজারগুলি ফ্যাভিকনগুলি আক্রমণাত্মকভাবে ক্যাশ করে। একটি সংস্করণযুক্ত URL (?v=2) ব্যবহার করুন একটি পুনর্নির্মাণের পরে রিফ্রেশ করতে। - প্রতিটি সাবডোমেইন প্রতি ভিন্ন আইকন। apexে একটি একক
favicon.icoসাধারণত ব্যবহারকারীরা যা আশা করে — আপনার পরিচয় খণ্ড করবেন না। theme-colorমেটা ভুলে যাওয়া। মোবাইল Chrome ব্রাউজার ক্রোম এই মানটির সাথে মেলাতে রঙ করে। এটি বাদ দেওয়া আপনাকে ডিফল্ট ধূসর দিয়ে রেখে যায়।
একটি ভাল ফ্যাভিকন সেরা উপায়ে বিরক্তিকর — ব্যবহারকারীরা যখন এটি অনুপস্থিত বা ভুল হয় তখন লক্ষ্য করে, কখনও যখন এটি সঠিক হয়। ছয়টি ফাইল শিপ করুন এবং এগিয়ে যান।
এই নিবন্ধটি ভালো লেগেছে?
সম্পর্কিত নিবন্ধ
সৃজনশীল স্ট্যাক সরু হয়ে গেছে: এআই টুলিংয়ের এক সপ্তাহ, এপ্রিলের শেষ ২০২৬
এপ্রিল ২৭ থেকে মে ৪, ২০২৬ সালের মধ্যে, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen এবং Anthropic সবাই আট দিনের মধ্যে একই সীমানা অতিক্রম করেছে। এখানে রয়েছে কী লঞ্চ হয়েছে, এটির অর্থ কী, এবং ব্রাউজার-ভিত্তিক সৃজনশীল স্যুটগুলি এটি সবকিছু একীভূত করার জন্য কোথায় রয়েছে।
২০২৬ সালে এআই মিউজিক এবং এসএফএক্স: ইন্ডি গেম অডিওতে কী সত্যিই কাজ করে
তিন বছর আগে, ইন্ডি গেম অডিও মানে হয় রয়্যালটি-মুক্ত লাইব্রেরি লাইসেন্স করা (সস্তা, সাধারণ, প্রতিটি গেম একই রকম শোনায়) অথবা একজন সুরকার নিয়োগ করা (দুর্দান্ত, ব্যয়বহুল)। ২০२६ সালে, এআই স্কোর তৈরি করে যা রিলিজ হয়। এখানে কোন সরঞ্জামগুলি ফলাফল দেয় — এবং কোথায় একজন মানব সুরকার এখনও জয়ী হয়।
২০২৬ সালে এআই মেশ জেনারেশন: গেম পাইপলাইনে আসলে কী শিপ হয়
ইমেজ-টু-৩ডি আঠারো মাসে "অস্বস্তিকর ডেমো" থেকে "ইন্ডি প্রজেক্টে শিপিং" এ পরিণত হয়েছে। ট্রিপো, মেশি, রোডিন এবং হাইপার৩ডি প্রোডাকশনে আসলে কী করে — এবং ৩ডি আর্টিস্ট এখনও প্রতিটি সময় মডেলকে হারায়।