فاوآیکون چیست و چرا مهم است؟
فاوآیکون (Favicon) همان آیکون کوچکی است که کنار عنوان سایت در تب مرورگر، بوکمارک‌ها، صفحه‌ی اصلی گوشی و نتایج جستجوی گوگل در موبایل دیده می‌شود. سایتی که فاوآیکون ندارد یا آیکون پیش‌فرض قالب را نشان می‌دهد، در نتایج جستجو کمتر به چشم می‌آید و نیمه‌کاره به نظر می‌رسد.
چه فایل‌هایی لازم است؟
| فایل | اندازه | کاربرد |
|---|---|---|
favicon.ico | ۱۶، ۳۲، ۴۸ | تب مرورگر، نتایج گوگل، مرورگرهای قدیمی |
apple-touch-icon.png | ۱۸۰×۱۸۰ | افزودن به صفحه‌ی اصلی آیفون و آیپد |
icon-192.png | ۱۹۲×۱۹۲ | صفحه‌ی اصلی اندروید |
icon-512.png | ۵۱۲×۵۱۲ | نصب وب‌اپ (PWA) و صفحه‌ی شروع |
site.webmanifest | — | معرفی آیکون‌ها و رنگ به اندروید |
کد فاوآیکون در HTML
فایل‌ها را در ریشه‌ی سایت بگذار و این تگ‌ها را داخل <head> بنویس:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">فاوآیکون SVG با حالت تاریک
مرورگرهای جدید فاوآیکون SVG را هم قبول می‌کنند. مزیتش این است که در هر اندازه‌ای تیز است و می‌تواند با تم تاریک مرورگر رنگش را عوض کند تا آیکون مشکی روی تب تیره گم نشود:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #111 }
@media (prefers-color-scheme: dark) { rect { fill: #fff } }
</style>
<rect width="32" height="32" rx="7"/>
</svg>ICO را برای سازگاری نگه دار و SVG را کنارش اضافه کن. برای تبدیل SVG به کد CSS یا data URI هم ابزار SVG به CSS را ببین.
نکته‌های طراحی فاوآیکون
- در ۱۶ پیکسل جزئیات دیده نمی‌شود؛ به‌جای لوگوی کامل، نماد یا حرف اول برند را بگذار.
- کنتراست رنگ‌ها را بالا نگه دار تا روی تب روشن و تیره هر دو دیده شود. بررسی کنتراست رنگ کمک می‌کند.
- برای آیکون اپل پس‌زمینه‌ی شفاف نگذار؛ iOS آن را سیاه پر می‌کند.
اگر سایتت را با تبدیل طرح به HTML سفارش بدهی، فاوآیکون، تصویر اشتراک‌گذاری و متا تگ‌ها هم آماده تحویل داده می‌شود.