تجربه کاربری فاوآیکون: ویژگی‌های یک فاوآیکون عالی

یک فاوآیکون عالی نشانی ساده و با کنتراست بالاست، معمولاً لوگومارک شما یا یک یا دو حرف، که در اندازه ۱۶×۱۶ پیکسل هم در تب‌های روشن و هم در تب‌های تیره مرورگر خوانا می‌ماند، با برند شما هماهنگ است و به‌ندرت تغییر می‌کند. هر چیز دیگری در این راهنما (هم‌ترازی پیکسلی، رنگ، حاشیه، شفافیت، حجم فایل) در خدمت همین اهداف است: اینکه سایت شما در میان ده‌ها تب باز فوراً پیدا شود.

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

۱. خوانایی در ۱۶×۱۶

اندازه کلاسیک فاوآیکون ۱۶×۱۶ پیکسل CSS است. در یک نمایشگر استاندارد این دقیقاً ۲۵۶ پیکسل است؛ در نمایشگر رتینای 2x مرورگر معمولاً برای همان فضا تصویر ۳۲×۳۲ را انتخاب می‌کند. هر طرحی که بسازید باید از این کوچک‌سازی جان سالم به در ببرد.

ساده نگهش دارید

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

با شبکه پیکسلی هم‌تراز کنید

در ۱۶×۱۶، خطی که نیم پیکسل از شبکه فاصله دارد روی دو ردیف پیکسل هموارسازی (anti-aliasing) می‌شود و خاکستری و نرم به نظر می‌رسد. لبه‌ها را روی مرز پیکسل‌های کامل قرار دهید و در جاهایی که شکل متقارن است از پهنای زوج استفاده کنید. اگر از ابزار برداری خروجی می‌گیرید، چسبیدن به پیکسل (pixel snapping) را فعال کنید، یا نتیجه کوچک‌شده را بررسی و با دست اصلاح کنید.

از خطوط نازک پرهیز کنید

خطوطی که در ۱۶×۱۶ نازک‌تر از ۲ پیکسل باشند (حدود ۱۲ درصد عرض آیکون) تمایل دارند ناپدید شوند یا بین اندازه‌ها سوسو بزنند. خطوط را ضخیم‌تر کنید، جزئیات داخلی را حذف کنید و شکاف‌های کوچک را ادغام کنید. یک گلیف درشت و کمی سنگین معمولاً بهتر از یک نسخه مینیاتوری وفادار از یک لوگوی پرجزئیات خوانده می‌شود.

با دست تنظیم کنید

فایل‌های ICO و PNG هینتینگ سبک فونت ندارند، پس ویرایش دستی پیکسل‌ها معادل آن است: پیکسل‌ها را یکی‌یکی تنظیم می‌کنید تا منحنی‌ها، قطرها و حفره‌های حروف (مثل حفره در حروفی مانند «a» یا «e») واضح بمانند. کوچک‌سازی خودکار پیش‌نویس خوبی است، اما چند پیکسلی که با دست جا می‌گیرند اغلب تفاوت میان یک لکه و یک حرف قابل‌تشخیص را رقم می‌زنند. ویرایشگر پیکسلی MakeFav برای همین ساخته شده است: بوم ۱۶×۱۶ را باز کنید، پیکسل‌های مشکل‌دار را اصلاح کنید و خروجی بگیرید.

۲. کنتراست در تب‌های روشن و تیره

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

راه‌حل‌های عملی

• یک شکل پس‌زمینه اضافه کنید. یک مربع گوشه‌گرد یا دایره توپر به رنگ برند تضمین می‌کند که نشان، فارغ از تب، کنتراست خودش را دارد.
• از یک خط دور یا هاله نازک استفاده کنید. یک لبه روشن‌تر ۱ پیکسلی دور گلیف تیره (یا برعکس) سیلوئت را در هر دو تم قابل‌مشاهده نگه می‌دارد، اما در ۱۶×۱۶ باید واضح بماند، پس آن را تست کنید.
• رنگ‌های برند میان‌تُن انتخاب کنید. رنگ‌هایی مانند آبی پررنگ، نارنجی، سبز یا سرخابی معمولاً هم روی سطح سفید و هم روی سطح تقریباً سیاه کار می‌کنند. زرد خیلی روشن یا سرمه‌ای خیلی تیره پرخطرند.
• از فاوآیکون SVG تطبیقی استفاده کنید. یک SVG می‌تواند شامل مدیا کوئری prefers-color-scheme باشد تا آیکون با تم سیستم تغییر کند.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

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

۳. شناسایی‌پذیری و یکپارچگی برند

از لوگومارک (نماد یا مونوگرام) استفاده کنید، نه از ترکیب کامل لوگو همراه با لوگوتایپ. متن درون آیکون ۱۶×۱۶ ناخوانا است، و یک لوگوی افقی عریض که در یک مربع کوچک شود تنها یک نوار ریز در میانه برایتان باقی می‌گذارد.

• اگر برند شما نماد دارد، آن را برای اندازه‌های کوچک ساده کنید، نه اینکه فقط کوچکش کنید. «نسخه فاوآیکون» با جزئیات کمتر رویه استاندارد است.
• اگر برند شما فقط لوگوتایپ است، حرف اول یا یک جفت حرف متمایز را بردارید و با فونت برند و در وزن سنگین بنویسید.
• رنگ‌ها را با لوگو، آیکون اپلیکیشن و آواتارهای شبکه‌های اجتماعی هماهنگ نگه دارید تا کاربر همه‌جا همان برند را بشناسد.

تمایز به اندازه وفاداری اهمیت دارد. به ردیفی از تب‌ها نگاه کنید: اگر سه سایت دیگر هم از دایره آبی استفاده می‌کنند، سایت شما متمایز نخواهد بود. یک شکل یا رنگ متفاوت مفیدتر از کوچک‌سازی کاملاً وفادار است.

۴. رنگ: پالت محدود و پرمایه

با این تعداد کم پیکسل، هر رنگ اضافی شلوغی اضافه می‌کند. یک یا دو رنگ و حداکثر سفید یا سیاه را هدف بگیرید. رنگ‌های پرمایه در اندازه‌های کوچک بهتر از رنگ‌های پاستلی منتقل می‌شوند، چون رنگ‌های پاستلی تمایل دارند در پس‌زمینه تب حل شوند.

کمی از تفکر دسترس‌پذیری وام بگیرید. WCAG برای اشیای گرافیکی معنادار دست‌کم کنتراست ۳:۱ می‌خواهد (معیار موفقیت ۱.۴.۱۱، کنتراست غیرمتنی). فاوآیکون رسماً مشمول آن نمی‌شود چون بخشی از رابط مرورگر است نه محتوای صفحه، اما کنتراست ۳:۱ میان گلیف و پس‌زمینه‌اش و میان آیکون و تب هدف معقولی است. همچنین از انتقال هر چیزی فقط از طریق رنگ‌مایه پرهیز کنید: نسخه‌های قرمز و سبز یک آیکون برای بسیاری از کاربران کوررنگ از هم قابل تشخیص نیستند، پس شکل را تغییر دهید یا نمادی اضافه کنید.

۵. شکل، حاشیه و ناحیه‌های امن

مربع را پر کنید

تب‌های مرورگر فاوآیکون را در اندازه کوچک ثابتی نشان می‌دهند، پس حاشیه اضافه فقط نشان شما را کوچک‌تر می‌کند. برای آیکون‌های استاندارد تب، از بیشتر بوم استفاده کنید و فقط یکی دو پیکسل فضای تنفس بگذارید تا نشان تا حد امکان بزرگ باشد.

گوشه‌گرد یا مربع؟

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

آیکون‌های Apple touch

iOS خودش گوشه‌های گرد را به apple-touch-icon اضافه می‌کند (اندازه معمول ۱۸۰×۱۸۰ است). یک مربع تمام‌صفحه بدون گوشه‌های از پیش گرد ارائه دهید، وگرنه ممکن است در گوشه‌ها لبه‌های تیره یا سفید قابل‌مشاهده ببینید.

آیکون‌های Maskable برای اندروید و PWA

آیکون‌های maskable توسط سیستم‌عامل به دایره، squircle یا شکل‌های دیگر بریده می‌شوند. همه محتوای مهم را درون ناحیه امن نگه دارید: دایره‌ای در مرکز آیکون با شعاع ۴۰ درصد عرض آیکون. رنگ پس‌زمینه را تا لبه‌ها امتداد دهید تا هر ماسکی درست به نظر برسد. فاوآیکون فشرده و لبه‌به‌لبه تب را به‌عنوان آیکون maskable دوباره استفاده نکنید، چون ماسک آن را می‌برد.

۶. شفافیت

شفافیت برای فاوآیکون تب مشکلی ندارد و همان چیزی است که اجازه می‌دهد آیکونِ فقط‌گلیف روی هر رنگ تب تمیز بنشیند. اما برای آیکون‌های Apple touch مشکل‌ساز است: iOS نواحی شفاف را با یک رنگ توپر (معمولاً سیاه) پر می‌کند که می‌تواند طرح را خراب کند. همیشه به apple-touch-icon پس‌زمینه مات به رنگ برند بدهید. همین برای آیکون‌های maskable و بیشتر موارد استفاده در صفحه اصلی اندروید هم صدق می‌کند، جایی که پس‌زمینه مات نتایج قابل‌پیش‌بینی می‌دهد.

۷. ثبات: زیاد تغییرش ندهید

فاوآیکون از طریق تکرار شناخته می‌شود. تغییر مکرر آن کاربران را مجبور می‌کند دوباره یاد بگیرند کدام تب مال شماست و دردسرهای فنی هم ایجاد می‌کند. مرورگرها فاوآیکون‌ها را به‌شدت کش می‌کنند و گوگل آن‌ها را جدا از صفحات شما دریافت و ذخیره می‌کند، پس ممکن است نمایش یک آیکون جدید در نتایج جستجو روزها یا هفته‌ها طول بکشد. گوگل همچنین یک URL ثابت برای فاوآیکون، آیکونی با اندازه مضرب ۴۸ پیکسل (۴۸×۴۸، ۹۶×۹۶ و غیره) و فایلی قابل خزیدن (که با robots.txt مسدود نشده باشد) می‌خواهد. تغییر فاوآیکون را مثل یک تصمیم در سطح بازبرندسازی در نظر بگیرید، نه یک تزئین فصلی.

۸. حالت‌های اعلان و فاوآیکون‌های پویا

برخی اپلیکیشن‌های وب فاوآیکون را برای نشان دادن پیام‌های خوانده‌نشده، وضعیت ضبط یا خطا تغییر می‌دهند. اگر خوب انجام شود مفید است؛ اگر زیاده‌روی شود آزاردهنده.

• از یک نشانک کوچک استفاده کنید (یک نقطه یا عدد کوتاه) در گوشه، نه بازطراحی کامل. آیکون پایه باید قابل‌تشخیص بماند.
• کم‌مصرف باشید. نشانک‌ها را برای رویدادهایی نگه دارید که نیاز به اقدام کاربر دارند. آیکون را مدام انیمیت نکنید.
• اعداد را محدود کنید. در ۱۶×۱۶ فقط یک یا دو رقم خواناست؛ به‌جای «۱۳۷» عبارت «+9» یا یک نقطه ساده نشان دهید.
• سریع بازنشانی کنید وقتی کاربر به آن مورد رسیدگی کرد و آیکون پیش‌فرض را برگردانید.
• فقط به رنگ تکیه نکنید. یک نقطه قرمز باید با عنوان صفحه هم پشتیبانی شود، مثلاً «(3) صندوق ورودی»، تا اطلاعات برای همه در دسترس باشد.

فاوآیکون‌های پویا معمولاً روی یک canvas کشیده می‌شوند و با به‌روزرسانی href عنصر link آیکون جایگزین می‌شوند. به‌روزرسانی‌ها را محدود (throttle) کنید، چون تغییر مداوم فاوآیکون می‌تواند CPU مصرف کند و حواس کاربران را پرت کند.

۹. عملکرد

فاوآیکون‌ها کوچک‌اند، اما همچنان درخواست‌هایی هستند که می‌توان بد انجامشان داد.

• فایل‌ها را کوچک نگه دارید. یک فاوآیکون PNG معمولاً چند صد بایت تا چند کیلوبایت است. یک SVG ساده می‌تواند زیر ۱ کیلوبایت باشد.
• از فایل‌های ICO حجیم پرهیز کنید. یک ICO چنداندازه‌ای با تصاویر ۱۶، ۳۲ و ۴۸ پیکسل کافی است. گنجاندن تصویر ۲۵۶×۲۵۶ حجم فایل را چند برابر می‌کند بی‌آنکه در تب‌های مرورگر فایده‌ای دیده شود.
• هدرهای کش را تنظیم کنید. آیکون‌ها را با مدت Cache-Control طولانی ارائه دهید، مثلاً public, max-age=31536000, immutable، و هنگام تغییر از نام فایل نسخه‌دار یا هش‌دار استفاده کنید.
• آیکون‌ها را صریحاً اعلام کنید. مرورگرها به‌طور پیش‌فرض /favicon.ico را درخواست می‌کنند، پس حتی اگر آیکون‌های دیگری اعلام می‌کنید یکی هم ارائه دهید تا نویز ۴۰۴ در لاگ‌هایتان نباشد.
• فشرده کنید. PNGها را از بهینه‌ساز بدون افت عبور دهید و SVGها را minify کنید.

<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='/manifest.webmanifest'>

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

۱۰. دسترس‌پذیری

فاوآیکون متن جایگزین ندارد و صفحه‌خوان‌ها آن را اعلام نمی‌کنند، پس ابزارهای سنتی دسترس‌پذیری مثل ویژگی‌های alt کاربرد ندارند. آنچه اهمیت دارد:

• عنوان صفحه معنا را منتقل می‌کند. عناصر <title> منحصربه‌فرد و توصیفی بنویسید. هرگز برای انتقال وضعیت به آیکون تکیه نکنید؛ هر نشانکی را در عنوان هم بازتاب دهید.
• دیده‌شدن برای کاربران کم‌بینا. کنتراست بالا، شکل درشت و نشان بزرگ به کاربرانی که تب‌ها را به‌صورت بصری مرور می‌کنند کمک می‌کند.
• استقلال از رنگ. مطمئن شوید شکل‌ها یا حروف حالت‌ها را از هم متمایز می‌کنند، نه فقط رنگ‌مایه.
• کاهش حواس‌پرتی. از فاوآیکون‌های چشمک‌زن یا متحرک پرهیز کنید، که می‌توانند برای کاربران حساس به حرکت مشکل‌ساز باشند.

چک‌لیست تجربه کاربری فاوآیکون

چک‌لیست تست

به پیش‌نمایش بزرگ در ابزار طراحی اعتماد نکنید. آیکون واقعی را در شرایط واقعی تست کنید:

1. چند مرورگر. کروم، فایرفاکس، سافاری و اج را بررسی کنید، چون هر کدام آیکون‌ها و اندازه‌ها را کمی متفاوت انتخاب می‌کنند.
2. حالت روشن و تیره. تم سیستم‌عامل و مرورگر را عوض کنید و هر بار نوار تب را ببینید.
3. نمایشگرهای رتینا و استاندارد. روی مانیتور 1x و صفحه 2x یا 3x بررسی کنید و در مرورگر زوم کنید.
4. نوار نشانک‌ها. صفحه را نشانک کنید و ببینید آیکون کنار سایت‌های دیگر هنوز خوانا است یا نه.
5. تب‌های زیاد. ۲۰ تب باز کنید و ببینید می‌توانید تب خودتان را با یک نگاه پیدا کنید یا نه.
6. پیش‌نمایش SERP گوگل. بعد از اینکه آیکون دوباره خزیده شد، یک نتیجه جستجوی موبایل را بررسی کنید. به یاد داشته باشید ممکن است به‌روزرسانی زمان ببرد.
7. صفحه اصلی گوشی. سایت را به صفحه اصلی iOS و اندروید اضافه کنید و مطمئن شوید آیکون بریده نشده، گوشه سیاه ندارد و درون ماسکش زیادی کوچک نیست.
8. بررسی فنی. دامنه خود را از بررسی‌کننده فاوآیکون MakeFav عبور دهید تا مطمئن شوید فایل‌ها وجود دارند، وضعیت 200 برمی‌گردانند، اندازه‌های درست دارند و در HTML شما به‌درستی اعلام شده‌اند.

یک روند کاری عملی

1. از لوگومارک خود شروع کنید و آن را به یک شکل یا حرف ساده کنید.
2. یک بوم مربع با پس‌زمینه توپر یا شکل‌دار بسازید که در هر دو تم کار کند.
3. اندازه‌های ۳۲×۳۲ و ۱۶×۱۶ را خروجی بگیرید و نسخه کوچک را با دست در ویرایشگر پیکسلی بهبود دهید.
4. مجموعه کامل (ICO، PNG، apple-touch-icon، آیکون‌های manifest) را با مولد بسازید.
5. تگ‌های link را اضافه کنید، هدرهای کش را تنظیم کنید، منتشر کنید و با بررسی‌کننده تأیید کنید.

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

پرسش‌های متداول

اندازه فاوآیکون باید چقدر باشد؟

برای تب‌های مرورگر ۱۶×۱۶ و ۳۲×۳۲ طراحی کنید (مرورگر در نمایشگرهای با تراکم بالا از ۳۲×۳۲ استفاده می‌کند)، یک apple-touch-icon با اندازه ۱۸۰×۱۸۰ برای iOS، و PNGهای ۱۹۲×۱۹۲ و ۵۱۲×۵۱۲ برای اندروید و PWA ارائه دهید. برای نتایج جستجوی گوگل از آیکون مربعی با اندازه مضرب ۴۸ پیکسل استفاده کنید، مانند ۴۸×۴۸ یا ۹۶×۹۶. یک منبع SVG به همه این اندازه‌ها مقیاس می‌شود.

آیا باید از لوگوی کامل خود به‌عنوان فاوآیکون استفاده کنم؟

معمولاً نه. لوگوهای کامل همراه با لوگوتایپ برای یک آیکون مربع ۱۶×۱۶ بیش از حد پرجزئیات و عریض‌اند. از لوگومارک یا مونوگرام یک یا دو حرفی استفاده کنید و آن را ساده کنید تا در اندازه کوچک هم قابل‌تشخیص بماند.

چگونه فاوآیکون را در حالت تیره کارآمد کنم؟

امن‌ترین رویکرد این است که به آیکون شکل پس‌زمینه توپر خودش یا یک خط دور متضاد بدهید تا به رنگ تب وابسته نباشد. روش دیگر استفاده از فاوآیکون SVG با مدیا کوئری prefers-color-scheme برای تعویض رنگ‌هاست، همراه با نگه داشتن فال‌بک‌های PNG یا ICO برای مرورگرهایی که از آیکون‌های SVG پشتیبانی نمی‌کنند. همیشه در هر دو تم روشن و تیره تست کنید.

چرا فاوآیکون جدید من نمایش داده نمی‌شود؟

مرورگرها فاوآیکون‌ها را مدت طولانی کش می‌کنند و گوگل نسخه خودش را ذخیره می‌کند و طبق برنامه خودش، که اغلب روزها یا هفته‌ها طول می‌کشد، آن را تازه می‌کند. صفحه را با بازنشانی کامل (hard refresh) تازه کنید، کش مرورگر را پاک کنید، از نام فایل نسخه‌دار جدید استفاده کنید و مطمئن شوید تگ‌های link و /favicon.ico در ریشه به فایل درست اشاره می‌کنند. می‌توانید تنظیمات را با بررسی‌کننده MakeFav تأیید کنید.

آیا نمایش نشانک‌های اعلان روی فاوآیکون ایده خوبی است؟

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