آیکون سایت چیست؟ کلید شناسایی برند ما در نتایج جست‌وجو

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

آیکون سایت چیست؟ ابزار ارتباط بصری وب‌سایت با کاربران

آیکون سایت (Favicon) نماد کوچکی است که کنار عنوان صفحه در تب‌های مرورگر دیده می‌شود و یک برند یا وب‌سایت را نشان می‌دهد. فاوآیکون‌ها را حتما تاکنون در نوار آدرس، فهرست آدرس‌های نشانه‌گذاری‌شده، صفحات نتایج موتور جست‌وجو، نوار ابزارها، تاریخچه مرورگر و سایر بخش‌های وب دیده‌اید.

با استفاده از فاوایکون در وب‌سایت خود به کاربران کمک می‌کنیم تا درصورتی‌که چندین تب را در مرورگرشان باز کرده‌اند، به‌راحتی تب مربوط به وب‌سایت ما را شناسایی کنند. البته استفاده از آیکون سایت تاثیر چندانی بر سئو ندارد؛ اما از اواخر سال ۲۰۱۹ که گوگل شروع به استفاده از فاوآیکون‌ها برای نمایش نتایج جست‌وجو در موبایل کرد، اوضاع کمی متفاوت شد.

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

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

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

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

• صفحه نتایج جست‌وجو
• تب‌های مرورگر
• نوار جست‌وجو
• تاریخچه جست‌وجو
• نوار ابزارها
• صفحات نشانه‌گذاری‌شده (نشانک‌ها)
• منوی کشویی نشانک‌ها

تاثیر پنهان فاوایکون بر سئو و برندینگ

فاوآیکون به‌طور مستقیم روی رتبه‌بندی وب‌سایت توسط موتورهای جست‌وجو موثر نیست؛ اما با تاثیرگذاری روی مدت زمان تعامل کاربران با وب‌سایت به رشد سئو نیز کمک می‌کند. وب‌سایت‌هایی که نرخ کلیک (CTR) و زمان ماندگاری (Dwell Time) بالایی دارند، همیشه در رتبه‌بندی نتایج جست‌وجو برتری پیدا می‌کنند. وب‌سایتی که در نتایج جست‌وجو فاوآیکون دارد، به احتمال زیاد کلیک‌های بیشتری نسبت به وب‌سایتی که فاوآیکون ندارد، دریافت می‌کند.

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

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

چگونه یک فاوآیکون خوب ایجاد کنیم؟

آیکون وب‌سایت باید ساده و قابل شناسایی باشد تا مخاطبان بتوانند برند ما را به خاطر بسپارند. از این رو مهم است که بتوانیم یک فاوایکون خوب طراحی کنیم تا برای کاربران به‌یادماندنی باشد.

۱.    لوگوی سایت، بهترین فاوآیکون ممکن است!

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

۲.    دور متن در فاوآیکون را خط بکشید!

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

۳.    استفاده از عکس را فراموش کنید!

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

۴.    حالت تاریک را هم در نظر بگیرید!

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

۵.    استاندارد اندازه آیکون سایت را رعایت کنید!

اندازه توصیه‌شده برای فاوآیکون‌ها در تب‌ها و نشانک‌های مرورگر ۱۶×۱۶ یا ۳۲×۳۲ پیکسل است. بااین‌حال، برای قرار دادن آیکون وب‌سایت در پلتفرم‌ها و دستگاه‌های مختلف، می‌توانید اندازه آن‌ها را از ۴۸×۴۸ تا ۵۱۲×۵۱۲ پیکسل افزایش دهید تا وضوح و نمایش بهتری داشته باشند. رایج‌ترین اندازه‌ها برای فاوایکون‌ها با اهداف خاص عبارت‌اند از:

• ۱۶×۱۶: مناسب برای فاوایکون‌های مرورگر
• ۳۲×۳۲: اندازه مناسب برای آیکون‌های میانبر نوار وظیفه (Taskbar)
• ۹۶×۹۶: بهترین اندازه برای آیکون‌های میانبر دسکتاپ
• ۱۸۰×۱۸۰: اندازه آیکون‌های لمسی اپل
• ۳۰۰×۳۰۰: اندازه مورد نیاز برای وب‌سایت‌ساز Squarespace.
• ۵۱۲×۵۱۲: اندازه مورد نیاز برای وردپرس

۶.   فرمت مناسب فاوآیکون را در نظر بگیرید!

آیکون وب‌سایت را می‌توانید در فرمت‌های PNG، SVG، JPG یا ICO طراحی کنید که هرکدام ویژگی‌های خاص خود را دارند. در ادامه به بررسی دقیق‌ترین قالب‌های فاوآیکون می‌پردازیم:

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

همین حالا یک فاوآیکون برای نمایش در نتایج جست‌وجو تعریف کنید!

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

۱.یک فاوآیکون بسازید

۲.مشابه زیر، یک برچسب <link> به هدر صفحه اصلی خود اضافه کنید:

<link rel=”icon” href=”/path/to/favicon.ico”>

گوگل از سه مقدار زیر برای متغیر rel پشتیبانی می‌کند:

• icon: این مقدار نمایانگر وب‌سایت است و طبق استاندارد HTML تعریف شده است
• apple-touch-icon: یک آیکون سازگار با iOS که وب‌سایت را نمایش می‌دهد و طبق مستندات توسعه‌دهنده اپل است
• apple-touch-icon-precomposed: یک آیکون جایگزین برای نسخه‌های قدیمی‌تر iOS و مطابق با مستندات توسعه‌دهنده اپل است

href یا آدرس فاوآیکون می‌تواند یک مسیر نسبی (مانند smile.ico/) یا مسیر مطلق (مانند https://example.com/smile.ico) باشد. URL لزوما نیازی نیست که در سایت میزبانی شود؛ یعنی فاوایکون را می‌توان در یک شبکه توزیع محتوا (CDN) میزبانی کرد.

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

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

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

1. جست‌وجوی گوگل تنها از یک فاوآیکون برای هر وب‌سایت پشتیبانی می‌کند و سایت‌ها با نام میزبان (Hostname) تعریف می‌شوند. برای مثال، https://www.example.com/ و https://code.example.com/ دو نام میزبان متفاوت هستند و می‌توانند دو فاوایکون متفاوت داشته باشند. بااین‌حال، https://www.example.com/sub-site زیرشاخه‌ای از یک سایت شناخته می‌شود و ما فقط می‌توانیم یک آیکون سایت برای https://www.example.com/ تنظیم کنیم. این آیکون سایت هم برای سایت اصلی و هم زیرشاخه‌های آن اعمال می‌شود
2. Googlebot-Image باید قادر به خزش روی فایل آیکون سایت باشد و Googlebot باید بتواند صفحه اصلی را خزش (Crawl) کند. این ربات‌ها را نمی‌توان برای خزیدن مسدود کرد
3. برای کمک به افراد در شناسایی سریع سایت، هنگام اسکن نتایج جست‌وجو، مطمئن شویم که آیکون وب‌سایت از نظر بصری نماینده برند سایت است
4. آیکون سایت باید مضربی از مربع ۴۸ پیکسل باشد، به‌عنوان مثال: 48x48px، 96x96px، 144x144px و غیره؛ به‌عبارت‌دیگر، SVG فاوآیکون باید با نسبت تصویر ۱:۱ (مربع) باشد. گوگل از هر فرمت فاوایکون معتبر پشتیبانی می‌کند
5. آدرس اینترنتی آیکون سایت باید ثابت باشد (URL را مدام تغییر ندهید)
6. گوگل فاوآیکون‌های نامناسب از جمله نمادهای مبتذل و نمادهای نفرت‌پراکنی (مانند صلیب شکسته) را نمایش نمی‌دهد. اگر چنین نمادهایی در آیکون وب‌سایت وجود داشته باشد، گوگل آن را با آیکون پیش‌فرض جایگزین می‌کند

آیکون وب‌سایت؛ گامی مهم، اما ناکافی در سئو

آیکون سایت به‌عنوان یک عنصر کوچک، اما بسیار تاثیرگذار، تجربه کاربری، نرخ کلیک صفحات و در نتیجه تعامل کاربران با وب‌سایت را بهبود می‌بخشد. همه این عوامل در نهایت روی سئوی وب‌سایت تاثیر مثبت دارند، اما کافی نیستند!

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