ফেভিকন জেনারেটর
একটি অক্ষর, ইমোজি বা ইমেজ-কে একটি সম্পূর্ণ ফেভিকন সেটে পরিণত করুন — একটি সত্যিকারের মাল্টি-সাইজ
favicon.ico সহ 16×16, 32×32, একটি Apple টাচ আইকন এবং
Android 192/512 PNG, তার সঙ্গে তৈরি পেস্ট-করার-উপযোগী <link> স্নিপেট।
সবকিছু আপনার ব্রাউজারেই আঁকা ও প্যাক করা হয় — কিছুই আপলোড হয় না।
বর্গাকার ইমেজ সবচেয়ে ভালো কাজ করে — নন-স্কয়ার ইমেজকে আইকন পূরণ করতে কেন্দ্র থেকে ক্রপ করা হয়।
আপনার ফেভিকন ডাউনলোড করুন
এটি আপনার <head>-এ যোগ করুন
<link rel="icon" href="/favicon.ico" sizes="any">
<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">কীভাবে একটি ফেভিকন তৈরি করবেন
- একটি উৎস বেছে নিন — টেক্সট / ইমোজি মোডে একটি অক্ষর টাইপ করুন বা ইমোজি পেস্ট করুন, অথবা ইমেজ আপলোড করুন-এ স্যুইচ করে কোনো লোগো বা ফটো ছেড়ে দিন।
- এটি স্টাইল করুন — ব্যাকগ্রাউন্ড রং ও আকার (বর্গ, গোল কিনারা বা বৃত্ত), টেক্সট রং ও সাইজ সেট করুন, অথবা স্বচ্ছ ব্যাকগ্রাউন্ড টগল করুন।
- প্রিভিউ যাচাই করুন — ব্রাউজার-ট্যাব মকআপ এবং 16/32/48 টাইলগুলো ঠিক দেখায় আইকনটি আসল সাইজে কেমন পড়া যায়। এটি বোল্ড ও সহজ রাখুন।
- ডাউনলোড ও ইনস্টল করুন —
favicon.icoও PNG নিন, সেগুলো আপনার সাইটের রুটে রাখুন, এবং HTML স্নিপেটটি আপনার<head>-এ পেস্ট করুন।
ফেভিকন সাইজ ও প্রতিটি কোথায় যায়
| ফাইল | সাইজ | কীসের জন্য |
|---|---|---|
favicon.ico | 16, 32, 48 | ক্লাসিক আইকন যা প্রতিটি ব্রাউজার বোঝে। এটি আপনার সাইটের রুটে রাখুন। |
favicon-32x32.png | 32×32 | ডেস্কটপ ব্রাউজার ট্যাব ও বুকমার্কের জন্য আধুনিক PNG ফেভিকন। |
favicon-16x16.png | 16×16 | সবচেয়ে ছোট ট্যাব/অ্যাড্রেস-বার সাইজ — ডিজাইন সহজ রাখুন যাতে এটি স্পষ্টভাবে পড়া যায়। |
apple-touch-icon.png | 180×180 | iPhone ও iPad-এ হোম-স্ক্রিন আইকন, যখন কোনো পেজকে "Add to Home Screen" করা হয়। |
android-chrome-192x192.png | 192×192 | Android হোম-স্ক্রিন / PWA আইকন, যা site.webmanifest থেকে রেফারেন্স করা হয়। |
android-chrome-512x512.png | 512×512 | ওয়েব ম্যানিফেস্টে হাই-রেজোলিউশন PWA স্প্ল্যাশ / ইনস্টল আইকন। |
টিপ: 16 px-এ একটি ফেভিকন প্রায় এই অক্ষরটির সমান আকারের — কোনো বিস্তারিত লোগোর বদলে একটি বোল্ড গ্লিফ বা আকৃতিকে প্রাধান্য দিন যাতে এটি চেনার মতো থাকে।
আপনি এটি কী কাজে ব্যবহার করতে পারেন
- কোনো নতুন ওয়েবসাইট বা ব্লগ — সেকেন্ডে একটি পরিচ্ছন্ন মনোগ্রাম বা ইমোজি ফেভিকন, কোনো ডিজাইন সফটওয়্যার লাগে না।
- কোনো প্রোগ্রেসিভ ওয়েব অ্যাপ — হোম-স্ক্রিন আইকন ও ইনস্টল প্রম্পটের জন্য 192 ও 512 PNG।
- ব্র্যান্ডের সামঞ্জস্য — আপনার ব্যাকগ্রাউন্ডকে আপনার ব্র্যান্ড রঙের সঙ্গে মেলান এবং প্রতিটি সাইজ একসঙ্গে ডাউনলোড করুন।
- দ্রুত প্রোটোটাইপ ও অভ্যন্তরীণ টুল — কোনো রঙিন আদ্যক্ষর দিয়ে ব্রাউজার ট্যাব সঙ্গে সঙ্গে আলাদা করে চিনুন।
- কোনো লোগো ফাইল প্রতিস্থাপন — কোনো বিদ্যমান লোগো আপলোড করুন এবং সেটিকে একটি যথাযথ মাল্টি-সাইজ
.icoহিসেবে এক্সপোর্ট করুন।
ফেভিকন কোথা থেকে এলো
ফেভিকনের জন্ম Internet Explorer 5-এ, যা মার্চ 1999-এ মুক্তি পায় — এটিকে
সমর্থন করা প্রথম ব্রাউজার। Bharat Shyam নামের একজন Microsoft ডেভেলপার IE Favorites তালিকার
প্রতিটি এন্ট্রির পাশে একটি ছোট 16×16 পিক্সেল আইকন যোগ করেন, আর নামটি ঠিক সেখান থেকেই আসে:
favorites icon। তাঁর চতুর ডিজাইন সিদ্ধান্ত আজও ওয়েবকে গড়ে
তোলে: কোনো সাইটকে কেবল তার রুট ফোল্ডারে favicon.ico নামের একটি ফাইল রাখতে হতো,
আর ব্রাউজার নিজে থেকেই /favicon.ico-এর অনুরোধ করত। প্রতিটি আধুনিক ব্রাউজার আজও
এটাই করে — কোনো <link> ট্যাগ ছাড়াও, এটি নীরবে
yoursite.com/favicon.ico নিয়ে আসবে। .ico এক্সটেনশন বেছে নেওয়া হয়
কারণ এটি প্রোগ্রাম আইকনের জন্য ইতিমধ্যেই মানক Windows ফরম্যাট ছিল।
একটি সাধারণ ভ্রান্তি হলো যে ফেভিকনকে "1999-এ HTML 4.01-এ মানকীকৃত" করা হয়েছিল। এটি একটি
অতি-সরলীকরণ। স্বয়ংক্রিয় /favicon.ico অনুরোধ IE5 থেকে আসে, কিন্তু যথাযথ মানক ট্যাগ —
<link rel="icon">, যা আপনাকে যেকোনো স্থানে PNG বা SVG আইকনের দিকে নির্দেশ
করতে দেয় — অনেক পরে HTML5-এর মাধ্যমে আনুষ্ঠানিক হয় এবং 2010-এ আনুষ্ঠানিক IANA link-relations
রেজিস্ট্রিতে নিবন্ধিত হয়। তাই আজ আপনার কাছে দুটোরই সেরাটা আছে: সর্বোচ্চ সামঞ্জস্যের জন্য
স্বয়ং-আবিষ্কৃত .ico, এবং তীক্ষ্ণ আধুনিক আইকনের জন্য স্পষ্ট <link>
ট্যাগ।
.ico ফরম্যাটের ভেতরে
কোনো ICO ফাইল একক ছবি নয় — এটি একটি ছোট কন্টেইনার যা একসঙ্গে একাধিক ছবি,
ভিন্ন ভিন্ন সাইজ ও রং-গভীরতায়, ধারণ করতে পারে। এটাই এর পুরো উদ্দেশ্য, আর এই কারণেই একটি
একক favicon.ico ব্রাউজারের প্রয়োজনীয় 16, 32 ও 48 পিক্সেল সংস্করণগুলো বহন করতে
পারে। অভ্যন্তরীণভাবে ফাইলটি একটি ICONDIR হেডার দিয়ে শুরু হয় (একটি সংরক্ষিত ফিল্ড,
একটি type ফিল্ড যেখানে 1 মানে "আইকন", এবং কতগুলো ছবি অনুসরণ করছে তার একটি গণনা),
তারপর প্রতি ছবির জন্য একটি ICONDIRENTRY যা তার প্রস্থ, উচ্চতা, রং-গভীরতা, ডেটা
আকার এবং তার পিক্সেল যেখানে থাকে সেই বাইট অফসেট রেকর্ড করে।
কন্টেইনারের ভেতরে প্রতিটি ফ্রেম হয় Windows বিটম্যাপ হিসেবে সংরক্ষিত হয় অথবা — Windows Vista
থেকে — একটি পূর্ণ PNG হিসেবে, যা বড় আইকনের জন্য অনেক বেশি সংহত। ফরম্যাটটি দুটি
MIME টাইপ বহন করে: মূল Microsoft image/x-icon এবং আনুষ্ঠানিক IANA-নিবন্ধিত
image/vnd.microsoft.icon। এই জেনারেটর আপনার ব্রাউজারে বাইট-বাই-বাইট একটি
সত্যিকারের মাল্টি-ইমেজ ICO সংযোজন করে, যার ভেতরে PNG-কম্প্রেসড 16/32/48 ফ্রেম থাকে —
কেবল .ico-তে নাম বদলানো কোনো একক PNG নয়, যা একটি ঘন ঘন করা শর্টকাট যা কিছু
ব্রাউজার প্রত্যাখ্যান করে।
2025-এ আধুনিক ফেভিকন সেট
এখন আপনার এক ডজন আইকনের ফোল্ডার লাগে না। বর্তমান বেস্ট প্র্যাকটিস সেটটিকে কয়েকটি ফাইলে সীমিত করে যা সবকিছু কভার করে:
favicon.ico— সর্বোচ্চ সামঞ্জস্যের জন্য রাখা হয়। কিছু টুল, যেমন RSS রিডার, কেবল সার্ভার থেকে/favicon.icoচায় এবং আপনার<link>ট্যাগ কখনো দেখে না, তাই ক্লাসিক ফাইলটি আজও তার জায়গা রাখে।- একটি SVG ফেভিকন —
<link rel="icon" type="image/svg+xml">। ভেক্টর আইকন যেকোনো সাইজে ক্ষুরধার-তীক্ষ্ণ থাকে, এবং যেহেতু কোনো SVG একটি CSS@media (prefers-color-scheme: dark)নিয়ম এম্বেড করতে পারে, আইকন ডার্ক মোডের জন্য নিজেকে পুনরায়-রঙিন পর্যন্ত করতে পারে — যা কোনো র্যাস্টার ICO বা PNG কখনো পারে না। Chrome, Firefox ও Edge SVG ফেভিকন সমর্থন করে; Safari করে না, আর ঠিক এই কারণেই আপনি ICO ও PNG ফলব্যাকও পাঠান। - একটি 180×180
apple-touch-icon.png— iPhone ও iPad-এ হোম স্ক্রিন আইকন। - ওয়েব ম্যানিফেস্টে 192 ও 512 পিক্সেল PNG — Android, Chrome ইনস্টল প্রম্পট এবং PWA স্প্ল্যাশ স্ক্রিনের জন্য।
Apple টাচ আইকন এবং PWA "মাস্কেবল" আইকন
Apple হোম স্ক্রিন শর্টকাটের জন্য 2008-এ টাচ আইকন প্রবর্তন করে। আজ সুপারিশকৃত সাইজ
180×180 — যেকোনো iOS ডিভাইসের যতটা লাগে ততটা বড়, ছোট স্ক্রিনের জন্য নিজে
থেকেই ডাউনস্কেল করা হয়। আপনি পুরনো কোডে এখনও apple-touch-icon-precomposed দেখতে
পারেন: এটি একসময় iOS-কে একটি চকচকে "শাইন" ওভারলে না যোগ করার সংকেত দিত, কিন্তু Apple সেই
চকচকে ভাব iOS 7-এই সরিয়ে ফেলেছে, তাই precomposed ভ্যারিয়েন্ট এখন অপ্রয়োজনীয়। একটি ব্যবহারিক
টিপ: iOS নিজের গোল-কোনা মাস্ক ও ড্রপ শ্যাডো প্রয়োগ করে, তাই একটি নিরেট ব্যাকগ্রাউন্ড ও
বর্গাকার কোনা সহ পূর্ণ-ভরাট বর্গ দিন — নিজে থেকে গোলাই যোগ করলে তা কেবল দ্বিগুণ হয়ে যায়।
ম্যানিফেস্টে প্রোগ্রেসিভ ওয়েব অ্যাপ আইকন মাস্কেবল আইকন নামে একটি মোড় যোগ করে।
যেহেতু ভিন্ন ভিন্ন প্ল্যাটফর্ম কোনো অ্যাপ আইকনকে ভিন্ন আকৃতিতে (বৃত্ত, স্কুইর্কল, গোল-কোনা বর্গ)
কাটে, একটি মাস্কেবল আইকনকে তার গুরুত্বপূর্ণ বিষয়বস্তু একটি নিরাপদ অঞ্চলের ভেতরে
রাখতে হয় — মোটামুটি ছবির ভেতরের 80%, কারণ সবচেয়ে আক্রমণাত্মক বৃত্তাকার মাস্ক প্রতিটি প্রান্ত
থেকে প্রায় 10% কেটে ফেলে। কোনো প্যাডিং যুক্ত আইকনে "purpose": "maskable" সেট
করুন, তবে সেটিকে আপনার সাধারণ "any" আইকন থেকে আলাদা ফাইল হিসেবে রাখুন: কোনো
মাস্কেবল আইকন মাস্ক ছাড়া দেখানো হলে অদ্ভুতভাবে ছোট দেখায়।
Google সার্চে ফেভিকন
2019 থেকে Google সার্চ ফলাফল পেজে আপনার ফলাফলের পাশে আপনার ফেভিকন দেখায়, বিশেষত মোবাইলে — তাই আইকনটি এখন SERP-এ আপনার ব্র্যান্ডের একটি ছোট অংশ। Google-এর নথিভুক্ত প্রয়োজনীয়তা গুজবের চেয়ে সরল: ফেভিকন অবশ্যই বর্গাকার (1:1 অ্যাসপেক্ট রেশিও) এবং ন্যূনতম 8×8 পিক্সেল হতে হবে, এবং Google 48×48 বা তার বেশি সাইজ সুপারিশ করে যাতে এটি প্রতিটি পৃষ্ঠে পরিচ্ছন্নভাবে রেন্ডার হয়। (এটি ঠিক "48-এর গুণিতক" হতে হবে বলে ব্যাপকভাবে প্রচারিত দাবিটি একটি ভ্রান্তি — 48, 96 বা 144 সবই ঠিক আছে, কিন্তু আসল নিয়ম কেবল বর্গাকার ও যথেষ্ট বড় হওয়া।) যেকোনো বৈধ ফেভিকন ফরম্যাট কাজ করে; যদি আপনার আইকন অনুপস্থিত, নন-স্কয়ার বা অবৈধ বলে গণ্য হয়, তাহলে Google একটি সাধারণ ধূসর গ্লোবে ফিরে যায়। এটি যোগ বা পরিবর্তন করার পর, এটি নিতে কয়েক দিন থেকে কয়েক সপ্তাহ পর্যন্ত রি-ক্রল প্রত্যাশা করুন।
16 পিক্সেলে পড়া যায় এমন একটি আইকন ডিজাইন করা
ফেভিকন ওয়েবে ডিজাইনের সবচেয়ে ছোট টুকরোগুলোর একটি, আর সীমাবদ্ধতা কঠোর। সবচেয়ে সাধারণ ভুল হলো কোনো পূর্ণ লোগোকে সংকুচিত করা: যে বিস্তারিত 200 পিক্সেলে তীক্ষ্ণ দেখায় তা 16-এ কাদায় পরিণত হয়। একটি একক বোল্ড আকৃতি বা একটি শক্তিশালী অক্ষরকে প্রাধান্য দিন, কনট্রাস্ট সর্বোচ্চ করুন (কোনো উজ্জ্বল ব্যাকগ্রাউন্ডে একটি হালকা চিহ্ন কোনো সূক্ষ্ম কম-কনট্রাস্টের চেয়ে অনেক ভালো পড়া যায়), এবং গ্রেডিয়েন্ট ও পাতলা টেক্সট এড়িয়ে চলুন, যা ট্যাব সাইজে ঝাপসা ও চ্যাপ্টা হয়ে যায়। সবসময় আসল সাইজে প্রিভিউ করুন — উপরের ব্রাউজার-ট্যাব মকআপ এবং 16/32/48 টাইলগুলো আপনাকে ঠিক তা-ই দেখায় যা দর্শকরা দেখবেন।
দুটি শেষ কথা। ব্রাউজার ফেভিকন খুব আক্রমণাত্মকভাবে ক্যাশ করে — প্রায়ই সপ্তাহখানেক — এবং বুকমার্ক
নিজের একটি কপি রাখতে পারে, তাই কোনো আপডেটের পর কখনো কখনো আপনাকে হার্ড-রিফ্রেশ করতে হয় বা নতুন
আইকন জোর করে আনতে favicon.ico?v=2-এর মতো কোনো ভার্সন কোয়েরি স্ট্রিং যোগ করতে হয়।
আর আপনার ব্র্যান্ডিং সম্পূর্ণ করতে, <meta name="theme-color"> ট্যাগ আপনাকে
আশপাশের ব্রাউজার UI (মোবাইল অ্যাড্রেস বার, PWA টুলবার) আপনার ফেভিকনের রঙের সঙ্গে মিলিয়ে রঙিন
করতে দেয় — একটি ছোট স্পর্শ যা ফোনে কোনো সাইটকে পরিশীলিত অনুভব করায়।
কোন আইকন দেখানো হবে ব্রাউজার তা কীভাবে ঠিক করে
যখন কোনো পেজ একাধিক আইকন উপস্থাপন করে, ব্রাউজার <link> ট্যাগ এবং
sizes ও type অ্যাট্রিবিউটের ভিত্তিতে একটি বেছে নেয় — যে ফরম্যাট এটি
সমর্থন করে সেটি তার প্রয়োজনের সবচেয়ে কাছের সাইজে বেছে নিয়ে (ডেস্কটপ ট্যাবের জন্য একটি তীক্ষ্ণ
32-পিক্সেল PNG, হোম স্ক্রিনের জন্য 180-পিক্সেল Apple আইকন, কোনো ইনস্টল করা অ্যাপের জন্য একটি
ম্যানিফেস্ট আইকন)। এই কারণেই সাইজ স্পষ্টভাবে ঘোষণা করা গুরুত্বপূর্ণ: এটি ব্রাউজারকে ভুল আইকন
স্কেল করার বদলে সেরা মিল বেছে নিতে দেয়। জানার মতো একটি সুপরিচিত অদ্ভুততা আছে — আপনার
favicon.ico লিঙ্কে sizes="32x32" যোগ করলে, যখন আপনি দুটোই দেন, তা
Chrome-কে ICO-এর বদলে কোনো তীক্ষ্ণ SVG আইকন পছন্দ করার দিকে ঠেলে দেয়। আর এসবের নিচের
সুরক্ষা-জাল মনে রাখুন: কোনো ট্যাগ ছাড়াও, প্রতিটি ব্রাউজার আজও নিজে থেকেই আপনার সাইটের রুট থেকে
/favicon.ico অনুরোধ করে, আর ঠিক এই কারণেই সেই একটি ফাইল সবসময় পাঠানোর মতো।
ব্রাউজার ট্যাবের বাইরে
ফেভিকন কোনো ট্যাবের সাজসজ্জার চেয়ে অনেক বেশি — সেই একই ছোট আইকন আপনার সাইটকে অবাক করা অনেক জায়গায় উপস্থাপন করে, যে কারণে এটি ঠিক করা একটি সত্যিকারের ব্র্যান্ডিং জয়:
- ব্রাউজার ট্যাব — মূল কাজ, 16–32 পিক্সেলে।
- বুকমার্ক, রিডিং লিস্ট ও ইতিহাস — আপনার আইকন ব্যবহারকারীদের কোনো দীর্ঘ তালিকায় আপনার সাইট চিনতে সাহায্য করে।
- Google সার্চ ফলাফল — আপনার লিস্টিংয়ের পাশে দেখানো হয়, বিশেষত মোবাইলে।
- ফোন হোম স্ক্রিন — যখন কেউ আপনার সাইট তাদের হোম স্ক্রিনে যোগ করে তখন apple-touch-icon ও Android ম্যানিফেস্ট আইকন "অ্যাপ" আইকনে পরিণত হয়।
- ইনস্টল করা প্রোগ্রেসিভ ওয়েব অ্যাপ — 192 ও 512 PNG লঞ্চার আইকন ও স্প্ল্যাশ স্ক্রিন সরবরাহ করে।
- ব্রাউজার "স্পিড ডায়াল" / নিউ-ট্যাব থাম্বনেল এবং কিছু চ্যাট বা ফিড প্রিভিউ।
সাধারণ ফেভিকন সমস্যা — এবং কীভাবে সেগুলো ঠিক করবেন
- "আমার নতুন ফেভিকন দেখাই যায় না।" ব্রাউজার ফেভিকন খুব আক্রমণাত্মকভাবে ক্যাশ
করে, প্রায়ই সপ্তাহখানেক, এবং বুকমার্ক নিজের কপি রাখে। হার্ড-রিফ্রেশ করুন, বা
favicon.ico?v=2-এর মতো একটি ভার্সন স্ট্রিং যোগ করুন যাতে ব্রাউজার এটিকে একদম নতুন ফাইলের মতো গণ্য করে। - "এটি কোনো হালকা বা গাঢ় ট্যাব বারে হারিয়ে যায়।" কোনো স্পষ্ট প্রান্তবিহীন
স্বচ্ছ আইকন কিছু ব্রাউজার থিমের বিপরীতে মিলিয়ে যেতে পারে। এটিকে একটি নিরেট (বা গোল-কিনারা/
বৃত্তাকার) ব্যাকগ্রাউন্ড দিন যাতে এর সবসময় একটি স্পষ্ট আকৃতি থাকে — অথবা, কোনো SVG আইকনের
জন্য, একটি
prefers-color-schemeনিয়ম যোগ করুন যাতে এটি মানিয়ে নেয়। - "এটি ঝাপসা বা কাদা-জাতীয় দেখায়।" ডিজাইনে 16 পিক্সেলের জন্য বড্ড বেশি বিস্তারিত আছে। সূক্ষ্ম উপাদানগুলো বাদ দিন, একটি বোল্ড গ্লিফ বা আকৃতি ব্যবহার করুন, এবং আসল সাইজে প্রিভিউ করুন।
- "Google আমার আইকনের বদলে একটি ধূসর গ্লোব দেখায়।" যখন ফেভিকন অনুপস্থিত,
বর্গাকার নয়, বা অবৈধ বলে গণ্য হয় তখন Google তার ডিফল্ট গ্লোবে ফিরে যায়। নিশ্চিত করুন এটি
ন্যূনতম 48×48-এর একটি বর্গাকার ছবি, আপনার হোমপেজের
<head>থেকে লিঙ্ক করা, এবং Google-কে রি-ক্রলের সময় দিন। - "আমার
.icoকিছু ব্রাউজারে লোড হয় না।" কেবল.ico-তে নাম বদলানো কোনো PNG বৈধ ICO নয় এবং কিছু ব্রাউজার সেটি প্রত্যাখ্যান করে। একটি যথাযথ মাল্টি-ইমেজ ICO — যেমনটি এই জেনারেটর তৈরি করে — এই সমস্যা এড়ায়।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
ফেভিকন কী এবং আমার আসলে কোন কোন সাইজ দরকার?
ফেভিকন হলো সেই ছোট আইকন যা ব্রাউজার ট্যাব, বুকমার্ক বার, সার্চ ফলাফল এবং ফোনের হোম স্ক্রিনে দেখা যায়। ন্যূনতম আপনার একটি favicon.ico (যাতে 16, 32 এবং 48 px থাকে) এবং iPhone-এর জন্য একটি 180×180 apple-touch-icon দরকার। আপনি যদি কোনো প্রোগ্রেসিভ ওয়েব অ্যাপও তৈরি করেন, তাহলে 192×192 ও 512×512 PNG যোগ করুন এবং সেগুলো কোনো ওয়েব ম্যানিফেস্ট থেকে রেফারেন্স করুন। এই জেনারেটর এসব সবকটিই এক ক্লিকে তৈরি করে দেয়, তাই আপনাকে হাতে কিছুই রিসাইজ করতে হয় না।
আমি আমার ওয়েবসাইটে ফেভিকন কীভাবে যোগ করব?
ফাইলগুলো ডাউনলোড করুন এবং সেগুলো আপনার সাইটের রুটে (যে ফোল্ডারে আপনার হোমপেজ আছে সেখানেই) রাখুন। তারপর তৈরি HTML স্নিপেটটি প্রতিটি পেজের <head>-এ পেস্ট করুন — এটি প্রতিটি আইকনকে সঠিক rel, type ও sizes অ্যাট্রিবিউট সহ তালিকাভুক্ত করে, যাতে ব্রাউজার সবচেয়ে উপযুক্তটি বেছে নিতে পারে। favicon.ico কেবল /favicon.ico-তেও থাকতে পারে এবং বেশিরভাগ ব্রাউজার নিজে থেকেই সেটি খুঁজে নেবে, তবে স্পষ্ট <link> ট্যাগ যোগ করলে আপনি তীক্ষ্ণ আধুনিক PNG এবং Apple/Android আইকনগুলোও পান।
favicon.ico এবং PNG ফেভিকনের মধ্যে পার্থক্য কী?
.ico ফরম্যাট একটি কন্টেইনার যা একসঙ্গে একাধিক ছোট ছবি (এখানে 16, 32 ও 48 px) রাখে, এবং এটিই সবচেয়ে ব্যাপকভাবে সমর্থিত ফেভিকন এবং সেই ফাইল যা ব্রাউজার ডিফল্টভাবে খোঁজে। PNG ফেভিকন একক-সাইজের, হাই-DPI স্ক্রিনে বেশি তীক্ষ্ণ, এবং <link> ট্যাগ দিয়ে স্পষ্টভাবে রেফারেন্স করা হয়। আধুনিক বেস্ট প্র্যাকটিস হলো দুটোই পাঠানো: সর্বোচ্চ সামঞ্জস্যের জন্য .ico এবং সর্বত্র তীক্ষ্ণ রেন্ডারিংয়ের জন্য 16/32 PNG ও বড় Apple/Android আইকন। এই টুলটি আপনার ব্রাউজারে একটি সত্যিকারের মাল্টি-ইমেজ .ico তৈরি করে (ভেতরে PNG-কম্প্রেসড ফ্রেম সহ), কেবল নাম বদলানো কোনো PNG নয়।
আমি কি শুধু একটি অক্ষর বা ইমোজি থেকে ফেভিকন তৈরি করতে পারি?
হ্যাঁ — কোনো ছোট আইকনের জন্য এটিই প্রায়ই সবচেয়ে পরিচ্ছন্ন বিকল্প। টেক্সট / ইমোজি মোডে, এক বা দুটি অক্ষর টাইপ করুন (একটি মনোগ্রাম আদ্যক্ষর ভালো কাজ করে) বা একটি ইমোজি পেস্ট করুন, তারপর ফন্ট, টেক্সট রং, ব্যাকগ্রাউন্ড রং ও আকার বেছে নিন। টেক্সট প্রতিটি সাইজে নিজে থেকেই ফিট হয় যাতে এটি 16 px পর্যন্তও কেন্দ্রিত ও সুপাঠ্য থাকে। ফেভিকন স্কেলে একক বোল্ড আকৃতি বিস্তারিত লোগোর চেয়ে অনেক ভালো পড়া যায়।
আমার ফেভিকনের ব্যাকগ্রাউন্ড কি স্বচ্ছ হওয়া উচিত নাকি নিরেট?
নিরেট (বা গোল-কিনারা/বৃত্তাকার) ব্যাকগ্রাউন্ড সাধারণত ব্রাউজার ট্যাবে ভালো দেখায়, কারণ এটি আইকনকে হালকা ও গাঢ় উভয় থিমের বিপরীতে একটি স্পষ্ট প্রান্ত দেয়। স্বচ্ছ ব্যাকগ্রাউন্ড তখন কাজে লাগে যখন আপনি চান আইকনটি কোনো রঙিন পৃষ্ঠে মিশে যাক — উদাহরণস্বরূপ কোনো PWA-এর ভেতরে যেখানে ম্যানিফেস্ট নিজের ব্যাকগ্রাউন্ড আঁকে। তুলনা করতে "স্বচ্ছ ব্যাকগ্রাউন্ড" টগল করুন; প্রিভিউ ও প্রতিটি ডাউনলোড করা ফাইল সঙ্গে সঙ্গে আপডেট হয়।
কিছু কি আপলোড হয়, এবং এটি কি বিনামূল্যে?
এটি সম্পূর্ণ বিনামূল্যে, কোনো সাইন-আপ ছাড়াই, এবং কিছুই কখনো আপনার ডিভাইস থেকে বের হয় না। আইকনগুলো একটি HTML ক্যানভাসে আঁকা হয় এবং .ico ফাইলটি আপনার নিজের ব্রাউজারে স্থানীয় JavaScript দিয়ে বাইট-বাই-বাইট সংযোজিত হয়, তাই আপনি নিজের ইমেজ আপলোড করলেও তা সম্পূর্ণভাবে আপনার মেশিনেই প্রক্রিয়াজাত হয় এবং কখনো কোনো সার্ভারে পাঠানো হয় না।