از قبل یک لوگو دارید. چیزی که نیاز دارید تبدیل آن لوگو به آن تلنبار فایلهای آیکون ریزی است که یک مرورگر انتظارش را دارد — یک favicon.ico، مشتی PNG در اندازههای مشخص، یک manifest وب و HTML برای سیمکشی همهاش. آن تبدیل مکانیکی است و میتوانید در حدود یک دقیقه بدون نصب هیچچیز انجامش بدهید.
نکته این است که هر لوگو با ظرافت کوچک نمیشود. پس این هم مسیر سریع را پوشش میدهد و هم چطور یک لوگویی که در ۱۶ پیکسل به لجن تبدیل میشود را درست کنیم.
نسخه کوتاه
- لوگویتان را بهصورت یک تصویر مربع بگیرید — بهطور ایدهآل 512×512 یا بزرگتر، روی یک پسزمینه شفاف یا یکدست.
- آن را در سازنده فاوآیکون بیندازید.
- مجموعه تولیدشده را دانلود کنید و فایلها را در ریشه سایتتان بیندازید.
- قطعه HTML ارائهشده را در
<head>خود بچسبانید.
این کل کار است. سازنده favicon.ico، PNGها در ۱۶، ۳۲، ۴۸، ۱۸۰، ۱۹۲ و ۵۱۲، یک webmanifest و همان تگهای <link> را خروجی میدهد — پس شش تصویر را دستی برش نمیزنید یا نحو manifest را حدس نمیزنید.
اول لوگویتان را آماده کنید — اینجا جایی است که کیفیت برده یا باخته میشود
یک فاوآیکون در زبانه مرورگر در 16×16 زندگی میکند. هر جزئیاتی که نتواند آن اندازه را تحمل کند هدر میرود. دو دقیقه اینجا صرف کنید و نتیجه همهجا تیز به نظر میرسد.
مربعش کنید. فاوآیکونها مربعاند. یک لوگوی عریض افقی نواردار یا فشرده میشود. به شناختهشدهترین عنصر — معمولاً نشان یا یک حرف اول واحد — برش بزنید و آن را در یک قاب مربع وسطچین کنید.
کلمهنشان را حذف کنید. نام کامل شرکتتان در اندازه زبانه خوانا نخواهد بود. «Acme Corporation» به یک لکه خاکستری تبدیل میشود. نماد، یا یک حرف واحد را نگه دارید و بگذارید عنوان زبانه نام را حمل کند.
کنتراست را در برابر هر دو تم بررسی کنید. زبانههای مرورگر روشن و تیره میآیند. یک آیکون سرمهای تیره روی یک زبانه تیره ناپدید میشود؛ یک آیکون کمرنگ روی یک زبانه روشن ناپدید میشود. اگر نشانتان یک رنگ یکدست است، مطمئن شوید آن رنگ روی هر دو خوانده میشود. یک خط دور ظریف یا یک تراشه پسزمینه یکدست کوچک میتواند کمک کند.
فضای تنفس بگذارید. کمی فاصله درون مربع اضافه کنید تا آیکون به لبهها نچسبد. در هر جایگاهی متعادلتر به نظر میرسد.
بزرگ شروع کنید. یک منبع 512×512 (یا بزرگتر) به سازنده جزئیات تمیزی برای کوچک کردن میدهد. اول بزرگ کردن یک لوگوی ریز فقط محو را در آن میپزد.
پسزمینه شفاف یا یکدست؟
هر دو جواب میدهند — به ظاهری که میخواهید بستگی دارد.
- شفاف میگذارد پسزمینه زبانه یا صفحه اصلی از پشت نشان داده شود. تمیز و امروزی، و با محیط روشن/تیره سازگار میشود. بهترین وقتی نشانتان یک شکل متمایز است.
- تراشه پسزمینه یکدست (یک مربع گردشده رنگی پشت نشان) تضمین میکند آیکون خوانده میشود هرچه پشتش باشد. این کاری است که بیشتر آیکونهای اپلیکیشن میکنند و اگر لوگویتان نازک یا کمکنتراست است انتخاب امنتری است.
در صورت تردید، یک تراشه یکدست در رنگ برندتان گزینه محکم است — هرگز در یک پسزمینه هماهنگ ناپدید نمیشود.
بعد از دانلود: فایلها کجا میروند
سازنده یک مجموعه فایل و یک قطعه به شما میدهد. دو قاعده جایگذاری آن را پوشش میدهند:
favicon.icoبه ریشه سایتتان میرود (/favicon.ico). مرورگرها و ویندوز آن را حتی بدون یک تگ<link>با نام آنجا جستوجو میکنند.- هر چیز دیگر میتواند هر جا که دوست دارید زندگی کند تا وقتی مسیرها در قطعه HTML جور باشند. بیشتر مردم همه را در ریشه میاندازند و قطعه را همانطور که هست میچسبانند.
بعد فقط قطعه <head> است — لینکهای آیکون، apple-touch-icon و ارجاع manifest. بچسبانید، مستقر کنید، تازهسازی سخت کنید و باید لوگویتان را در زبانه ببینید.
چرا در مرورگر انجامش بدهیم؟
چون لوگوی شما هرگز دستگاهتان را ترک نمیکند. کل فرایند — خواندن تصویر، تغییر اندازه به هر بُعد، بستهبندی .ico، نوشتن manifest — بهصورت محلی در مرورگر شما با استفاده از Canvas اتفاق میافتد. چیزی به یک سرور آپلود نمیشود، ثبتنام یا واترمارکی نیست و بعد از اولین بازدید ابزار آفلاین کار میکند. برای یک دارایی برند که شاید هنوز منتشرش نکردهاید، دور نگه داشتنش از سرورهای شخص ثالث پیشفرض عاقلانه است.
وقتی لوگویتان مربع، پرکنتراست و کوچکخوانا شد، تولید مجموعه کامل بخش آسان است.