تولیدکننده فاوآیکون (Favicon) ابزاری تخصصی برای تبدیل یک تصویر ورودی به مجموعهای کامل از آیکونهای استاندارد وب است. این ابزار با دریافت یک فایل تصویری، تمامی ابعاد مورد نیاز برای تبهای مرورگر، دستگاههای اپل و وباپلیکیشنهای پیشرونده (PWA) را تولید کرده و آنها را در قالب یک فایل ZIP به همراه کدهای HTML لازم ارائه میدهد.
نحوه پردازش و حریم خصوصی کاربران
تصویر شما در مرورگر خودتان به آیکون تبدیل میشود. در این فرآیند، هیچ فایلی در BroBroGo بارگذاری نخواهد شد و تمامی مراحل تبدیل و ساخت آیکونها به صورت محلی روی دستگاه کاربر انجام میپذیرد.
مشخصات تصویر ورودی و محدودیتها
برای شروع کار با ابزار، کاربر باید یک فایل تصویری با فرمت PNG، JPG یا SVG انتخاب کند. جهت دستیابی به بهترین کیفیت در آیکونهای بزرگ، رعایت نکات زیر ضروری است:
- محدودیت حجم فایل: ابزار از تصاویر تا سقف ۵۰ مگابایت پشتیبانی میکند. در صورت بارگذاری فایل بزرگتر، خطای «حجم این فایل بیش از ۵۰ مگابایت است. از تصویر منبع کوچکتری استفاده کنید.» نمایش داده میشود.
- ابعاد پیشنهادی: برای تصاویر شطرنجی (PNG یا JPG)، ابعاد حداقل ۵۱۲ × ۵۱۲ پیکسل توصیه میشود. اگر تصویر ورودی کوچکتر باشد، ابزار هشدار «تصویر منبع کوچک است (
{w}×{h}px): آیکونهای بزرگ ممکن است تار به نظر برسند. ابعاد ۵۱۲ × ۵۱۲ یا بزرگتر — یا فایل SVG — بهترین نتیجه را ارائه میدهد.» را نشان میدهد؛ زیرا بزرگنمایی تصاویر کوچک باعث نرم و تار شدن لبههای آیکونهای بزرگ میشود. - فرمتهای پشتیبانینشده: در صورت تلاش برای بارگذاری فرمتهای دیگر، خطای «فقط از تصاویر PNG، JPG و SVG پشتیبانی میشود.» صادر خواهد شد. همچنین اگر فایل خراب یا خالی باشد، پیام «این فایل به عنوان تصویر باز نشد. ممکن است خراب، خالی یا فاقد فرمت تصویری باشد.» و برای فایلهای برداری معیوب، پیام «این فایل SVG قابل خواندن نبود. بررسی کنید که فایل یک سند SVG معتبر باشد.» نمایش داده میشود.
مدیریت تصاویر غیرمربعی و رنگ پسزمینه
از آنجا که تمامی آیکونهای استاندارد وب باید به صورت مربع (نسبت تصویر ۱:۱) تولید شوند، ابزار برای تصاویر غیرمربعی دو راهکار ارائه میدهد که کاربر میتواند بر اساس نیاز خود یکی را انتخاب کند:
- تناسب (حاشیه دور): در این حالت که به عنوان پیشفرض فعال است، کل تصویر با قرارگیری در مرکز و ایجاد فاصله در اطراف آن، نمایان باقی میماند تا تناسب اصلی تصویر حفظ شود.
- پر کردن (برش لبهها): در این حالت، تصویر کادر مربعی را پر میکند و لبههای اضافی آن که از کادر بیرون میزنند، بریده میشوند.
علاوه بر نحوه قرارگیری تصویر، تنظیمات پسزمینه نیز نقش مهمی در نمایش نهایی آیکونها دارد:
- شفاف: به صورت پیشفرض، پسزمینه آیکونها بدون رنگ و شفاف در نظر گرفته میشود. این حالت برای تبهای مرورگر بسیار مناسب و زیبا است.
- رنگ پسزمینه: کاربر میتواند یک رنگ اختصاصی برای پسزمینه آیکونها تعیین کند. انتخاب رنگ پسزمینه برای آیکونهای صفحه اصلی آیفون مطمئنتر است؛ زیرا سیستمعامل iOS بخشهای شفاف آیکونها را به رنگ مشکی نمایش میدهد که ممکن است ظاهر آیکون را خراب کند.
خروجیهای تولیدشده در بسته آیکون
پس از اتمام فرآیند پردازش، ابزار یک فایل ZIP حاوی موارد زیر را در اختیار کاربر قرار میدهد:
| نام فایل خروجی | ابعاد (پیکسل) / فرمت | کاربرد و نقش در وبسایت |
|---|---|---|
favicon.ico |
حاوی نسخههای ۱۶، ۳۲ و ۴۸ | آیکون کلاسیک تب مرورگر |
| آیکونهای PNG | ۱۶ × ۱۶ و ۳۲ × ۳۲ | آیکون تب مرورگر (PNG) |
| آیکون PNG | ۱۸۰ × ۱۸۰ | مناسب برای صفحه اصلی آیفون و آیپد (Apple touch icon) |
| آیکون PNG | ۱۹۲ × ۱۹۲ | مناسب برای دستگاههای اندرویدی |
| آیکون PNG | ۵۱۲ × ۵۱۲ | مناسب برای وباپلیکیشنهای نصبشده (PWA) |
site.webmanifest |
فایل متنی کوچک | محل قرارگیری آیکونهای بزرگ را به دستگاهها اعلام میکند |
| فایل SVG | برداری (Vector) | در صورت استفاده از منبع SVG، فایل اصلی برای مرورگرهای مدرن گنجانده میشود |
همچنین ابزار یک قطعه کد HTML تولید میکند که کاربر باید آن را کپی کرده و در بخش <head> صفحات وبسایت خود قرار دهد تا مرورگرها و دستگاههای مختلف بتوانند آیکون مناسب را شناسایی و بارگذاری کنند.
راهنمای نصب و پیادهسازی آیکونها در سایت
برای استفاده از آیکونهای تولیدشده در وبسایت خود، مراحل زیر را دنبال کنید:
- پس از کلیک روی دکمه «تولید آیکونها»، فایل ZIP خروجی را با کلیک روی «دانلود فایل ZIP» دریافت کنید.
- محتویات فایل ZIP را استخراج کرده و تمامی فایلهای آیکون (شامل فایلهای PNG،
favicon.icoوsite.webmanifest) را در پوشه ریشه (root) هاست وبسایت خود بارگذاری کنید. قرارگیری فایلها در پوشه ریشه باعث میشود که فایلfavicon.icoدر مسیر/favicon.icoبه راحتی توسط مرورگرها پیدا شود. - کد HTML تولیدشده در بخش «افزودن به بخش» را کپی کنید.
- این کد را در بخش
<head>تمامی صفحات وبسایت خود قرار دهید. مرورگرها و سیستمهای عامل به طور خودکار بر اساس نیاز دستگاه، اندازه و فرمت مناسب را از پوشه ریشه فراخوانی میکنند.
پرسشهای متداول
چه فایلهایی در بسته آیکون وجود دارد؟
فایل favicon.ico حاوی نسخههای ۱۶، ۳۲ و ۴۸ پیکسلی، آیکونهای PNG در ابعاد ۱۶، ۳۲، ۱۸۰، ۱۹۲ و ۵۱۲ پیکسل، و یک فایل site.webmanifest که آیکونهای بزرگ را فهرست میکند. اگر از یک فایل SVG شروع کنید، خود فایل برداری نیز گنجانده میشود. همه این موارد در یک فایل ZIP ارائه میشوند.
اندازه تصویر منبع من چقدر باید باشد؟
فرمت SVG ایدهآل است — هر آیکون از روی وکتور ترسیم میشود، بنابراین حتی در ابعاد ۱۶ پیکسل نیز کاملاً واضح باقی میماند. برای فرمتهای PNG یا JPG، بهتر است از ابعاد حداقل ۵۱۲ × ۵۱۲ شروع کنید؛ تصاویر کوچکتر بزرگنمایی شده و ممکن است تار به نظر برسند.
آیا پسزمینه باید شفاف باشد یا رنگی؟
آیکونهای تب مرورگر با پسزمینه شفاف عالی به نظر میرسند. با این حال، صفحات اصلی آیفون و آیپد بخشهای شفاف را مشکی نشان میدهند — اگر احتمال میدهید کاربران سایت شما را به صفحه اصلی خود اضافه کنند، یک رنگ پسزمینه انتخاب کنید.
چه اتفاقی برای تصاویر غیرمربعی میافتد؟
آیکونها مربع هستند، اما تصویر شما هرگز کشیده نمیشود. به طور پیشفرض، تصویر در مرکز قرار گرفته و حاشیهای دور آن ایجاد میشود؛ برای بریدن لبههای اضافی میتوانید حالت را به «پر کردن (برش لبهها)» تغییر دهید.
فایلها باید در کجای سایت من قرار بگیرند؟
آنها را در پوشه ریشه (root) سایت خود بارگذاری کنید تا فایل favicon.ico در مسیر /favicon.ico در دسترس باشد، سپس کدهای تولیدشده را در بخش صفحات خود قرار دهید. مرورگرها به طور خودکار اندازه مناسب را انتخاب میکنند.