فاویکون چیست و چرا برای وب‌سایت شما اهمیت دارد؟

فاویکون (مخفف «favorite icon» یعنی «آیکون مورد علاقه») تصویر کوچک و مربعی است که یک وب‌سایت را در تب‌های مرورگر، بوکمارک‌ها، فهرست تاریخچه، نتایج جستجوی گوگل، صفحه اصلی گوشی و برنامه‌های وب نصب‌شده نمایندگی می‌کند. اهمیت آن در این است که در یک نگاه به سایت شما چهره‌ای قابل‌شناسایی می‌دهد، پیدا کردن سایت را در میان تب‌های باز آسان‌تر می‌کند، نشان می‌دهد که سایت حرفه‌ای و قابل‌اعتماد است و اکنون در نتایج گوگل کنار نام سایت شما نمایش داده می‌شود. بدون فاویکون، بازدیدکنندگان یک آیکون کلی کره زمین یا صفحه خالی می‌بینند و سرور شما لاگ‌هایش را با خطاهای ۴۰۴ پر می‌کند. می‌توانید با سازنده فاویکون MakeFav یک مجموعه کامل فاویکون را رایگان بسازید.

فاویکون چیست؟

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

از نظر فنی، فاویکون فقط یک فایل تصویری است که در HTML شما به آن ارجاع داده می‌شود (یا در یک مسیر پیش‌فرض قرار دارد) و عامل‌های کاربر (user agent) آن را جدا از محتوای صفحه دانلود می‌کنند. امروزه «فاویکون» به‌ندرت یک فایل واحد است. یک سایت مدرن معمولاً چند نسخه از یک آیکون را ارائه می‌دهد تا مرورگرها، موتورهای جستجو، iOS و اندروید هر یک فرمت و اندازه مناسب خود را دریافت کنند.

تاریخچه کوتاه فاویکون

فاویکون به مارس ۱۹۹۹ برمی‌گردد، زمانی که مایکروسافت اینترنت اکسپلورر ۵ را منتشر کرد. این مرورگر به کاربران اجازه می‌داد صفحات را در فهرست «Favorites» ذخیره کنند و همچنین دنبال یک فایل آیکون کوچک به نام favicon.ico در ریشه سایت می‌گشت تا کنار هر مورد ذخیره‌شده نشان دهد. ایده ساده بود: اگر سایتی /favicon.ico داشت، آیکون کنار بوکمارک نمایش داده می‌شد.

مرورگرهای دیگر خیلی زود این قابلیت را پذیرفتند و مرور تب‌دار آن را بسیار کاربردی‌تر کرد. با تبدیل شدن تب‌ها به روش اصلی پیمایش، فاویکون از یک تزئین بوکمارک به ابزار اصلی راهنمایی تبدیل شد. در طول سال‌ها این روش تکامل یافت:

• اوایل دهه ۲۰۰۰: عنصر <link rel="icon"> به سایت‌ها اجازه داد به‌جای فقط ریشه، به آیکونی در هر آدرسی اشاره کنند و مرورگرهای غیر از IE شروع به پذیرش فایل‌های PNG و GIF کردند.
• دهه ۲۰۱۰: اپل apple-touch-icon را برای صفحه اصلی iOS معرفی کرد و اندروید و ویندوز هم قراردادهای خود مانند آیکون‌های مانیفست و تصاویر کاشی را اضافه کردند.
• امروز: فاویکون‌های SVG، مانیفست‌های برنامه وب، آیکون‌های سازگار با حالت تاریک و الزامات فاویکون در نتایج جستجوی گوگل، فاویکون را به بخشی کوچک اما واقعی از پیکربندی فنی سایت تبدیل کرده‌اند.

فاویکون امروز کجا نمایش داده می‌شود

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

• تب‌های مرورگر: پربازدیدترین جایگاه، جایی که وقتی تب‌های زیادی باز است اغلب آیکون تنها چیزی است که می‌بینید.
• بوکمارک‌ها و علاقه‌مندی‌ها: آیکون در نوار و منوهای بوکمارک کنار عنوان صفحه قرار می‌گیرد.
• تاریخچه و صفحات پربازدید: مرورگرها فاویکون را در فهرست تاریخچه و صفحه تب جدید نمایش می‌دهند.
• نتایج جستجوی گوگل: گوگل هم در موبایل و هم در دسکتاپ فاویکون سایت را کنار نام و نشانی سایت نشان می‌دهد.
• صفحه اصلی گوشی: وقتی بازدیدکننده سایت شما را در iOS یا اندروید به صفحه اصلی اضافه می‌کند، آیکون touch یا آیکون مانیفست تبدیل به میان‌بر شبیه برنامه می‌شود.
• PWAهای نصب‌شده: یک برنامه وب پیش‌رونده از آیکون‌های مانیفست خود برای آیکون اجراکننده، صفحه شروع (splash) و تغییردهنده وظایف استفاده می‌کند.
• کاشی‌های ویندوز و سایت‌های سنجاق‌شده: نسخه‌های قدیمی‌تر ویندوز و Edge از تصاویر کاشی تعریف‌شده برای سایت‌های سنجاق‌شده استفاده می‌کردند؛ نسخه‌های مدرن بیشتر همان آیکون‌های استاندارد شما را به کار می‌برند.
• پیش‌نمایش پیوند در برخی برنامه‌ها: برخی ابزارهای چت و بهره‌وری (Slack نمونه‌ای شناخته‌شده است) فاویکون سایت را کنار پیوند بازشده نشان می‌دهند. بیشتر پیش‌نمایش‌ها عمدتاً به تصاویر Open Graph تکیه دارند، اما فاویکون اغلب نشان کوچک برند را تأمین می‌کند.

چرا فاویکون برای وب‌سایت شما مهم است

شناخت برند

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

اعتماد و اعتبار

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

نرخ کلیک در نتایج جستجو

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

سهولت استفاده با تب‌های باز زیاد

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

تصویر حرفه‌ای

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

دسترس‌پذیری در پیدا کردن تب

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

اگر فاویکون نداشته باشید چه می‌شود

مرورگرها به‌طور خودکار /favicon.ico را از ریشه دامنه شما درخواست می‌کنند، حتی اگر HTML شما به آن اشاره‌ای نکرده باشد. اگر فایل وجود نداشته باشد، چند اتفاق می‌افتد:

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

حتی یک آیکون بسیار ساده بهتر از هیچ است، چون خطاهای ۴۰۴ را از بین می‌برد و چیزی قابل‌شناسایی در اختیار کاربران می‌گذارد.

توضیح فرمت‌های فاویکون

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

تصاویر کاشی قدیمی ویندوز (که با browserconfig.xml پیکربندی می‌شدند) برای اینترنت اکسپلورر ۱۱ و Edge قدیمی لازم بودند. اکنون به‌ندرت ضروری‌اند، مگر اینکه مجبور به پشتیبانی از آن محیط‌ها باشید.

راهنمای گوگل برای فاویکون در نتایج جستجو

اگر می‌خواهید آیکون شما در جستجوی گوگل نمایش داده شود، الزامات منتشرشده گوگل را رعایت کنید:

• اندازه: تصویر باید مربع (۱:۱) و مضربی از ۴۸ پیکسل باشد، مانند ۴۸×۴۸، ۹۶×۹۶ یا ۱۴۴×۱۴۴. گوگل سپس آن را برای نمایش به ۱۶×۱۶ کوچک می‌کند. حداقل اندازه پشتیبانی‌شده ۸×۸ است، اما ۴۸×۴۸ یا بزرگ‌تر توصیه می‌شود.
• فرمت‌ها: هر فرمتی که مرورگرها پشتیبانی کنند قابل استفاده است، از جمله ICO، PNG و SVG.
• نشانی ثابت: نشانی فاویکون را مکرراً تغییر ندهید. نشانی ثابت به گوگل کمک می‌کند آیکون شما را به‌روز نگه دارد.
• قابل‌خزش: هم فایل فاویکون و هم صفحه اصلی شما باید برای Googlebot در دسترس باشند. آن‌ها را در robots.txt یا پشت ورود به سیستم مسدود نکنید.
• یک اعلان برای هر سایت: آیکون به صفحه اصلی سایت وابسته است، پس تگ <link> را در head صفحه اصلی قرار دهید.
• نماینده و مناسب: آیکون باید بازتاب‌دهنده برند شما باشد و گوگل ممکن است آیکونی را که توهین‌آمیز یا گمراه‌کننده باشد با آیکون پیش‌فرض خود جایگزین کند.

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

چطور با MakeFav سریع فاویکون بسازیم

نیازی به نرم‌افزار طراحی یا خط فرمان ندارید. سازنده MakeFav یک تصویر منبع را به فایل‌های توضیح‌داده‌شده در بالا تبدیل می‌کند.

1. طرح خود را آماده کنید. از یک لوگو یا نماد مربعی با اندازه ۵۱۲×۵۱۲ پیکسل یا بزرگ‌تر استفاده کنید. شکل‌های ساده بهترین نتیجه را می‌دهند چون آیکون در ۱۶ پیکسل دیده خواهد شد.
2. آن را آپلود کنید در صفحه اصلی MakeFav، یا ویرایشگر را باز کنید تا پیش از خروجی گرفتن تصویر، پس‌زمینه و فاصله داخلی را تنظیم کنید.
3. پیش‌نمایش نتیجه را در اندازه‌های کوچک و روی پس‌زمینه‌های روشن و تیره ببینید تا مطمئن شوید خوانا می‌ماند.
4. بسته را دانلود کنید. شامل ICO، اندازه‌های PNG، Apple touch icon، آیکون‌های مانیفست و قطعه HTML برای چسباندن است.
5. فایل‌ها را آپلود کنید در ریشه وب‌سایت خود تا در مسیرهایی مانند /favicon.ico در دسترس باشند.
6. HTML را اضافه کنید به <head> هر صفحه، یا به قالب یا لایه‌ی مشترک سایت.
7. بررسی کنید با بررسی‌کننده فاویکون، سپس کش مرورگر را پاک و صفحه را دوباره بارگذاری کنید تا آیکون جدید را ببینید.

نمونه قطعه HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ویژگی sizes="48x48" روی لینک ICO کمک می‌کند مرورگرهایی که از SVG پشتیبانی می‌کنند آن را ترجیح دهند و ICO به‌عنوان جایگزین باقی بماند. PNG با اندازه ۹۶ پیکسل قانون مضرب ۴۸ گوگل را برآورده می‌کند.

نمونه مانیفست برنامه وب

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

اگر با خط لوله‌های بیلد کار می‌کنید یا می‌خواهید ساخت آیکون را خودکار کنید، منابع توسعه‌دهندگان را ببینید.

نکات طراحی برای فاویکونی که خوب کار کند

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

مشکلات رایج فاویکون

اگر آیکون شما نمایش داده نمی‌شود، دلایل معمول کش، مسیرهای نادرست و فایل‌های مسدودشده هستند. مرورگرها فاویکون را به‌شدت کش می‌کنند، پس اغلب یک رفرش کامل یا پنجره خصوصی جدید برای دیدن به‌روزرسانی‌ها کافی است. بررسی کنید که نشانی فایل وضعیت ۲۰۰ و نوع محتوای درست برگرداند و تگ <link> داخل <head> باشد. برای جستجو، مطمئن شوید robots.txt آیکون یا صفحه اصلی را مسدود نکرده است. بررسی‌کننده MakeFav می‌تواند به شما کمک کند این مشکلات را سریع پیدا کنید.

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

فاویکون مخفف چیست؟

فاویکون مخفف «favorite icon» (آیکون مورد علاقه) است. این نام از اینترنت اکسپلورر ۵ آمده که در سال ۱۹۹۹ برای اولین بار از یک فایل آیکون کوچک برای تزئین موارد فهرست Favorites مرورگر استفاده کرد. این اصطلاح باقی ماند، هرچند اکنون آیکون در بسیاری جاهای دیگر نمایش داده می‌شود.

آیا فاویکون به سئو کمک می‌کند؟

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

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

برای جستجوی گوگل، از یک تصویر مربعی استفاده کنید که مضربی از ۴۸ پیکسل باشد، مانند ۴۸×۴۸ یا ۹۶×۹۶. برای پوشش گسترده‌تر، یک فایل ICO، یک Apple touch icon با اندازه ۱۸۰×۱۸۰ و آیکون‌های مانیفست ۱۹۲×۱۹۲ و ۵۱۲×۵۱۲ هم ارائه دهید. SVG برای مقیاس‌پذیری اضافه خوبی است.

اگر از PNG یا SVG استفاده کنم باز هم به favicon.ico نیاز دارم؟

همچنان ایده خوبی است. مرورگرها و برخی ابزارها به‌طور پیش‌فرض /favicon.ico را درخواست می‌کنند و نرم‌افزارهای قدیمی‌تر به آن متکی‌اند. نگه داشتن یک فایل ICO در ریشه سایت از خطاهای ۴۰۴ جلوگیری می‌کند و وقتی SVG یا PNG پشتیبانی نشود یک جایگزین امن به شما می‌دهد.

چرا فاویکون من به‌روز نمی‌شود؟

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