یک مجموعهی درست favicon بیش از یک فایل است: مرورگرها یک .ico چنداندازه میخواهند، iOS یک apple-touch-icon ۱۸۰ پیکسلی میخواهد، اندروید PNGهای ۱۹۲ و ۵۱۲ پیکسلی بهعلاوهی یک web manifest میخواهد. این ابزار همهی اینها را از یک تصویر رندر میکند و در یک ZIP بستهبندی میکند، همراه با تگهای دقیق HTML برای چسباندن در <head> شما.
پیشنمایش، آیکون شما را در اندازههای واقعی ۱۶، ۳۲ و ۴۸ پیکسل نشان میدهد تا پیش از انتشار مطمئن شوید در اندازههای ریز هم قابل تشخیص میماند.
نحوه استفاده
- لوگوی خود را اضافه کنیدتصاویر مربعی بهتریناند؛ بقیه از مرکز برش میخورند.
- اندازههای کوچک را بررسی کنیدپیشنمایش ۱۶ پیکسلی همان چیزی است که بیشتر کاربران واقعاً در یک تب میبینند.
- ZIP را دانلود کنیدfavicon.ico، شش PNG، site.webmanifest و یک html-snippet.txt آمادهی چسباندن.
یک تصویر داخل، یک مجموعهٔ کامل favicon بیرون
یک لوگو یا آیکون واحد را بیندازید و این مولد مجموعهٔ کاملی را که یک سایت مدرن لازم دارد میسازد: یک favicon.ico چنداندازه که نسخههای ۱۶، ۳۲ و ۴۸ پیکسلی را بستهبندی میکند، PNGهای مستقل در ۱۶، ۳۲، ۴۸، ۱۸۰ برای آیکون لمسی Apple، و ۱۹۲ و ۵۱۲ برای نصبهای Android و PWA، بهعلاوهٔ یک site.webmanifest. همهچیز بهصورت یک ZIP پایین میآید تا بتوانید مستقیم در ریشهٔ پروژهتان بیندازید.
یک قطعهٔ head آمادهٔ HTML هم میگیرید با تگهای link و meta درست از پیش سیمکشیشده. آن را در قالبتان کپی کنید، فایلها را آپلود کنید، و favicon در تبهای مرورگر، نشانکها و میانبرهای صفحهٔ اصلی نشان داده میشود بدون آنکه هیچ نشانهگذاریای دستی بنویسید.
آیکونهای تیز در هر اندازه
faviconها بهطرز طاقتفرسایی کوچکاند، پس مولد پیشنمایشهای اندازهٔواقعی را در ۱۶، ۳۲ و ۴۸ پیکسل رندر میکند، دقیقاً همانطور که یک تب مرورگر نشانشان میدهد. این به شما اجازه میدهد لوگویی را که در 16px به لجن تبدیل میشود پیش از ارسال بگیرید. اگر تصویر منبع شما مربعی نیست، ابزار آن را مرکز-برش میکند تا آیکون بهجای لهشدن متعادل بماند.
کل فرآیند در مرورگر از تصویر اصلی شما اجرا میشود، یعنی میتوانید PNGهای favicon و یک ICO را از یک لوگوی با رزولوشن بالا بدون هیچ آپلود یا حسابی تولید کنید.
مردم از آن برای چه استفاده میکنند
راهاندازی یک سایت جدید — favicon.ico و هر اندازهٔ PNG را در یک پاس تولید کنید تا تبها و نشانکها از روز اول تمامشده بهنظر برسند.
افزودن یک آیکون نصب PWA — PNGهای ۱۹۲ و ۵۱۲ بهعلاوهٔ یک site.webmanifest را خروجی بگیرید تا اپ شما با یک آیکون صفحهٔ اصلی درست نصب شود.
آیکون لمسی Apple — apple-touch-icon با اندازهٔ 180x180 را تولید کنید تا نشانکها و صفحههای اصلی iOS یک کاشی تیز نشان دهند.
تغییر برند یک سایت موجود — یک لوگوی جدید را از مولد رد کنید و کل مجموعه آیکون را یکجا جایگزین کنید.
تحویل به مشتری — یک ZIP واحد از ico، PNGها، manifest و قطعهٔ head را تحویل دهید تا توسعهدهنده فقط آن را بیندازد.
بررسی خوانایی در اندازهٔ کوچک — از پیشنمایش اندازهٔواقعی 16px استفاده کنید تا تأیید کنید یک لوگوی پرجزئیات هنوز بهصورت یک آیکون خوانده میشود.
لوگوی غیرمربعی — یک وردمارک عریض را بدهید و بگذارید مرکز-برش آن را به یک favicon مربعی متعادل بدل کند.
پروژهٔ سایت استاتیک یا فریمورک — تگهای head تولیدشده را در قالب Next، Astro یا HTML سادهٔ خودتان کپی کنید و ارسال کنید.
یک مجموعه کامل favicon از یک تصویر بسازید — در مرورگر، در یک گذر
favicon مثل یک فکر بعدیِ تک ۱۶×۱۶ پیکسلی بهنظر میرسد، و سالها همین بود. مرورگرها و پلتفرمهای مدرن بیسروصدا آن را به یک تولید کوچک تبدیل کردهاند. برای انجام درست آن امروز به یک favicon.ico، یک گستره از PNGها از ۱۶ پیکسل تا ۵۱۲ پیکسل، یک Apple touch icon برای صفحه اصلی iOS، یک site.webmanifest تا سایت بتواند بهعنوان یک اپلیکیشن نصب شود، و بلوک درست از تگهای <link> و <meta> در <head> HTMLتان نیاز دارید. یک اندازه را از قلم بیندازید و آیکون تبتان روی صفحه retina مبهم بهنظر میرسد؛ manifest را از قلم بیندازید و آیکون «افزودن به صفحه اصلی» به یک اسکرینشات برمیگردد؛ بلوک تگ را اشتباه کنید و برخی پلتفرمها کل ماجرا را نادیده میگیرند.
این کلی خروجی دردسری است برای کاری که یک بار در هر پروژه انجام میدهید و بعد جزئیاتش را فراموش میکنید. IMG.DIY یک تصویر منبع واحد میگیرد و مجموعه کامل را تولید میکند — .ico، هر اندازه PNG، web manifest، و یک قطعه HTML آماده کپیودرج — و کاملاً در مرورگر شما با Canvas تغییر اندازه میدهد. لوگوی شما بهصورت محلی خوانده و روی دستگاه به هر اندازه هدف رندر میشود؛ چیزی آپلود نمیشود. برای یک نشان برند یا لوگوی محصولی رونمایینشده که ترجیح میدهید پیش از عرضه به یک سرور شخص ثالث پستش نکنید، آن تضمین محلی ارزش داشتن دارد، و هیچ هزینهای ندارد.
چون کل زنجیره سمت کلاینت اجرا میشود، همینکه PWA کش شود آفلاین هم کار میکند، پس میتوانید آیکونها را روی یک دستگاه کاری قفلشده یا بدون اتصال دوباره بسازید. رایگان، بدون حساب کاربری، بدون واترمارکی که در آیکونهایتان پخته شود.
چه چیزی آن را متفاوت میکند
- کل مجموعه، نه فقط یک .ico. ICO، PNGها از ۱۶ تا ۵۱۲، Apple touch icon، و
site.webmanifestدر یک دانلود. - HTML آماده کپیودرج شامل است. بلوک دقیق
<link>/<meta>برای انداختن در<head>، تا آیکونها واقعاً در سراسر مرورگرها ثبت شوند. - چیزی آپلود نمیشود. لوگوی شما بهصورت محلی تغییر اندازه مییابد — مفید وقتی نشان محرمانه یا پیش از عرضه است.
- یک گذر، بدون جادوگر. یک تصویر بده، همهچیز بگیر؛ بدون یک جریان چندمرحلهای که انتخابهای پلتفرمی بخواهد که بعد باید تحقیقشان کنید.
- آفلاین و تمیز. PWA کششده، بدون ثبتنام، بدون واترمارک روی هیچ آیکون تولیدشده.
IMG.DIY در برابر سایر سازندههای favicon
| جنبه | favicon.io | realfavicongenerator.net | دستی (اپ طراحی + کد) | IMG.DIY |
|---|---|---|---|---|
| فایلها آپلود میشوند | بله، به سرورشان | بله، به سرورشان | خیر، محلی | خیر، در مرورگر میماند |
| مجموعه کامل (.ico + PNGها + manifest) | بله | بله، بسیار جامع | خودتان سرهم میکنید | بله |
| قطعه HTML ارائهشده | بله | بله، مفصل | خودتان مینویسید | بله |
| گام تا نتیجه | چند | بیشتر (کلی گزینه) | زیاد | یک گذر |
| آفلاین کار میکند | خیر | خیر | بله | بله، پس از اولین بازدید |
| قیمت | رایگان | سطح رایگان؛ گزینههای پولی | هزینه اپ + وقت شما | رایگان |
| نیاز به حساب کاربری | خیر | خیر | خیر | خیر |
رک درباره رقابت: realfavicongenerator عالی است و واقعاً جامعتر — آیکونتان را روی پلتفرمهای واقعی پیشنمایش میدهد، حالتهای لبهای مثل ماسک تب سنجاقشده Safari و تمبندی را مدیریت میکند، و به شما اجازه میدهد ظاهر هر پلتفرم را تنظیم کنید. اگر آن سطح از کنترل را میخواهید و آپلود تصویرتان مشکلی نیست، انتخاب عالیای است. favicon.io سریع و ساده است و آن هم یک مجموعه محکم تولید میکند. تفاوت IMG.DIY ترکیب خروجی کامل با بدون آپلود و یک گذر است: همان تحویلیهای عملی را میگیرید — ico، PNGها، manifest، و HTML برای سیمکشیشان — بدون آنکه لوگویتان مرورگر را ترک کند و بدون گامگذاشتن در یک جادوگر پیکربندی. برای «یک لوگو دارم، هر چیزی را که برای درج لازم دارم بده، و فایلم را جایی نفرست»، این همان تناسب است.
چرا IMG.DIY
مجموعهی کامل
ICO + PNGهای ۱۶/۳۲/۴۸/۱۸۰/۱۹۲/۵۱۲ + manifest.
HTML آمادهی کپی
تگهای link دقیق در قالب یک فایل متنی گنجانده شدهاند.
پیشنمایش اندازهی واقعی
ابتدا آیکون را در اندازههای واقعی ۱۶/۳۲/۴۸ پیکسل ببینید.
خصوصی
لوگوی شما هرگز از مرورگر خارج نمیشود.