زمان مطالعه ۱۴ دقیقه

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

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

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

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

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

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

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

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

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

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

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

 


 

 

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

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


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

 

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

 

طراحی فاآیکون favicon

 

گرچه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) خود یک تغییر وسیع در وب سایت فروشگاهی خود ایجاد کنید. زیرا یک فاوآیکون خوب جزئی جدایی ناپذیر از برند شما و استاندارد فنی وب سایت شماست.مراحل ساخت فاوایکون و قرار دادن در سایت به همین سادگی به پایان رسید، مطمئناً هر ثانیه ارزشش را دارد که روی آن سرمایه گذاری کنید.