یک فاوآیکون دیگر یک تصویر نیست. مرورگرها، موبایلها و سیستمعاملها هرکدام یک اندازه متفاوت برای یک جایگاه متفاوت میگیرند — زبانه مرورگر، یک نشانک، صفحه اصلی iOS، جابهجاگر اپلیکیشن اندروید. یک PNG با اندازه 32×32 ارسال کنید و در زبانه کار میکند اما وقتی کسی سایت شما را روی موبایلش ذخیره میکند تار به نظر میرسد. مجموعه کامل را ارسال کنید و هر سطح یک آیکون واضح میگیرد.
اینجا دقیقاً میبینید به کدام اندازهها نیاز دارید، هرکدام چه میکند و چرا فهرست این شکلی است.
اندازههایی که مهماند
بیشتر سایتها با شش اندازه PNG بهعلاوه یک .ico قدیمی پوشش داده میشوند. این مرجع است:
| اندازه | فرمت | جایی که استفاده میشود |
|---|---|---|
| 16×16 | PNG (در .ico) | زبانه مرورگر، نوار نشانی، نشانکها |
| 32×32 | PNG (در .ico) | زبانههای رتینا، میانبرهای نوار وظیفه ویندوز |
| 48×48 | PNG | آیکونهای سایت ویندوز، برخی سطوح اندروید |
| 180×180 | PNG | صفحه اصلی iOS (apple-touch-icon) |
| 192×192 | PNG | صفحه اصلی اندروید، نصب PWA |
| 512×512 | PNG | صفحه اسپلش PWA، فروشگاههای اپلیکیشن، DPI بالا |
فایل favicon.ico یک ظرف است که اندازههای کوچک را دسته میکند (معمولاً ۱۶ و ۳۲، گاهی ۴۸). مرورگرهای قدیمیتر و ویندوز آن را با نام در ریشه سایت شما جستوجو میکنند، پس هنوز ارزش ارسال دارد هرچند مرورگرهای امروزی با کمال میل از PNGها استفاده میکنند.
چرا اینقدر زیاد؟ یک تور سریع
دلیل بلند بودن فهرست این است که آیکون در اندازههای فیزیکی بسیار متفاوتی ظاهر میشود.
۱۶ و ۳۲ آیکونهای روزمره زبانهاند. ۱۶ اندازه کلاسیک است؛ ۳۲ صفحههای DPIبالا («رتینا») را پوشش میدهد که ۱۶ روی آنها نرم به نظر میرسد. مرورگرها هرکدام را که با تراکم پیکسل جور شود انتخاب میکنند.
۴۸ یک چیز ویندوزی است — برای میانبرهای سایت استفاده میشود و در چند جایی که ۳۲ خوب پوششش نمیدهد تیزتر ظاهر میشود.
۱۸۰ همان apple-touch-icon اپل است. وقتی کسی روی یک آیفون یا آیپد «افزودن به صفحه اصلی» را میزند، iOS از این استفاده میکند. اشتباهش کنید و iOS یا یک اسکرینشات کوچکشده میگیرد یا یک کاشی حرف ساده نشان میدهد — هیچکدام مثل برند شما به نظر نمیرسد.
۱۹۲ و ۵۱۲ اندازههای اپلیکیشن وب پیشرواند، اعلامشده در یک فایل manifest.webmanifest. ۱۹۲ آیکون صفحه اصلی اندروید است؛ ۵۱۲ صفحه اسپلش را تغذیه میکند و برای هر چیز دیگری که سیستمعامل نیاز دارد کوچک میشود. اگر سایت شما قابلنصب است، این دو غیرقابلمذاکرهاند.
آیا به بزرگتر از ۵۱۲ نیاز دارید؟
نه. 512×512 سقف عملی برای فاوآیکونهای وب است — مشخصات webmanifest و هر پلتفرم بزرگ در همان حدود متوقف میشوند. اگر گرافیک منبع شما ۱۰۲۴ یا بزرگتر است، آن بهعنوان یک تصویر شروع اشکالی ندارد (جزئیات بیشتری برای کوچک کردن از آن)، اما یک فاوآیکون ۱۰۲۴ ارسال نمیکنید. هر چیزی بالای ۵۱۲ فقط بایتهایی اضافه میکند که هیچکس استفاده نمیکند.
آن یک قاعدهای که برای رفتن به بالا مهم است: از یک منبع بزرگ و مربع شروع کنید. یک نسخه اصلی 512×512 یا 1024×1024 تمیز به هر اندازه زیرش کوچک میشود. از یک تصویر ریز شروع کنید و اندازههای کوچک کدر به نظر میرسند چون از اول جزئیات کافی برای نگه داشتن نبود.
طوری طراحی کنید که از 16×16 جان سالم به در ببرد
سختترین اندازه کوچکترین است. در 16×16 یک لوگوی پرجزئیات به یک لکه ناخوانا تبدیل میشود. چند نکته که در سراسر سایتها پابرجاست:
- ساده کنید. یک کلمهنشان کامل در ۱۶ پیکسل خوانده نمیشود. از یک حرف واحد، یک مونوگرام یا شناختهشدهترین بخش نشانتان استفاده کنید.
- کنتراست را بالا نگه دارید تا شکل روی هر دو پسزمینه روشن و تیره زبانه خوانا بماند.
- کمی فاصله بگذارید — آیکونی که هر چهار لبه را لمس میکند در زبانه تنگ حس میشود.
- کوچک آزمایشش کنید. مرورگرتان را کوچک کنید، یا فقط به خود زبانه نگاه کنید. اگر در یک نگاه نمیتوانید بگویید چیست، بیشتر ساده کنید.
ساختن کل مجموعه
اینها را با دست نمیسازید. یک تصویر مربع در سازنده فاوآیکون بیندازید و مجموعه کامل را یکجا تولید میکند — favicon.ico، PNGهای ۱۶/۳۲/۴۸/۱۸۰/۱۹۲/۵۱۲، یک webmanifest آماده استفاده و همان قطعه HTML <head> برای چسباندن. همهچیز در مرورگر شما اجرا میشود: تصویر هرگز آپلود نمیشود و بعد از اولین بازدید ابزار آفلاین کار میکند.
HTML که در نهایت خواهید داشت
برای مرجع، یک راهاندازی کامل فاوآیکون در <head> شما تقریباً اینطور به نظر میرسد:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
سازنده این را برایتان مینویسد، پس میتوانید مستقیم بچسبانیدش. شش اندازه بهعلاوه .ico و manifest را پوشش بدهید، و هر مرورگر، موبایل و سیستمعامل آیکون واضحی که میخواهد میگیرد.