فاوآیکون (Favicon) چیست؟
کلمه Favicon مخفف "Favorite Icon" است. این فایل گرافیکی کوچک که معمولا ابعاد ۱۶ در ۱۶ پیکسل دارد، در کنار عنوان سایت در تبهای مرورگر، لیست علاقهمندیها (Bookmarks) و تاریخچه مرورگر نمایش داده میشود. وجود فاوآیکون نه تنها به کاربر کمک میکند تا تب سایت شما را در میان انبوه تبهای باز پیدا کند، بلکه یکی از نشانه های حرفهای بودن و اعتبار وبسایت در نظر گرفته میشود.
سایزهای استاندارد و ضروری
16x16 px
سایز کلاسیک و ضروری. استفاده در تبهای مرورگر دسکتاپ.
32x32 px
استفاده در نوار وظیفه (Taskbar) ویندوز و نمایشگرهای رتینا (Retina).
180x180 px
Apple Touch Icon. آیکون میانبر وبسایت روی صفحه اصلی آیفون و آیپد.
192x192 px
Android Chrome. آیکون استاندارد برای دستگاههای اندرویدی.
اشتباهات رایج در طراحی آیکون
- جزئیات زیاد: فاوآیکون ۱۶ پیکسلی بسیار کوچک است. لوگوهای پیچیده و متون در این سایز ناخوانا میشوند. از نسخه ساده شده لوگوی خود استفاده کنید.
- فرمت نامناسب: استفاده از JPG باعث میشود پسزمینه سفید دور آیکون باقی بماند که در حالت Dark Mode مرورگر بسیار زشت دیده میشود. همیشه از PNG با پسزمینه شفاف (Transparent) استفاده کنید.
- کنتراست پایین: آیکون شما هم در تم روشن و هم در تم تاریک مرورگر باید دیده شود.
سوالات متداول
چگونه فاوآیکون را در HTML قرار دهیم؟▼
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
آیا هنوز به فایل favicon.ico نیاز داریم؟▼
اگرچه اکثر مرورگرهای مدرن از PNG پشتیبانی میکنند، اما برای اطمینان از سازگاری با نسخههای بسیار قدیمی اینترنت اکسپلورر، داشتن فایل favicon.ico در ریشه سایت هنوز هم استاندارد امنی محسوب میشود.