ساخت فاوآیکون

ساخت فاوآیکون بدون آپلود کردن چیزی

به‌روزرسانی: ۷ مهر ۱۴۰۵ · نویسنده: سامان

فاوآیکون همان تصویر کوچکی است که مرورگر در زبانه، در نشانک‌ها و کنار میان‌برها نشان می‌دهد. فایل کلاسیک آن favicon.ico است که در واقع یک تصویر نیست: ظرف ICO چند قاب مربعی را کنار هم نگه می‌دارد و مرورگر اندازه‌ای را که لازم دارد برمی‌دارد. این صفحه مبدل تصویر را با خروجی ICO و همان چهار قاب همیشگی باز می‌کند، پس کافی است لوگو را رها کنید تا همان فایل را تحویل بگیرید.

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

داخل فایل چه چیزی هست

منوی اندازه‌های آیکون مجموعه کلاسیک سه‌تایی «۱۶، ۳۲ و ۴۸ پیکسل» را هم دارد، و اگر دقیقاً بدانید چه می‌خواهید «فقط ۲۵۶ پیکسل» یا «فقط ۳۲ پیکسل» هم هست. چون قاب‌ها مربع‌های ثابت‌اند، کیفیت و تغییر اندازه اینجا معنایی ندارند و صفحه آن‌ها را پنهان می‌کند.

از تصویر درست شروع کنید

• مربع بهتر از کشیده است. تصویر غیرمربع با حاشیه شفاف داخل مربع جا داده می‌شود، پس لوگوی پهن کوچک و وسط مربع می‌نشیند. اول آن را به مربع برش بزنید، یا به‌جای لوگوی کامل فقط نشان گرافیکی را بردارید.
• ساده بهتر از پرجزئیات است. در ۱۶ پیکسل یک خط متن فقط یک لکه خاکستری است. بیشتر فاوآیکون‌های به‌یادماندنی یک حرف، یک شکل یا یک سایه‌نما هستند.
• کنتراست بدهید. آیکون روی پس‌زمینه خودِ مرورگر می‌نشیند که در یک پوسته روشن و در دیگری تیره است. شکلی که فقط روی سفید کار می‌کند، در حالت تیره ناپدید می‌شود.
• بزرگ شروع کنید. دست‌کم یک تصویر ۲۵۶ پیکسلی بدهید تا بزرگ‌ترین قاب مجبور به بزرگ‌نمایی نشود؛ قاب‌های کوچک‌تر از کوچک کردن همین تصویر ساخته می‌شوند و جزئیات آنجا با ملایمت از دست می‌رود.

گذاشتن آن روی سایت

گذاشتن favicon.ico در ریشه سایت برای همه مرورگرها کافی است، چون همه‌شان به‌طور پیش‌فرض همان‌جا را نگاه می‌کنند. اگر می‌خواهید صریح باشید یا کنارش یک PNG هم سرو کنید، در head صفحه یک تگ link اضافه کنید: <link rel="icon" href="/favicon.ico" sizes="any">. خیلی از سایت‌ها کنار فایل .ico یک PNG ۱۸۰ پیکسلی برای apple-touch-icon می‌گذارند که آن را هم می‌توانید همین‌جا بسازید؛ کافی است خروجی را به PNG برگردانید و اندازه را تغییر دهید.

اگر بعد از جایگزینی فایل باز هم آیکون قبلی دیده می‌شود، مشکل از حافظه نهان است نه از فایل: مرورگرها فاوآیکون‌ها را مدت زیادی نگه می‌دارند. یک بازخوانی کامل صفحه، یا افزودن ?v=2 به تگ link، مسئله را حل می‌کند.

قالب‌های دیگر از همین ابزار

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