فاوآیکون (favicon) چیست؟ چرا فروشگاه‌های اینترنتی باید فاوآیکون داشته باشند؟

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

• فاوآیکون یا فیوآیکون (favicon) چیست؟

• فاوآیکون در کجاها استفاده می‌شود؟

• ویژگی‌های یک فایوآیکون متناسب برای فروشگاه‌های اینترنتی

• چطور فاوآیکون طراحی کنیم؟

• چطور فاوآیکون (favicon) را در سایت فروشگاهی خود قرار دهیم؟

• نکات مرتبط با طراحی و ساخت فاو‌آیکون

• بررسی فنی عملکرد فاو‌آیکون

• چرا فاوآیکون ضروری است؟

فاوآیکون (favicon) چیست؟

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

Favicons  به ما کمک می‌کند تا به سرعت از نظر بصری، هر برگه مرورگر را با یک وب سایت خاص مطابقت دهیم و اگر شما هم مثل من هستید و می‌خواهید ده‌ها تب را به طور همزمان باز نگه دارید، در نهایت قادر به خواندن نام آن‌ها نیستید؛ favicons بهترین دوستان شما در یافتن وب سایت مورد نیاز شماهستند و کار را برای چشمان ما آسان می‌کنند.

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

از Internet Explorer گرفته تا SERP Google

در سال ۱۹۹۹، فاوآیکون (favicon) در اینترنت اکسپلورر به عنوان راهی برای کمک به جستجوگران برای تشخیص صفحات وب دارای علامت گذاری شده، معرفی شد. از آنجا که صفحات علامت گذاری شده در اینترنت اکسپلورر "Favorites" نامیده می‌شدند، کلمات "favorite" و "icon" با هم ترکیب شده و اصطلاح جدیدی به نام فاوآیکون ایجاد شد.

 

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

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

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

•  صفحات نشانک گذاری شده یا بوک مارک شده، هر دو در نوار بوک مارک ها  با یک نماد دلخواه نشان داده می‌شوند.

•  از ماه مه سال ۲۰۱۹،  Google شروع به استفاده از favicons در SERP تلفن همراه کرد، علاوه بر این در ابتدای سال ۲۰۲۰  فاوآیکون‌ها در نتایج جستجوی گوگل ظاهری جدید در دسکتاپ پیدا کردند که حاکی برخی تغییرات بود.

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

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

ویژگی‌های یک فاوآیکون متناسب برای فروشگاه‌های اینترنتی

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

قالب و فرمت فاوایکون Favicon

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

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

به طور کلی‌، فرمت ICO اکنون کمی منسوخ شده و امروزه اکثر وب سایت‌ها دارای گزینه‌های دلخواه در قالب PNG هستند.

استفاده از فرمت PNG به دلایل زیر است:

• کیفیت تصویر

• سازگاری بالا با مرورگر وکراس پلتفرم
• فاوآیکون PNG در اکثر مرورگرها و دستگاه های مدرن بسیار بهتر به نظر می‌رسند.

با توجه به نکات بالا، فرمتی که شما باید تصویر خود را در فروشگاه اینترنتی بارگذاری کنید با فرمت PNG است.

اندازه فاوآیکون(favicon)

اندازه فاوآیکون کلاسیک، ۱۶x۱۶ پیکسل است. برخی از مرورگرهای قدیمی هنوز از مربع های کوچک استفاده می‌کنند، اما اگر می‌خواهید favicon شما در دستگاه های مدرن خوب به نظر برسد، باید تغییرات favicon با وضوح بالاتر را نیز ایجاد کنید. بسته به نوع سیستم عامل، ممکن است لازم باشد از اندازه های زیر استفاده کنید:

بنابراین، چه اندازه favicon ترجیح داده می‌شود؟

گوگل بیش‌ترین وضوح تصویر و با اندازه ۱۹۲ *۱۹۲ را پیشنهاد می‌کند. همچنین به تازگی  برای دریافت کلیک بیشتر، استفاده از تصاویر با کیفیت را به سایت‌ها پیشنهاد می‌کند. در صورت نیاز به اندازه بزرگتر، مانند صفحه اصلی Android، Google به راحتی گزینه‌های موجود با وضوح پایین را گسترش می‌دهد. در نتیجه، همه تصاویر تار به نظر می‌رسند و تجربه کاربر را از بین می‌برند.

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

• از یک  فاوآیکون (favicon)مربعی استفاده کنید.
• Favicon باید فقط نشانگر برند شما باشد و حاوی نمادهای نامناسب نباشد. در غیر این صورت Google آن را نشان نمی‌دهد و به جای آن از نماد عمومی favicon استفاده می‌کند.
• فایل Favicon باید برای ربات‌های Google قابل دسترسی باشد پس از فرمت درست استفاده کنید.

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

چطور فاوآیکون (favicon) طراحی کنیم؟

مطمئناً و در حقیقت، چندین روش برای ایجاد فاویکن برای وب سایت فروشگاهی شما وجود دارد مانند:

•  با استفاده از ادیتورهای گرافیکی مثل فوتوشاپ لوگو متناسب با کسب و کار اینترنتی خود را طراحی کنید و سایز فرمت مناسب را در آن رعایت کنید.
•  در سرویس‌های ویژه و سایتهای طراحی فاوآیکون، آن را طراحی کنید و سپس از با قالب مناسب دانلود کنید و در فروشگاه خود بارگزاری کنید.
•  از یک تصویر موجود، به عنوان مثال، لوگو خود استفاده کنید و آن را در یک سایت آنلاین ساخت فاویکون مانند Favicon.io ، Realfavicongenerator.net و غیره بارگذاری کنید.
•  فاویکون های آماده را از سایت‌های ویژه مانند Findicons با بیش از ۵۰۰ هزار گزینه برای انتخاب و IconJ با بیش از ۱۸ هزار گزینه دانلود کنید.

چطور فاوآیکون در سایت فروشگاهی خود قرار دهیم؟

قرار دادن ایکون در فروشگاهی اینترنتی ساخته شده با فروشگاه‌ساز

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

• پس از ورود به پنل فروشگاهی خود، وارد بخش تنظیمات شوید.

• در بخش عنوان و لوگو و در باکس فاوآیکون یا ایکون مرورگر، ایکون خود را بارگزاری کنید.

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

 

قرار دادن ایکون در سایت فروشگاهی اختصاصی

ابتدا با استفاده از یک فایل منیجر مانند Filezilla ،favicon خود را در کاتالوگ ریشه سایت بارگذاری کنید. سپس تنها کاری که باید انجام دهید این است که کد زیر را در متا تگ <head> </head> وارد کنید:

<head>

  <link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon">

  <link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon">

</head>

نکات مرتبط با طراحی آیکون

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

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

و همینطور که این کار را می‌کنید، این سوالات را از خود بپرسید:

• آیا favicon شما از بقیه متمایز است؟  شاید، رقبای شما فاوآیکون‌های خود را سرشار از رنگ درنظر گیرند و شما برای متمایز بودن با آن‌ها، به جای یک نماد رنگی، از آیکون سیاه و سفید یا حتی چیزی متفاوت‌تر از نظر مفهومی انتخاب کنید.

• آیا یک فاکتور GIF متحرک می‌تواند به شما در متفاوت بودن کمک کند؟  یا اینکه این فقط یک محرک برای جستجوگران خواهد بود و شاید بسیار تاثیرگذار! اما ممکن است در بارگیری زمان‌بر باشد و حتی تا پایان جستجوی کاربر به نمایش گذاشته نشود.

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

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

به خاطر داشته باشید که یک فاوآیکون (favicon) عالی همیشه واضح، ساده و به یاد ماندنی خواهد بود.

 

بررسی فنی عملکرد فاوآیکون (favicon)

اکنون که می‌دانید چگونه یک  فاوآیکون (favicon) زیبا و به یادماندنی ایجاد کنید و آن را به وب سایت خود اضافه کنید، وقت آن است که دریابید آیا به درستی در موتورهای جستجو نمایش داده می‌شود یا خیر. بیایید برای بررسی دقیق تر وارد شویم!

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

http://www.google.com/s2/favicons؟domain=mysite.com

همچنین روش دیگری برای بررسی نحوه مشاهده فاوآیکون در دستگاه‌های مختلف وجود دارد:

استفاده از خدمات آنلاین ویژه مانند:

Realfavicongenerator

با این حال، اگر فاوآیکون (favicon) شما به هر دلیلی به درستی یا اصلاً در Google نشان داده نمی‌شود، با بررسی موارد زیر شروع کنید:

• آیا تصویر گرافیکی در پوشه ریشه منبع در قالب فایل ICO،PNG یا GIF قرار دارد؟

• آیا فاوکون واضح و منحصر به فرد است؟

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

چرا وجود فایوآیکون برای سایت‌های فروشگاهی ضروری است؟

Favicons به وب سایت‌های فروشگاهی کمک می‌کند تا در اقیانوس وسیع منابع آنلاین زنده بمانند، و همچنین باعث جذابیت و حرفه ای شدن آن‌ها در نظر بازدیدکنندگان می‌شوند.

favicon شما کم‌ترین جزئیاتی است که می‌تواند بر درک عمومی سایت فروشگاهی‌تان و نام تجاری شما، شناخت آن‌ها و حتی میزان ترافیکی که از جستجو بدست می‌آورد تأثیر بگذارد، بنابراین آن را دست کم نگیرید.

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