فاویکون (Favicon) یک آیکون کوچک و اختصاصی است که برای شناسایی یک وب‌سایت استفاده می‌شود. این آیکون معمولاً در تب مرورگر، بوکمارک‌ها و برخی محیط‌های نمایش سایت دیده می‌شود و به کاربر کمک می‌کند یک سایت را در میان صفحات مختلف سریع‌تر تشخیص دهد. واژه Favicon نیز از عبارت Favorite Icon گرفته شده است.
اگر همین حالا چند صفحه را در مرورگر خود باز کنید، معمولاً در کنار عنوان هر صفحه یک تصویر کوچک مشاهده می‌کنید. این تصویر همان فاویکون است.
برای مثال، فرض کنید یک کاربر هم‌زمان صفحات یک فروشگاه لباس، یک سایت خبری و یک وب‌سایت آموزشی را باز کرده است. اگر هر سایت فاویکون مشخص و قابل تشخیصی داشته باشد، کاربر بدون خواندن عنوان کامل صفحات می‌تواند تب موردنظر خود را پیدا کند.
به همین دلیل، فاویکون اگرچه یک تصویر بسیار کوچک است، بخشی از هویت بصری و تجربه کاربری سایت محسوب می‌شود.
فاویکون کجا نمایش داده می‌شود؟
محل نمایش فاویکون به مرورگر، دستگاه و محیطی که کاربر در آن سایت را مشاهده می‌کند بستگی دارد. رایج‌ترین موارد عبارت‌اند از:
- تب مرورگر در کنار عنوان صفحه
- فهرست بوکمارک‌ها و صفحات ذخیره‌شده
- برخی محیط‌های مرورگر و رابط کاربری دستگاه
- میانبر یا آیکون سایت در بعضی دستگاه‌های موبایل
- در برخی شرایط، کنار نتیجه سایت در نتایج جستجوی گوگل
گوگل نیز می‌تواند فاویکون سایت را در نتایج جستجوی ارگانیک نمایش دهد؛ البته رعایت دستورالعمل‌های گوگل به معنی تضمین نمایش آن نیست.
تفاوت فاویکون با لوگو چیست؟
فاویکون و لوگو هر دو بخشی از هویت بصری برند هستند، اما کاربرد یکسانی ندارند.
لوگو معمولاً در خود صفحات سایت و برای معرفی برند استفاده می‌شود و می‌تواند شامل نام برند، نماد یا ترکیبی از این دو باشد. در مقابل، فاویکون یک آیکون بسیار کوچک برای شناسایی سایت در محیط‌هایی مانند تب مرورگر و بوکمارک است.
برای مثال، تصور کنید لوگوی یک شرکت شامل نام کامل شرکت و یک نماد گرافیکی باشد. قرار دادن کل این لوگو در اندازه بسیار کوچک فاویکون احتمالاً باعث می‌شود نوشته‌ها خوانا نباشند. در چنین شرایطی بهتر است از نماد یا بخش ساده‌شده لوگو استفاده شود.
خود WordPress نیز بین Site Logo و Site Icon تفاوت قائل می‌شود؛ لوگو برای نمایش هویت سایت در صفحات استفاده می‌شود، در حالی که Site Icon همان آیکونی است که می‌تواند به‌عنوان فاویکون استفاده شود.
فاویکون چه کاربردی دارد؟
مهم‌ترین کاربرد فاویکون، تشخیص سریع سایت است. وقتی کاربر چندین صفحه را هم‌زمان باز کرده یا تعداد زیادی سایت را در بوکمارک خود ذخیره کرده است، یک آیکون مناسب می‌تواند پیدا کردن سایت موردنظر را آسان‌تر کند.
از طرف دیگر، فاویکون بخشی از هویت بصری سایت است. وقتی رنگ، نماد و سبک آیکون با برند هماهنگ باشد، تجربه کاربر منسجم‌تر به نظر می‌رسد.
فاویکون و تجربه کاربری
فرض کنید یک فروشگاه اینترنتی را مرتباً بازدید می‌کنید و آن را در مرورگر خود ذخیره کرده‌اید. اگر فاویکون مشخصی داشته باشد، احتمالاً با یک نگاه می‌توانید آن را میان ده‌ها صفحه دیگر پیدا کنید.
این موضوع به‌خصوص برای سایت‌هایی که کاربران آن‌ها مرتباً به سایت مراجعه می‌کنند اهمیت بیشتری دارد.
آیا فاویکون روی سئو تأثیر دارد؟
فاویکون را نباید یک عامل مستقیم رتبه‌بندی گوگل در نظر گرفت. یعنی صرفاً با اضافه کردن فاویکون نباید انتظار داشته باشید رتبه یک صفحه در نتایج جستجو افزایش پیدا کند.
اما فاویکون می‌تواند از نظر شناخت برند و تجربه کاربری اهمیت داشته باشد. علاوه بر این، گوگل امکان نمایش فاویکون را در نتایج جستجوی ارگانیک فراهم کرده است و برای این منظور دستورالعمل‌های مشخصی دارد.
بنابراین بهتر است فاویکون را بخشی از بهینه‌سازی هویت بصری و تجربه کاربری سایت بدانیم، نه یک تکنیک مستقیم برای افزایش رتبه.
فاویکون قرار نیست رتبه سایت را بالا ببرد؛ هدف اصلی آن کمک به شناسایی سریع‌تر سایت و ایجاد یک هویت بصری منسجم است.
بهترین اندازه فاویکون چقدر است؟
از نظر فنی، فاویکون می‌تواند در اندازه‌های مختلف مورد استفاده قرار گیرد و مرورگرها بسته به محیط نمایش، آیکون مناسب را انتخاب کنند. در HTML نیز می‌توان اندازه‌های مختلف آیکون را از طریق ویژگی sizes مشخص کرد.
برای نمایش در نتایج جستجوی گوگل، فاویکون باید مربع با نسبت ۱:۱ باشد و حداقل اندازه مورد قبول گوگل ۸×۸ پیکسل است؛ با این حال، گوگل استفاده از اندازه ۴۸×۴۸ پیکسل یا بزرگ‌تر را برای نمایش مناسب‌تر در محیط‌های مختلف توصیه می‌کند.
در وردپرس، هنگام استفاده از قابلیت داخلی Site Icon، تصویر باید مربعی و حداقل ۵۱۲×۵۱۲ پیکسل باشد. وردپرس فایل PNG را نیز به‌عنوان فرمت پیشنهادی معرفی می‌کند.
در عمل، استفاده از یک فایل باکیفیت و مربعی باعث می‌شود سیستم بتواند نسخه‌های کوچک‌تر آن را برای محیط‌های مختلف تولید یا استفاده کند.
فاویکون را با چه فرمتی بسازیم؟
فرمت‌های مختلفی برای فاویکون قابل استفاده هستند. مرورگرها از فرمت‌هایی مانند ICO و PNG پشتیبانی می‌کنند و HTML نیز امکان معرفی آیکون‌های مختلف را فراهم می‌کند.
گوگل برای فاویکون نتایج جستجو فرمت‌هایی مانند ICO، PNG، GIF، JPEG، BMP و TIFF را پشتیبانی می‌کند.
برای بیشتر سایت‌های امروزی، استفاده از یک تصویر PNG مربعی و باکیفیت، انتخاب ساده و مناسبی است؛ به‌خصوص اگر قرار باشد فاویکون از طریق قابلیت داخلی وردپرس تنظیم شود.
فاویکون خوب چه ویژگی‌هایی دارد؟
چون فاویکون در اندازه بسیار کوچکی نمایش داده می‌شود، طراحی آن باید ساده‌تر از لوگوی اصلی باشد.
بهتر است:
- از یک نماد ساده و قابل تشخیص استفاده کنید.
- جزئیات بسیار ریز را حذف کنید.
- در اندازه کوچک، شکل اصلی آیکون همچنان قابل تشخیص باشد.
- رنگ‌بندی آن با هویت بصری برند هماهنگ باشد.
- از متن‌های طولانی یا نوشته‌های بسیار ریز استفاده نکنید.
- تصویر را به شکل مربع طراحی کنید.
- نسخه اصلی را با کیفیت مناسب نگهداری کنید.
برای مثال، اگر یک کارخانه تولید چای لوگویی دارد که شامل تصویر کوه، نام شرکت، شعار و چند خط توضیح است، استفاده از تمام این عناصر در فاویکون انتخاب مناسبی نیست. بهتر است یک نماد ساده، مثلاً همان نشان اصلی برند، به شکل ساده‌شده در فاویکون استفاده شود.
چگونه فاویکون را به سایت اضافه کنیم؟
روش اضافه کردن فاویکون به سایت به سیستم مدیریت محتوا و ساختار سایت بستگی دارد. اگر از وردپرس استفاده می‌کنید، معمولاً نیازی نیست کد HTML را به‌صورت دستی تغییر دهید.
افزودن فاویکون در وردپرس
در نسخه‌های جدید وردپرس، می‌توانید از قابلیت داخلی Site Icon استفاده کنید. طبق مستندات WordPress، از نسخه ۶.۵ این تنظیم در بخش Settings → General قرار گرفته است. کافی است یک تصویر مربعی آماده کنید، آن را انتخاب کنید و به‌عنوان Site Icon قرار دهید.
وردپرس سپس تگ‌های مربوط به آیکون سایت را در خروجی صفحه قرار می‌دهد. در پیاده‌سازی داخلی وردپرس، اندازه‌هایی مانند ۳۲، ۱۹۲ و ۱۸۰ پیکسل برای کاربردهای مختلف تولید یا معرفی می‌شوند.
اگر از قالب یا سیستم دیگری استفاده می‌کنید، روش استاندارد HTML استفاده از تگ زیر در بخش <head> صفحه است:
<link rel="icon" href="/favicon.ico">
ویژگی rel="icon" مشخص می‌کند که فایل معرفی‌شده به‌عنوان آیکون سایت استفاده می‌شود. مرورگر نیز بر اساس اطلاعاتی مانند فرمت و اندازه می‌تواند آیکون مناسب را انتخاب کند.
چرا فاویکون در گوگل نمایش داده نمی‌شود؟
یکی از سؤالات رایج این است که «فاویکون را به سایت اضافه کرده‌ام، پس چرا در گوگل نمایش داده نمی‌شود؟»
نمایش فاویکون در نتایج گوگل تضمین‌شده نیست. با این حال، چند مورد مهم باید بررسی شود.
اول اینکه فایل فاویکون باید توسط Googlebot-Image قابل دسترسی باشد و صفحه اصلی سایت نیز نباید دسترسی Googlebot را مسدود کرده باشد. همچنین فاویکون باید مربع باشد و گوگل توصیه می‌کند اندازه آن حداقل ۴۸×۴۸ پیکسل باشد.
آدرس فایل فاویکون نیز بهتر است ثابت باشد. گوگل صراحتاً توصیه می‌کند URL فاویکون را مرتب تغییر ندهید، زیرا سیستم گوگل برای دریافت و پردازش اطلاعات جدید نیاز به خزش مجدد سایت دارد.
بنابراین اگر به‌تازگی فاویکون را تغییر داده‌اید، ممکن است مدتی طول بکشد تا نسخه جدید در نتایج جستجو مشاهده شود. گوگل اعلام کرده که فرایند خزش و پردازش تغییرات فاویکون می‌تواند از چند روز تا چند هفته طول بکشد.
اگر فاویکون در مرورگر نمایش داده نمی‌شود چه کنیم؟
اگر فاویکون در تب مرورگر نمایش داده نمی‌شود، ابتدا این موارد را بررسی کنید:
- مطمئن شوید تصویر واقعاً به‌عنوان Site Icon یا favicon تعریف شده است.
- آدرس فایل را در مرورگر باز کنید تا مطمئن شوید فایل در دسترس است.
- کش مرورگر و کش سایت را پاک کنید.
- سورس HTML صفحه را بررسی کنید و ببینید تگ
rel="icon"وجود دارد یا خیر. - اگر از افزونه کش یا CDN استفاده می‌کنید، کش مربوط به فایل آیکون را نیز بررسی کنید.
- مطمئن شوید فایل تصویر خراب یا غیرقابل دسترسی نیست.
گاهی فاویکون در سایت به‌درستی تنظیم شده اما مرورگر نسخه قدیمی آن را از کش خود نمایش می‌دهد. بنابراین مشاهده نکردن فوری تغییر، لزوماً به معنی خراب بودن تنظیمات نیست.
آیا باید برای هر صفحه سایت فاویکون جداگانه بسازیم؟
معمولاً خیر.
گوگل برای یک سایت در سطح hostname تنها یک فاویکون را در نتایج جستجو در نظر می‌گیرد. برای مثال، دامنه اصلی و صفحات مختلف آن نمی‌توانند برای هر مسیر یک فاویکون متفاوت در نتایج گوگل داشته باشند. در مقابل، یک ساب‌دامین مانند news.example.com می‌تواند فاویکون متفاوتی نسبت به example.com داشته باشد.
بنابراین برای یک وب‌سایت معمولی، یک فاویکون اصلی و سازگار با برند کافی است.
اشتباهات رایج در انتخاب فاویکون
یکی از اشتباهات رایج، استفاده از لوگوی کامل و شلوغ در اندازه بسیار کوچک است. لوگویی که در ابعاد بزرگ زیبا به نظر می‌رسد، ممکن است در اندازه فاویکون کاملاً ناخوانا باشد.
اشتباه دیگر، تغییر مداوم فاویکون یا آدرس فایل آن است. اگر یک آیکون مناسب برای سایت انتخاب کرده‌اید، بهتر است بدون دلیل آن را مرتب تغییر ندهید.
استفاده از تصاویر غیرمربعی، کیفیت پایین، رنگ‌هایی با کنتراست بسیار کم و جزئیات بیش از حد نیز می‌تواند باعث شود فاویکون در اندازه کوچک عملکرد مناسبی نداشته باشد.
همچنین نباید فاویکون را با لوگوی سایت، تصویر Open Graph یا تصویر شاخص مقاله اشتباه گرفت. هرکدام از این تصاویر کاربرد متفاوتی دارند.
فاویکون چقدر برای یک سایت ضروری است؟
فاویکون برای عملکرد اصلی سایت ضروری نیست؛ یعنی نبود آن باعث نمی‌شود صفحه از نظر فنی از کار بیفتد. اما برای یک سایت حرفه‌ای، اضافه کردن فاویکون کار ساده‌ای است که می‌تواند به شناسایی بهتر برند و تجربه کاربری منسجم‌تر کمک کند.
به‌خصوص برای سایت‌های تجاری، فروشگاه‌های اینترنتی، وب‌سایت‌های خبری و سرویس‌هایی که کاربران به‌طور مداوم به آن‌ها مراجعه می‌کنند، بهتر است فاویکون متناسب با هویت بصری برند طراحی و به‌درستی تنظیم شود.
جمع‌بندی
فاویکون (Favicon) چیست؟ فاویکون یک آیکون کوچک برای شناسایی یک وب‌سایت است که معمولاً در تب مرورگر، بوکمارک‌ها و برخی محیط‌های دیگر نمایش داده می‌شود. این آیکون با لوگوی سایت یکسان نیست، هرچند معمولاً از هویت بصری همان برند استفاده می‌کند.
برای یک فاویکون مناسب، بهتر است از یک طرح ساده و مربعی استفاده کنید و آن را در اندازه و فرمت مناسب آماده کنید. اگر سایت شما با وردپرس ساخته شده است، می‌توانید از قابلیت داخلی Site Icon برای تنظیم آن استفاده کنید.
فاویکون به‌تنهایی عامل افزایش رتبه در گوگل نیست، اما گوگل امکان نمایش آن را در نتایج جستجو فراهم کرده است و رعایت استانداردهای فنی و طراحی مناسب باعث می‌شود سایت در محیط‌های مختلف، هویت بصری مشخص‌تری داشته باشد.
برای فعال کردن فاویکون در سایت خود می توانید از کارشناسان و متخصصی پرشیا وب در بخش پشتیبانی سایت شخصی استفاده کنید.
