چگونه یک فاوآیکون بسازیم.

Favicon / ICO Generator را باز کرده و Image را انتخاب کنید. یک PNG، JPG، JPEG، WebP یا GIF آپلود کنید، یا Try a sample را انتخاب کنید. مثال کاری از favicon-orbit.png استفاده می‌کند، یک نشان مدار بنفش 512 × 512 پیکسلی با گوشه‌های شفاف. ورودی 202,491 بایت است.

برای برندی که لوگوی نهایی ندارد، در صفحه ابزار متن را انتخاب کنید. یک یا دو حرف وارد کرده و ادامه را بزنید. ویرایشگر فونت‌های Modern sans، Classic serif و Monospace، به علاوه رنگ‌های متن و پس‌زمینه جداگانه را ارائه می‌دهد. تا سه کاراکتر پذیرفته می‌شود، اما کاراکترهای اضافی ممکن است در اندازه‌های کوچک به سختی قابل تشخیص باشند.

اثر هنری اصلی را نگه دارید. تولیدکننده فایل‌های آیکون جدید ایجاد می‌کند و منبع را بازنویسی نمی‌کند. ورودی GIF به جای فاوآیکون متحرک، به یک آیکون ثابت تبدیل می‌شود.

برای مونوگرام، منوی Font با سه سبک گنجانده شده شروع می‌شود. در یک مرورگر دسکتاپ پشتیبانی‌شده، استفاده از فونت‌های سیستم را انتخاب کرده و اجازه دسترسی بدهید تا فونت‌های نصب‌شده روی دستگاه خود را اضافه کنید. از پیکان‌های قبلی و بعدی برای مقایسه فونت‌های مجاور استفاده کنید، یا یک خانواده را انتخاب کرده و پیش‌نمایش زنده را بررسی کنید، به‌ویژه در 16 پیکسل. فونت‌ها روی دستگاه شما باقی می‌مانند؛ سبک‌های گنجانده شده بدون نیاز به اجازه کار می‌کنند.

ویرایشگر زبانه‌های مرورگر روشن و تیره و همچنین پیش‌نمایش‌هایی در اندازه‌های رایج آیکون را نمایش می‌دهد. ابتدا مثال 16 پیکسلی را بررسی کنید؛ این سخت‌ترین آزمون برای تشخیص این است که آیا نشان همچنان قابل تشخیص باقی می‌ماند یا خیر. پیش‌نمایش Apple Touch نشان‌دهنده خروجی 180 پیکسلی است و در فضای کاری کوچک‌تر نمایش داده می‌شود.

در گوشی، Settings را باز کنید. Create from را روی Uploaded image و Image fit را روی نمایش کل تصویر بگذارید. برای این نمونه، Space around content را روی 0 تنظیم کرده و پس‌زمینه شفاف را فعال کنید. منبع از قبل دارای شکل بنفش گرد و حاشیه‌های شفاف خود است، بنابراین نیازی به پس‌زمینه رنگی اضافی ندارد.

با یک منبع متفاوت، نمایش کل تصویر لبه‌ها را حفظ می‌کند، در حالی که Fill the icon ممکن است آن‌ها را برش دهد. Rounded square، Square و Circle شکل بیرونی را تعریف می‌کنند. پس‌زمینه شفاف نواحی شفاف را حفظ می‌کند اما نمی‌تواند پس‌زمینه مات که از قبل در عکس کشیده شده را حذف کند. پس از هر تغییر کادربندی، کوچک‌ترین پیش‌نمایش را بررسی کنید.

در بخش دانلود، برای این مثال گزینه بسته آیکون وب‌سایت (ZIP) را انتخاب کنید. نام وب‌سایت را برای نمونه روی My website بگذارید یا آن را با نام برند واقعی پروژه خود جایگزین کنید. این نام در site.webmanifest استفاده می‌شود؛ به عنوان متن روی تصویر اضافه نمی‌شود.

شروع (Start) را انتخاب کنید. مرورگر یک favicon.ico هفت‌فریمی با تصاویر مربعی در ابعاد 16، 24، 32، 48، 64، 128 و 256 پیکسل تولید می‌کند. همچنین PNG آیکون در ابعاد 16، 32، 48، 180، 192 و 512 پیکسل، یک مانیفست و دستورالعمل‌های نصب ایجاد می‌کند. نتیجه یک فایل ZIP است، نه یک دکمه دانلود جداگانه برای هر آیکون.

اگر فقط به یک favicon.ico کلاسیک نیاز دارید، به جای آن Multi-size ICO را انتخاب کنید. این کار زمانی مفید است که پلتفرم وب‌سایت یک آپلود ICO را می‌پذیرد و نیازی به بسته جداگانه ندارد.

دانلود، فایل website-icons.zip را ذخیره می‌کند. نمونه کاری واقعی شامل نه فایل است و 304,351 بایت حجم دارد. مقایسه بالا منبع 512 پیکسلی را در کنار فریم 256 پیکسلی واقعی استخراج‌شده از ICO صادرشده نشان می‌دهد، نه یک اسکرین‌شات شبیه‌سازی‌شده از مرورگر.

فایل ZIP را استخراج کنید، فایل‌های آیکون را در ریشه وب‌سایت خود آپلود کنید و INSTALL.txt را بخوانید. این فایل شامل تگ‌های لینک HTML برای ICO، آیکون PNG، آیکون Apple Touch و مانیفست وب است. اگر فایل‌ها را در یک زیرپوشه قرار می‌دهید، هم مسیرهای HTML و هم مسیرهای آیکون داخل site.webmanifest را به‌روزرسانی کنید.

سایت خود را در یک تب جدید مرورگر و در دستگاه‌هایی که برایتان مهم هستند بررسی کنید. مرورگرها می‌توانند فاوآیکون‌ها را کش کنند، بنابراین یک آیکون قدیمی بلافاصله ثابت نمی‌کند که نصب ناموفق بوده است. قبل از رفرش کردن ویرایشگر، تصویر منبع و بسته دانلود شده را نگه دارید، زیرا رفرش کردن به صفحه اصلی ابزار بازمی‌گردد.