Favicon জেনারেটর

নতুন

একটি ছবি বা অক্ষর থেকে সম্পূর্ণ favicon সেট তৈরি করুন এবং একটি ZIP ডাউনলোড করুন।

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

আপনার ব্রাউজারেই একটি সম্পূর্ণ ফেভিকন সেট তৈরি করুন

এই ফেভিকন জেনারেটর একটি আধুনিক ওয়েবসাইট বা ওয়েব অ্যাপের প্রয়োজনীয় প্রতিটি আইকন তৈরি করে — ব্রাউজার ফেভিকন, একটি মাল্টি-সাইজ favicon.ico, একটি Apple touch icon এবং maskable PWA ম্যানিফেস্ট আইকন — একটি একক সোর্স থেকে। একটি ছবি, একটি টাইপ করা লেটারমার্ক বা একটি ইমোজি বেছে নিন, ব্যাকগ্রাউন্ড, আকার ও প্যাডিং টুইক করুন, এবং একটি রেডি-টু-শিপ ZIP ডাউনলোড করুন যাতে থাকবে সব ফাইল সাথে আপনার <head>-এর জন্য ঠিক HTML স্নিপেট।

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

একটি ছবি, SVG, অক্ষর বা ইমোজি থেকে

তিনটি ইনপুট মোড প্রতিটি শুরুর বিন্দু কভার করে। ছবি PNG, JPG, SVG এবং WebP গ্রহণ করে — একটি স্কয়ার লোগো ফেলে দিন আর তা প্রতিটি সাইজে সেন্টার-ফিট হয়ে যাবে; একটি SVG আপলোড করলে সেটাও অপরিবর্তিত অবস্থায় একটি তীক্ষ্ণ, স্কেলেবল favicon.svg হিসেবে পাস হয়ে যায়। টেক্সট এক থেকে তিন অক্ষরকে আপনার নিজের ফন্ট ও রঙে একটি পরিষ্কার লেটারমার্কে পরিণত করে — যখন আপনার এখনো লোগো নেই তখন কাজে লাগে। ইমোজি যেকোনো ইমোজিকে এক ক্লিকে একটি ফেভিকনে রেন্ডার করে, একটি সাইড প্রজেক্ট ব্র্যান্ড করার দ্রুততম উপায়।

আপনি যাই বেছে নিন, পূর্ণ আউটপুট সেট পাবেন: প্রতিটি PNG সাইজ, একটি আসল favicon.ico, একটি ঐচ্ছিক favicon.svg, ওয়েব অ্যাপ ম্যানিফেস্ট এবং HTML। এটি Chromebook ট্যাব থেকে শুরু করে Android হোম স্ক্রিন পর্যন্ত প্রতিটি ব্রাউজার, প্রতিটি OS, প্রতিটি ডিভাইস সাইজ কভার করে।

প্রতিটি সাইজ, সাথে একটি আসল favicon.ico

টুলটি ব্রাউজার ট্যাব ও Windows-এর জন্য ১৬×১৬, ৩২×৩২ এবং ৪৮×৪৮ PNG, একটি ১৮০×১৮০ Apple touch icon, এবং Android ও PWA হোম স্ক্রিনের জন্য ১৯২×১৯২ ও ৫১২×৫১২ আইকন তৈরি করে। তারপর এটি ১৬, ৩২ ও ৪৮ বিটম্যাপকে একটি প্রকৃত মাল্টি-রেজোলিউশন favicon.ico-তে এনকোড করে — ব্রাউজার ডিফল্টভাবে যে কনটেইনার ফাইল রিকোয়েস্ট করে — সম্পূর্ণভাবে আপনার ব্রাউজারে, কোনো সার্ভার রাউন্ড-ট্রিপ ছাড়াই।

ICO ফরম্যাট গুরুত্বপূর্ণ। অনেক টুল একটি একক ৩২×৩২ PNG তৈরি করে favicon.ico নাম দিয়ে দেয়, যা কাজ করে কিন্তু ব্রাউজার সবসময় একটি সোর্স থেকে স্কেল করে। একটি আসল মাল্টি-রেজোলিউশন ICO ব্রাউজারকে প্রতিটি প্রেক্ষাপটের জন্য সবচেয়ে তীক্ষ্ণ সাইজ বেছে নিতে দেয়। পুরো সেট একটি ZIP হিসেবে ডাউনলোড করুন, বা যেকোনো একক সাইজ, .ico, .svg বা ম্যানিফেস্ট আলাদাভাবে নিন।

Apple touch icon এবং maskable PWA আইকন সঠিকভাবে করা

মোবাইল আইকন সঠিকভাবে করাই সবচেয়ে বেশি ভুল হওয়ার জায়গা। apple-touch-icon একটি সলিড ব্যাকগ্রাউন্ডসহ ১৮০×১৮০-এ রেন্ডার করা হয় (iOS ট্রান্সপারেন্সি সমর্থন করে না এবং নিজেই কোণা গোল করে দেয়)। ১৯২ ও ৫১২ ম্যানিফেস্ট আইকন maskable আইকন হিসেবে তৈরি করা হয় — তাদের কনটেন্ট প্রায় ৮০% সেফ জোনের মধ্যে রাখা হয় যাতে Android এগুলোকে লোগো ক্লিপ না করেই একটি সার্কেল, স্কুইর্কল বা রাউন্ডেড স্কয়ারে ক্রপ করতে পারে।

লাইভ প্রিভিউ মকআপ আপনার আইকনকে একটি ব্রাউজার ট্যাবে, বুকমার্ক বারে, এবং iOS ও Android হোম স্ক্রিনে দেখায়, যাতে আপনি শিপ করার আগেই দেখতে পারেন এটি ঠিক কেমন দেখাবে। এটি ডিপ্লয় করা, ফোনে চেক করা, সমন্বয় করা, এবং আবার ডিপ্লয় করার আসা-যাওয়া বাঁচায়।

favicon.io এবং RealFaviconGenerator.net-এর সাথে UtiloKit কেমন

favicon.io সবচেয়ে জনপ্রিয় ফেভিকন টুল এবং সত্যিই ভালো — কিন্তু এটি আপনার ছবি তাদের সার্ভারে আপলোড করে, যার মানে আপনার প্রকাশ না হওয়া লোগো বা ক্লায়েন্ট অ্যাসেট আপনার ডিভাইস ছেড়ে যায়। RealFaviconGenerator.net সবচেয়ে ফিচার-সম্পূর্ণ অপশন, কিন্তু দ্রুত প্রজেক্টের জন্য মাল্টি-স্টেপ উইজার্ড ভীতিকর, এবং এটিও সার্ভার-সাইডে ছবি প্রসেস করে। favicon-generator.org পুরনো: এটি শুধু বেসিক PNG সাইজ তৈরি করে কোনো maskable ম্যানিফেস্ট আইকন বা SVG ছাড়াই।

UtiloKit সবকিছু স্থানীয়ভাবে করে। আপনার ছবি কখনও ব্রাউজার ছেড়ে যায় না। আউটপুটে থাকে একটি আসল মাল্টি-রেজোলিউশন ICO, সঠিক সেফ-জোন প্যাডিংসহ maskable ম্যানিফেস্ট আইকন, একটি স্কেলেবল SVG, এবং একটি রেডি-টু-পেস্ট <head> স্নিপেট — RealFaviconGenerator থেকে যা পেতেন সেই একই সম্পূর্ণ সেট, আপলোড ও উইজার্ড ছাড়াই। আইফোন ও অ্যান্ড্রয়েডেও কাজ করে: ক্যানভাস API মোবাইল ব্রাউজারে ঠিকই চলে, তাই আপনি সরাসরি আপনার ফোন থেকে একটি ফেভিকন তৈরি ও ডাউনলোড করতে পারেন।

ম্যানিফেস্ট এবং HTML স্নিপেট, পেস্ট করার জন্য প্রস্তুত

আইকনের পাশাপাশি আপনি পাবেন একটি সম্পূর্ণ site.webmanifest — আপনার অ্যাপের নাম, থিম কালার এবং maskable আইকন এন্ট্রিসহ — এবং একটি কপি-রেডি <head> স্নিপেট যা .ico, .svg, Apple touch icon এবং ম্যানিফেস্ট লিংক করে, সাথে একটি মিলিত theme-color মেটা ট্যাগ। এটি আপনার HTML-এ পেস্ট করুন, ফাইলগুলো আপনার সাইট রুটে আপলোড করুন, আর কাজ শেষ।

স্নিপেটটি যেকোনো স্ট্যাক দিয়ে কাজ করে: প্লেইন HTML, Next.js, Astro, Nuxt, SvelteKit, Remix। আপনার ফ্রেমওয়ার্কে যদি একটি নিবেদিত ফেভিকন কনফিগ থাকে (Next.js-এর app/icon.png, Astro-র হেড কনফিগ), তবুও PNG ফাইলগুলো সরাসরি বসে যায়।

সম্পূর্ণ আধুনিক ফেভিকন স্ট্যাক, ব্যাখ্যাসহ

একটি প্রোডাকশন-রেডি ফেভিকন সেটআপে চারটি স্বতন্ত্র লেয়ার থাকে। প্রথমত, রুটে favicon.ico — ব্রাউজার, RSS রিডার, ইমেইল ক্লায়েন্ট এবং Windows অ্যাড্রেস বার সবাই আপনার HTML না দেখেই একটি খালি GET /favicon.ico রিকোয়েস্ট পাঠায়। এখানে একটি আসল মাল্টি-রেজোলিউশন ICO (১৬, ৩২ ও ৪৮ বিটম্যাপ একটি ফাইলে প্যাক করা) সার্ভ করাই একমাত্র উপায় যাতে সবখানে একটি আইকন প্রদর্শিত হয় নিশ্চিত করা যায়। দ্বিতীয়ত, <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — সব আধুনিক ব্রাউজার (Chrome 80+, Firefox 41+, Safari 14.1+, Edge) ট্যাগটি উপস্থিত থাকলে ICO-র চেয়ে এটিকেই প্রাধান্য দেবে। SVG হওয়ায়, এটি যেকোনো DPI-তে নিখুঁতভাবে স্কেল হয়, 3× রেটিনা স্ক্রিনে তীক্ষ্ণভাবে রেন্ডার হয়, এবং SVG ফাইলের ভেতরেই একটি @media (prefers-color-scheme: dark) ব্লক দিয়ে ডার্ক মোডেও খাপ খেতে পারে — যা কোনো PNG করতে পারে না।

তৃতীয়ত, <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> — একজন ব্যবহারকারী Safari-র Share মেনু দিয়ে আপনার সাইট হোম স্ক্রিনে যোগ করলে iOS ও iPadOS এই ১৮০×১৮০ PNG ব্যবহার করে। এটি ছাড়া, iOS আপনার পেজের একটি স্ক্রিনশটে ফলব্যাক করে, যা হোম স্ক্রিনে অপেশাদার দেখায়। চতুর্থত, <link rel="manifest" href="/site.webmanifest"> — এই JSON ফাইলের ভেতরের icons অ্যারে Android ও Chrome ডেস্কটপকে বলে দেয় PWA ইনস্টল প্রম্পট, অ্যাপ সুইচার এবং স্প্ল্যাশ স্ক্রিনের জন্য কোন PNG ব্যবহার করতে হবে। আধুনিক ব্রাউজারের জন্য SVG ফেভিকন এখন প্রাথমিক সুপারিশ, কিন্তু ICO ফলব্যাক এখনও অপরিহার্য: এটি ছাড়া, নন-ব্রাউজার প্রেক্ষাপটের (ফিড রিডার, ইমেইল ক্লায়েন্ট, থার্ড-পার্টি বুকমার্কিং টুল) একটি বড় অংশ কিছুই দেখায় না।

তাই একটি ন্যূনতম কিন্তু সম্পূর্ণ <head> স্নিপেট দেখতে এমন হয়: .ico লিংক (একটি স্পষ্ট sizes="32x32"সহ যাতে দুটো ফরম্যাটই সমর্থন করা ব্রাউজার SVG-কে প্রাধান্য দেয়), image/svg+xml লিংক, apple-touch-icon লিংক, এবং ম্যানিফেস্ট লিংক। এর চেয়ে কম হলে অন্তত একটি প্ল্যাটফর্মে ভাঙা আইকনের ঝুঁকি থাকে; এর চেয়ে বেশি হলে সাধারণত অপ্রয়োজনীয়।

ফেভিকনের একটি সংক্ষিপ্ত ইতিহাস

ফেভিকন উদ্ভাবন করেছিল Internet Explorer 5-এর জন্য Microsoft, যা মার্চ ১৯৯৯-এ মুক্তি পায়। মূল উদ্দেশ্য ছিল সাদামাটা: IE5 একটি Favorites (বুকমার্ক) সাইডবার চালু করেছিল, আর এন্ট্রিগুলোকে ভিজ্যুয়ালভাবে আলাদা করতে এটি প্রতিটি সংরক্ষিত সাইট থেকে একটি ছোট আইকন আনত। এই বুকমার্কগুলোকে 'Favorites' বলা হতো বলে, আইকনটির স্বাভাবিকভাবেই নাম হয়ে যায় 'favorite icon' — সংক্ষেপে ফেভিকন। IE কোনো HTML লিংক ছাড়াই নিঃশর্তে /favicon.ico থেকে এটি আনত। এটি একটি তাৎক্ষণিক সমস্যা তৈরি করে: /favicon.ico ফাইল না থাকা প্রতিটি ওয়েব সার্ভার পেজ বুকমার্ক করা প্রতিটি ভিজিটরের জন্য একটি 404 লগ করত, ইন্টারনেট জুড়ে এরর লগ দূষিত করে।

একই বছর (১৯৯৯) পরে HTML 4.01 স্পেসিফিকেশনে এই আচরণ প্রমিতকরণ করা হয়, যা <link rel="shortcut icon"> এলিমেন্ট চালু করে — ওয়েবমাস্টারদের অন্তর্নিহিত রুট রিকোয়েস্টের উপর নির্ভর না করে ব্রাউজারকে যেকোনো URL-এ নির্দেশ করতে দেয়। HTML5 পরিষ্কার rel="icon"-এর পক্ষে 'shortcut' কীওয়ার্ড বাদ দেয় এবং sizes অ্যাট্রিবিউট যোগ করে যাতে একাধিক রেজোলিউশন ঘোষণা করা যায়। লঞ্চের সময়, ফেভিকন ১৬×১৬ পিক্সেল এবং ICO ফরম্যাটে সীমাবদ্ধ ছিল — একটি Microsoft Windows ফরম্যাট যা বিভিন্ন কালার ডেপথে একটি ফাইলের ভেতরে একাধিক বিটম্যাপ সংরক্ষণ করতে সক্ষম। ডিসপ্লে রেজোলিউশন উন্নত হওয়ার সাথে সাথে, টুলিং কনভেনশন ১৬, ৩২ ও ৪৮px ভ্যারিয়েন্টসহ মাল্টি-রেজোলিউশন ICO-র দিকে বিবর্তিত হয়, তারপর উচ্চ-DPI স্ক্রিনের জন্য PNG ফলব্যাকের দিকে, এবং শেষে SVG ফেভিকনের দিকে (২০১৫ সালে Firefox 41-এ প্রথম সমর্থিত, ২০২০-এ Chrome 80, ২০২১-এ Safari 14.1)। Windows-বিশেষ কনটেইনারে একটি একক ১৬×১৬ বিটম্যাপ থেকে একটি রেজোলিউশন-স্বাধীন, ডার্ক-মোড-সচেতন SVG-তে পৌঁছাতে দুই দশকেরও একটু বেশি সময় লেগেছে।

ছোট সাইজের জন্য ফেভিকন ডিজাইন নীতি

ফেভিকন ডিজাইনের সবচেয়ে কঠিন সীমাবদ্ধতা হলো ১৬×১৬ পিক্সেল — মোট ২৫৬ পিক্সেল। এই স্কেলে, একটি ওয়ার্ডমার্ক পড়া-অসম্ভব একটি ঝাপসায় পরিণত হয়, একটি বিস্তারিত ইলাস্ট্রেশন নয়েজে ভেঙে পড়ে, এবং পাতলা লাইন পিক্সেল সীমানার মধ্যে পড়ে যাওয়ায় সম্পূর্ণ অদৃশ্য হয়ে যায়। ১৬px-এ কার্যকর ফেভিকন ডিজাইন সাধারণত তিনটি পদ্ধতির একটির উপর নির্ভর করে: একটি একক বোল্ড ইনিশিয়াল অক্ষর (সবচেয়ে সাধারণ — Notion-এর 'N', Figma-র 'F', GitHub-এর মার্ক ভাবুন), একটি সরলীকৃত লোগোমার্ক যা পূর্ণ লোগোর সবচেয়ে স্বীকৃতিযোগ্য জ্যামিতিক উপাদান ধরে রাখে, বা একটি স্বতন্ত্র জ্যামিতিক প্রতীক — একটি আকৃতি, আইকন বা রঙের ব্লক যার ব্র্যান্ডের সাথে কোনো টাইপোগ্রাফিক সংযোগ নেই কিন্তু ছোট সাইজে ভিজ্যুয়ালি তাৎক্ষণিক।

ছোট সাইজে যেকোনো কিছুর চেয়ে বেশি গুরুত্বপূর্ণ দুটি প্রযুক্তিগত নিয়ম। প্রথমত, পাতলা স্ট্রোক এড়িয়ে চলুন: একটি ৫১২×৫১২ সোর্সে একটি ১px লাইন ১৬px-এ একটি পিক্সেলের ভগ্নাংশ হয়ে যায় এবং হয় অদৃশ্য হয়ে যায় বা একটি বিশ্রী অ্যান্টি-অ্যালিয়াসড দাগে পরিণত হয়। ৫১২px ক্যানভাসের সাপেক্ষে স্ট্রোকের প্রস্থ ন্যূনতম ২-৩px রাখুন, যা ১৬px-এ কমপক্ষে ০.০৬px-এ ম্যাপ হয় — ডাউনস্কেলিং টিকে থাকার মতো যথেষ্ট মোটা। দ্বিতীয়ত, কনট্রাস্ট সর্বোচ্চ করুন: OS ও ব্রাউজার থিমের উপর নির্ভর করে ব্রাউজার ট্যাব সাদা থেকে প্রায়-কালো পর্যন্ত বদলায়, আর ফেভিকনকে উভয়ের বিপরীতে পঠনযোগ্য থাকতে হবে। যে ডিজাইন সাদা ব্যাকগ্রাউন্ডে কাজ করে কিন্তু ডার্ক ট্যাবে অদৃশ্য হয়ে যায়, তা তার অর্ধেক ব্যবহারকারীর জন্য ব্যর্থ। SVG ফেভিকনের @media (prefers-color-scheme: dark) সমর্থন একটি ফাইলে লাইট মোডের জন্য একটি লাইট-ব্যাকগ্রাউন্ড ভার্সন এবং ডার্ক মোডের জন্য একটি ডার্ক-ব্যাকগ্রাউন্ড ভার্সন সার্ভ করতে দেয় — একমাত্র ফরম্যাট যা এই সমস্যা মার্জিতভাবে সমাধান করে।

টেস্টিংয়ের প্রেক্ষাপট ডিজাইনের মতোই গুরুত্বপূর্ণ। একটি Chrome ট্যাবে (1× স্ক্রিনে ১৬px, 2×-এ ৩২px), একটি Safari পিন করা ট্যাবে (ঐতিহাসিকভাবে ১৮×১৮-এ একটি মনোক্রোম SVG ব্যবহার করত), একটি Windows টাস্কবারে (যেখানে Windows ICO থেকে ৪৮px বেছে নিতে পারে), এবং একটি Android হোম স্ক্রিনে (যেখানে সিস্টেম নিজস্ব আকৃতির মাস্ক প্রয়োগ করে) একটি ফেভিকন ভিন্ন দেখায়। সবসময় এই প্রেক্ষাপটগুলোতে আইকনটি আসলে বসিয়ে পরীক্ষা করুন — একটি ডিজাইন টুলে ১০০% জুমে যা তীক্ষ্ণ দেখায় এবং ১৬px-এ প্রকৃত রেন্ডারিংয়ে যা টিকে থাকে তার মধ্যে পার্থক্য প্রায়ই প্রত্যাশার চেয়ে বেশি।

PWA আইকন এবং ওয়েব অ্যাপ ম্যানিফেস্ট

Web App Manifest (site.webmanifest) একটি JSON ফাইল যা একটি ওয়েবসাইটকে ইনস্টলযোগ্য প্রোগ্রেসিভ ওয়েব অ্যাপে পরিণত করে। এর মূল ক্ষেত্র হলো name (স্প্ল্যাশ স্ক্রিনে দেখানো পূর্ণ অ্যাপ নাম), short_name (হোম স্ক্রিন আইকনের নিচে ফিট করার জন্য সংক্ষিপ্ত নাম — ১২ অক্ষরের নিচে রাখুন), start_url (আইকন ট্যাপ করলে কোন URL খোলে), display (standalone ব্রাউজার ক্রোম লুকিয়ে অ্যাপকে নেটিভ মনে করায়), theme_color (Android-এ টাস্কবার বা স্ট্যাটাস-বার রঙ) এবং background_color (অ্যাপ লোড হওয়ার আগে স্প্ল্যাশ স্ক্রিন ব্যাকগ্রাউন্ড)। icons অ্যারে সিস্টেমকে বলে দেয় কোন সাইজে কোন PNG ফাইল ব্যবহার করতে হবে।

Android-এ Chrome-এর 'Add to Home Screen' অফার করতে অন্তত ১৯২×১৯২ আইকন এবং ইনস্টল স্প্ল্যাশ স্ক্রিনের জন্য একটি ৫১২×৫১২ আইকন প্রয়োজন। প্রতিটি আইকন এন্ট্রির purpose ক্ষেত্র নিয়ন্ত্রণ করে সিস্টেম কীভাবে এটি ব্যবহার করে: "purpose": "any" মানে ট্রান্সপারেন্সি ও আকৃতি সংরক্ষণ করে আইকনটি যেমন আছে তেমন প্রদর্শন করা; "purpose": "maskable" মানে আইকনটি অ্যাডাপটিভ আইকনের জন্য ডিজাইন করা — Android (8.0+), ChromeOS এবং কিছু Samsung লঞ্চার আইকনে খোদাই করা একটি সার্কেলের বাইরের সবকিছু বাদ দিয়ে তাদের পছন্দের আকৃতিতে (সার্কেল, স্কুইর্কল, রাউন্ডেড স্কয়ার) ক্রপ করে। লোগোটি অবশ্যই কেন্দ্রীয় ৮০% সেফ জোনের মধ্যে থাকতে হবে — আইকনের প্রস্থের ৪০% ব্যাসার্ধের একটি সার্কেল ক্যানভাসের কেন্দ্রে — নাহলে এটি ক্লিপ হয়ে যাবে। অনেক ডেভেলপার একই PNG-এর জন্য দুটো এন্ট্রি দেন: সংক্ষিপ্ত রূপ হিসেবে "purpose": "any maskable", যদিও এটি নিরাপদ শুধুমাত্র লোগোটি সত্যিই সেফ জোনে ফিট করলে। স্বর্ণমান হলো দুটি আলাদা ফাইল: any-এর জন্য একটি ট্রান্সপারেন্ট-ব্যাকগ্রাউন্ড আইকন এবং maskable-এর জন্য প্যাডেড, ভরাট ব্যাকগ্রাউন্ডসহ একটি।

Windows ও macOS ডেস্কটপে Chrome একটি PWA ইনস্টল করার সময়ও ম্যানিফেস্ট পড়ে: এটি টাস্কবার, স্টার্ট মেনু ও ডকের জন্য সবচেয়ে বড় উপলব্ধ আইকন (আদর্শভাবে ২৫৬×২৫৬ বা তার বেশি) বেছে নেয়। একটি বড় ম্যানিফেস্ট আইকন ছাড়া, ইনস্টল করা ডেস্কটপ PWA সাধারণ ব্রাউজার গ্লোব আইকনে ফলব্যাক করে — একটি অপরিমার্জিত অ্যাপের সুস্পষ্ট চিহ্ন। ম্যানিফেস্টে একটি ৫১২×৫১২ আইকন প্রদান করলে Android স্প্ল্যাশ স্ক্রিন এবং ডেস্কটপ অ্যাপ আইকন উভয়ই একটি ফাইলেই কভার হয়ে যায়।

Frequently asked questions

ফেভিকন কী?

ফেভিকন ('favorite icon'-এর সংক্ষিপ্ত রূপ) একটি ছোট বর্গাকার আইকন যা ব্রাউজার একটি পেজের টাইটেলের পাশে দেখায় — ব্রাউজার ট্যাবে, বুকমার্ক বারে, হিস্ট্রিতে এবং কখনও কখনও সার্চ ফলাফলে। এটি সাধারণত ১৬×১৬ বা ৩২×৩২ পিক্সেলে দেখানো হয় এবং আপনার সাইটের রুটে favicon.ico হিসেবে থাকে, আর আধুনিক সাইট হোম স্ক্রিনের জন্য একটি favicon.svg, একটি Apple touch icon এবং PWA ম্যানিফেস্ট আইকনও যোগ করে। একটি চেনার-যোগ্য ফেভিকন বুকমার্ক ও সার্চ ফলাফলে ক্লিক-থ্রু রেট উন্নত করে।

একটি ফেভিকনের সাইজ কত হওয়া উচিত?

১৬×১৬ ও ৩২×৩২ দিয়ে শুরু করুন — এই দুটো সাইজ ব্রাউজার ট্যাব ও বুকমার্কে দেখায় — একটি একক favicon.ico-তে একসাথে বান্ডল করা। পূর্ণ কভারেজের জন্য ৪৮×৪৮ (Windows ব্যবহার করে), iOS-এর জন্য একটি ১৮০×১৮০ apple-touch-icon, এবং Android ও PWA হোম স্ক্রিনের জন্য ১৯২×১৯২ ও ৫১২×৫১২ PNG-ও যোগ করুন। এই জেনারেটর একটি একক সোর্স থেকে একসাথে এসব প্রতিটি তৈরি করে, তাই আপনাকে কখনও ম্যানুয়ালি রিসাইজ করতে বা একাধিক টুল চালাতে হয় না।

আমি কীভাবে একটি ফেভিকন তৈরি করব?

একটি সোর্স বেছে নিন — একটি ছবি আপলোড করুন (PNG, JPG, SVG বা WebP), এক থেকে তিন অক্ষর টাইপ করুন, বা একটি ইমোজি ফেলে দিন — তারপর একটি ব্যাকগ্রাউন্ড রঙ, আকৃতি (স্কয়ার, রাউন্ডেড বা সার্কেল) ও প্যাডিং বেছে নিন। টুলটি একটি ক্যানভাসে সব ফেভিকন সাইজ রেন্ডার করে, ১৬/৩২/৪৮ একটি favicon.ico-তে প্যাক করে, এবং প্রতিটি ফাইল সহ আপনার <head>-এ পেস্ট করার HTML স্নিপেটসহ একটি ZIP হাতে তুলে দেয়। পুরো প্রক্রিয়াটি এক মিনিটেরও কম সময় নেয় এবং কোনো ডিজাইন সফটওয়্যারের দরকার হয় না।

একটি ছবি, SVG, টেক্সট বা ইমোজি থেকে কীভাবে ফেভিকন বানাব?

তিনটি ইনপুট ট্যাব ব্যবহার করুন। Image PNG, JPG, SVG এবং WebP গ্রহণ করে এবং আপনার লোগো সেন্টার-ফিট করে; একটি SVG আপলোড করলে সেটাও অপরিবর্তিতভাবে একটি তীক্ষ্ণ, স্কেলেবল favicon.svg হিসেবে পাস হয়। Text এক থেকে তিন অক্ষরকে আপনার নিজস্ব ফন্ট ও রঙসহ একটি পরিষ্কার লেটারমার্কে পরিণত করে ('U' একটি ইন্ডিগো রাউন্ডেড স্কয়ারে, যেমন)। Emoji যেকোনো ইমোজিকে এক ক্লিকে একটি ফেভিকনে রেন্ডার করে। যেটাই বেছে নিন, পূর্ণ আউটপুট সেট পাবেন: প্রতিটি সাইজ, .ico ও ম্যানিফেস্ট, এক ডাউনলোডে।

২০২৬ সালে আমার কোন ফেভিকন সাইজগুলো দরকার?

প্র্যাকটিক্যাল আধুনিক সেট হলো: favicon.ico-এর ভেতরে ১৬×১৬, ৩২×৩২ ও ৪৮×৪৮; একটি ঐচ্ছিক স্কেলেবল favicon.svg; একটি ১৮০×১৮০ apple-touch-icon.png; এবং site.webmanifest থেকে রেফারেন্স করা ১৯২×১৯২ ও ৫১২×৫১২ maskable PNG। এটি আপনার <head>-কে ভারী না করে ডেস্কটপ ট্যাব, iOS হোম স্ক্রিন এবং Android/PWA ইনস্টল কভার করে। এই টুল এসব সবকিছু এক ক্লিকে তৈরি করে দেয় — Photoshop, Figma বা অন্য কোনো অ্যাপে আলাদা সাইজ এক্সপোর্ট চালানোর দরকার নেই।

favicon.ico কী এবং এটি কি এখনও প্রয়োজন?

favicon.ico একটি একক কনটেইনার ফাইল যাতে বেশ কয়েকটি বিটম্যাপ সাইজ (সাধারণত ১৬, ৩২ ও ৪৮) থাকে। কোনো HTML লিংক না থাকলেও ব্রাউজার স্বয়ংক্রিয়ভাবে /favicon.ico রিকোয়েস্ট করে, তাই এটি এখনও সবচেয়ে নির্ভরযোগ্য ফলব্যাক — এটি রাখুন। আধুনিক ব্রাউজার আপনি প্রদান করলে একটি favicon.svg বা PNG লিংককে প্রাধান্য দেবে, কিন্তু .ico পুরনো ব্রাউজার ও ফিড রিডারসহ সবখানে একটি আইকন নিশ্চিত করে। এই জেনারেটর একটি প্রকৃত মাল্টি-রেজোলিউশন .ico তৈরি করে, রিনেম করা PNG নয়।

আমার ওয়েবসাইটে ফেভিকন কীভাবে যোগ করব?

জেনারেট করা ফাইলগুলো আপনার সাইট রুটে ফেলুন এবং <head>-এর ভেতরে এই ট্যাগগুলো যোগ করুন: <link rel="icon" href="/favicon.ico" sizes="32x32">, <link rel="icon" href="/favicon.svg" type="image/svg+xml">, <link rel="apple-touch-icon" href="/apple-touch-icon.png"> এবং <link rel="manifest" href="/site.webmanifest">। টুলটি একটি মিলিত theme-color মেটা ট্যাগসহ এই ঠিক স্নিপেটটি জেনারেট করে দেয়, কপি করার জন্য। যেকোনো ফ্রেমওয়ার্কের জন্য কাজ করে — Next.js, Astro, React, প্লেইন HTML।

একটি ফেভিকন কোন ফরম্যাটে হওয়া উচিত — PNG, SVG নাকি ICO?

সেরা ফলাফলের জন্য তিনটিই একসাথে ব্যবহার করুন। ICO (favicon.ico) হলো প্রতিটি ব্রাউজার রিকোয়েস্ট করা ইউনিভার্সাল ফলব্যাক। SVG একটি তীক্ষ্ণ, অসীম-স্কেলযোগ্য আইকন দেয় এবং এমনকি ডার্ক মোডেও খাপ খেতে পারে, কিন্তু সব প্রেক্ষাপটে সমর্থিত নয়। PNG হলো যা Apple touch icon এবং Android ম্যানিফেস্ট আইকন ব্যবহার করে। favicon.ico + favicon.svg + PNG apple/manifest আইকন একসাথে প্রদান করলে প্রতিটি ডিভাইস কভার হয় — যা ঠিক এই টুল এক ZIP ডাউনলোডে তৈরি করে দেয়।

Apple touch icon কী?

apple-touch-icon হলো একটি ১৮০×১৮০ PNG যা iOS ও iPadOS ব্যবহার করে যখন কেউ আপনার সাইট হোম স্ক্রিনে যোগ করে। এতে একটি সলিড (নন-ট্রান্সপারেন্ট) ব্যাকগ্রাউন্ড এবং স্কয়ার কোণা থাকা উচিত — iOS নিজেই সেগুলো গোল করে দেয় — তাই এই টুল সেই ফাইলের জন্য ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সলিড রঙে ভরে দেয়। <link rel="apple-touch-icon" href="/apple-touch-icon.png"> দিয়ে যোগ করুন। এটি ছাড়া, iOS হোম স্ক্রিন আইকন হিসেবে আপনার পেজের একটি স্ক্রিনশট ব্যবহার করে, যা অপেশাদার দেখায়।

maskable icon / web app manifest icon কী?

ম্যানিফেস্ট আইকন (site.webmanifest-এ তালিকাভুক্ত ১৯২×১৯২ ও ৫১২×৫১২ PNG) যা Android ও ইনস্টল করা PWA ব্যবহার করে। একটি 'maskable' আইকন তার গুরুত্বপূর্ণ কনটেন্ট একটি কেন্দ্রীয় সেফ জোনে রাখে — আইকনের প্রায় ৮০% — যাতে সিস্টেম যখন এটিকে একটি সার্কেল, স্কুইর্কল বা রাউন্ডেড স্কয়ারে ক্রপ করে তখনও এটি ঠিক দেখায়। এই টুল স্বয়ংক্রিয়ভাবে ১৯২ ও ৫১২ আইকনে সেই সেফ-জোন প্যাডিং যোগ করে এবং সেগুলো purpose: maskable দিয়ে চিহ্নিত করে। সেফ এরিয়া ম্যানুয়ালি হিসাব করার দরকার নেই।

আমার ফেভিকন কেন দেখাচ্ছে না?

প্রায় সবসময়ই ব্রাউজার ক্যাশিং। ব্রাউজার ফেভিকন আগ্রাসীভাবে ক্যাশ করে, তাই একটি হার্ড রিফ্রেশ করুন (Ctrl+F5), আইকন URL সরাসরি খুলে (yoursite.com/favicon.ico) নিশ্চিত করুন এটি লোড হচ্ছে, বা একটি প্রাইভেট উইন্ডোতে চেষ্টা করুন। ফাইলগুলো আপনার সাইট রুটে আছে কিনা, আপনার <link> ট্যাগের পাথ সঠিক কিনা (একটি লিডিং স্ল্যাশ গুরুত্বপূর্ণ), এবং আপনি আসলেই প্রতিটি সাইজ আপলোড করেছেন কিনা তাও চেক করুন। নতুন ফেভিকনের বুকমার্ক ও সার্চ ফলাফলে রিফ্রেশ হতে কিছুটা সময় লাগতে পারে — ডিপ্লয়ের পর কয়েক ঘণ্টা সময় দিন।

আমার লোগো আপলোড করা কি নিরাপদ?

হ্যাঁ — কারণ আসলে কিছুই আপলোড হয় না। প্রতিটি ধাপ একটি HTML <canvas> ও জাভাস্ক্রিপ্ট ব্যবহার করে আপনার ব্রাউজারে চলে: আপনার ছবি স্থানীয়ভাবে পড়া হয়, রিসাইজ করা হয়, PNG ও ICO-তে এনকোড করা হয়, এবং আপনার ডিভাইসেই জিপ করা হয়। কোনো ফাইল কখনও কোনো সার্ভারে পাঠানো হয় না, favicon.io এবং RealFaviconGenerator.net-এর মতো টুলের বিপরীতে যেগুলো ক্লাউডে আপনার ছবি প্রসেস করে। আপনার লোগো কখনও কম্পিউটার ছেড়ে যায় না — একটি ক্লায়েন্ট প্রজেক্ট বা অপ্রকাশিত প্রোডাক্টে কাজ করলে যা গুরুত্বপূর্ণ।

favicon.io এবং RealFaviconGenerator.net-এর সাথে UtiloKit কেমন?

favicon.io দ্রুত ও জনপ্রিয়, কিন্তু এটি প্রসেস করার জন্য আপনার ছবি তাদের সার্ভারে আপলোড করে। RealFaviconGenerator.net-এ আরও অপশন আছে কিন্তু একটি জটিল মাল্টি-স্টেপ UI, আর এটিও সার্ভার আপলোড দাবি করে। favicon-generator.org পুরনো এবং সঠিক maskable ম্যানিফেস্ট আইকন ছাড়া শুধু বেসিক PNG সাইজ তৈরি করে। UtiloKit সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে তৈরি করে — আপনার লোগো কখনও ডিভাইস ছেড়ে যায় না — একটি প্রকৃত মাল্টি-রেজোলিউশন ICO, সঠিক সেফ-জোন প্যাডিংসহ maskable ম্যানিফেস্ট আইকন তৈরি করে, এবং একটি কপি-রেডি <head> স্নিপেট দেয়। কোনো অ্যাকাউন্ট নেই, আপলোড নেই, সার্ভার প্রসেসিংয়ের জন্য অপেক্ষা নেই।

ফেভিকন জেনারেটর কি আইফোন ও অ্যান্ড্রয়েডে কাজ করে?

হ্যাঁ — ক্যানভাস API ও ফাইল ডাউনলোড iOS Safari, Chrome for Android এবং Samsung Internet-এ কাজ করে। আপনি ক্যামেরা রোল থেকে একটি ছবি আপলোড করতে পারেন, একটি অক্ষর টাইপ করতে পারেন, বা একটি ইমোজি পেস্ট করতে পারেন, তারপর পুরো ZIP সরাসরি আপনার ফোনে ডাউনলোড করতে পারেন। ডেস্ক থেকে দূরে থাকা অবস্থায় দ্রুত একটি ফেভিকন প্রোটোটাইপ করতে এটি কাজে আসে। লেআউট ছোট স্ক্রিনের সাথে খাপ খায় যাতে টুলটি ৩৭৫px-এ ব্যবহার করা আরামদায়ক হয়।

কোয়ালিটি নিয়ন্ত্রণসহ PNG, JPG ও WebP-এর মধ্যে ছবি রূপান্তর করুন।

ছবি ও মিডিয়া