Favicon چیست و چگونه فاوآیکون بسازیم؟

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

Favicon (چیست)

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

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

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

در مارس 1999، مایکروسافت اینترنت اکسپلورر 5 را منتشر کرد که برای اولین بار از فاوآیکون‌ها پشتیبانی می‌کرد. در اصل فاوآیکون فایلی به نام favicon.ico بود که در دایرکتوری یک وب‌سایت قرار می‌گرفت که در بخش علاقه‌مندی‌ها (بوکمارک‌ها) در اینترنت اکسپلورر و در کنار URL در نوار آدرس، استفاده می‌شد. فاوآیکون توسط کنسرسیوم وب جهانی (W3C) در دسامبر 1999 استانداردسازی شد. طبق این استاندارد، فایل فاوآیکون می‌تواند در هر دایرکتوری وب‌سایتی و با هر نوع فرمت فایل تصویری باشد.

ویژگی‌های فاوآیکون مناسب چیست؟

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

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

چرا باید از فاوآیکون استفاده کنیم؟

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

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

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

چرا باید از فاوآیکون استفاده کنیم؟

فاوآیکون چه تاثیری در سئو دارد؟

فاوآیکون‌ها تاثیر مستقیم روی سئوی سایت شما ندارند اما به طور غیرمستقیم می‌توانند تاثیر مثبتی داشته باشند. در ادامه به چند مورد از فواید فاوآیکون و تاثیر آن روی سئوی وب‌سایت اشاره می‌کنیم:

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

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

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

روش اول

در این روش باید ابتدا فایل فاوآیکون خود را در هاست خود آپلود کنید و سپس کد دستوری زیر را در تگ <head> سایت خود وارد کنید:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

روش دوم

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

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

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

چگونه Favicon بسازیم؟

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

  • 16 پیکسل: برای استفاده عمومی در همه مرورگرها. قابل نمایش در نوار آدرس، تب‌ها و نوار بوکمارک‌ها
  • 24 پیکسل: سایت پین شده در اینترنت اکسپلورر 9
  • 32 پیکسل: صفحه برگه جدید در اینترنت اکسپلورر، دکمه نوار وظیفه در ویندوز 7 و نوار کناری "Read Later" در Safari
  • 57 پیکسل: صفحه اصلی استاندارد iOS (iPod Touch، نسل اول آیفون تا 3G)
  • 72 پیکسل: آیکون صفحه اصلی iPad
  • 96 پیکسل: فاوآیکون مورد استفاده پلتفرم Google TV
  • 114 پیکسل: نماد صفحه اصلی iPhone 4
  • 128 پیکسل: وب استور مرورگر کروم
  • 195 پیکسل: Opera Speed Dial

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

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

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

جمع‌بندی

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

faq

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

فاوآیکون‌ها تاثیر مستقیم روی سئوی سایت شما ندارند اما به طور غیرمستقیم می‌توانند بر روی بوکمارک شدن سایت شما و کاربرپسند بودن آن تاثیر بگذارد.

همچنین بخوانید
ajax چیست و چه زمانی می توان از آن استفاده کرد؟ وب 24 در این مقاله به معرفی ایجکس و مزایا و معایب استفاده از آن پرداخته است.
منظور از کوتاه کننده لینک چیست و چه کاربردی دارد؟ وب 24 در این مقاله به تعریف کوتاه کننده لینک و معرفی بهترین سرویس های کوتاه کننده لینک پرداخته است.
دامین یا دامنه همان آدرس سایت شما است. با وب 24 همراه باشید تا با تمام نکات راهنمای خرید و ثب دامین آشنا شوید.
ویو پورت یا viewport چیست؟ متا تگ ویو پورت نقش بسیار مهمی در سئو و طراحی ریسپانسیو سایت دارد. آشنایی کامل با متاتگ view port را در این مقاله از وب 24 بخوانید.
دیدگاه خود را با ما در میان بگذارید
امتیاز:
captcha