ابزار ساخت فاوآیکون از عکس و لوگو
یک لوگو یا تصویر را به مجموعه کامل آیکون‌های سایت تبدیل کنید؛ از favicon.ico تا Apple Touch Icon، آیکون‌های PWA، Manifest و کد آماده Head.
تصویر اصلی
تنظیم قاب و ظاهر
تنظیمات سایت و PWA
خروجی‌ها
کد آماده برای <head>
فایل‌های ZIP را در ریشه سایت یا مسیر دلخواه قرار بده. اگر مسیر فایل‌ها را تغییر دادی، آدرس‌های کد بالا و Manifest را هم مطابق آن تغییر بده.
ساخت Favicon کامل برای مرورگر و PWA
یک Favicon حرفه‌ای فقط یک فایل 16×16 نیست. سایت‌های مدرن معمولاً به چند اندازه و فرمت برای مرورگر، صفحه Home دستگاه و PWA نیاز دارند. این Generator مجموعه فایل‌ها و کدهای لازم را در یک جریان کاری آماده می‌کند.
قبل از خروجی می‌توانید Crop، پس‌زمینه و Safe Zone را کنترل کنید تا لوگو در اندازه‌های کوچک هم واضح بماند و نسخه Maskable برای محیط‌های PWA فضای امن کافی داشته باشد.
راهنمای استفاده از ابزار ساخت فاوآیکون
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
ابزار ساخت فاوآیکون یک لوگو یا تصویر را به مجموعه فایل‌های Favicon و PWA تبدیل می‌کند. Fit، Position، Background، Radius و تنظیمات Manifest را کنترل می‌کنید و در پایان ZIP، ICO و Head Code می‌گیرید.
قبل از شروع این موارد را بدانید
- ترجیحاً تصویر مربع و باکیفیت استفاده کنید.
- لوگو را در سایز کوچک Preview کنید؛ جزئیات ریز ممکن است دیده نشوند.
- برای PWA اطلاعات Manifest را با داده واقعی پروژه پر کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. تصویر را انتخاب کنیدلوگو یا تصویر اصلی را وارد کنید.
- ۲. قاب را تنظیم کنیدFit، اندازه، جابه‌جایی، پس‌زمینه و گردی گوشه‌ها را تنظیم کنید.
- ۳. اطلاعات PWA را تکمیل کنیدنام سایت، رنگ‌ها، Start URL و Display را در صورت نیاز وارد کنید.
- ۴. پکیج را بگیریدZIP کامل، favicon.ico یا کد آماده head را دانلود/کپی کنید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Fit
- نحوه قرار گرفتن تصویر در قاب خروجی.
- Theme/Background Color
- رنگ‌های مورد استفاده در Manifest و محیط نصب.
- Maskable
- خروجی مناسب آیکون‌های قابل ماسک در PWA.
- Head Code
- تگ‌های لازم برای معرفی فایل‌های favicon به مرورگر.
خروجی ابزار را چطور تفسیر کنید؟
قبل از Download، خروجی را در اندازه‌های کوچک کنترل کنید. ZIP شامل چند فایل با نقش متفاوت است؛ favicon.ico فقط یکی از آن‌هاست. Head Code را بعد از آپلود فایل‌ها با مسیر واقعی سایت تطبیق دهید.
اگر مرحله بعدی کارتان این است
سوالات رایج
چه تصویری برای Favicon مناسب‌تر است؟
لوگوی ساده، مربع یا قابل Crop و با جزئیات کم در اندازه کوچک معمولاً نتیجه بهتری می‌دهد.
ICO بهتر است یا PNG؟
هر دو کاربرد دارند؛ ICO برای سازگاری گسترده مفید است و PNG/SVG برای سناریوهای مدرن کیفیت و انعطاف بیشتری می‌دهند.
Favicon را کجا قرار دهیم؟
فایل‌ها را در سایت قرار دهید و تگ‌های link و Manifest تولیدشده را در Head یا تنظیمات قالب اضافه کنید.