no-img
اِمیلا

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

بروزرسانی؛
27 ژوئن 2020

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

آیکون سایت یا Favicon همان تصویر 16 پیکسل در 16 پیکسل کوچکی است که مرورگرها برای معرفی گرافیکی برند در کنار آدرس سایت نمایش می دهند. نام آیکون سایت یعنی Favicon در ابتدا توسط مایکروسافت و برای مرورگر اکسپلورر معرفی شد و مخفف دو کلمه Favorite و Icon بود زیرا برای آیکون سایت را در کنار صفحات شاخص (bookmark) به نمایش می گذاشت.

به تصویر کنار ادرس بار مرورگر همین سایت دقت کنید که آیکون e نماد سایت Emila را نشان می دهد.

نمایش فاوایکون توسط مرورگر

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

فواید طراحی فاوایکون برای سایت:

  • برندینگ
  • شناسایی سریع صفحه شما از روی آیکون سایت برای کاربران
  • ظاهر مناسب و حرفه ای برای سایت

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

نمایش سایت در مرورگر بدون فاوایکون

در طراحی فاوآیکون سایت روشهای معمولی وجود دارد که به مهمتربن آنها به ذکر مثال می پردازیم:

1- تصویر بخشی از لوگو بعنوان آیکون سایت، مانند E در emila

2- حرف اول نام سایت یا شرکت مانند emila یا Wikipedia

3- استفاده از تصویری که به نوعی به موضوع سایت اشاره می کند برای آیکون سایت مانند  Google Analytics

4- ترکیبی از مورد دوم و سوم مانند سایت Amazon

نکات ساخت فاوایکون سایت

برای ساخت Favicon خود در نظر داشته باشید که در نهایت باید تصویری ساده انتخاب کنید که به طریقی نشانگر سایت شما با استفاده از رنگهای سایتتان باشد. طراحی آیکون برای سایت و افزودن آن بیشتر از چند دقیقه از وقت شما را نخواهد گرفت.

برای ساخت فاوایکون سایت خود مراحل زیر را طی کنید:

  • یک تصویر مربعی مناسب از لوگو یا حرف اول برند خود آماده کنید.
  • از ابزارهای آنلاین و رایگان طراحی آیکون سایت مانند Favicon.cc و favicon-generator.org استفاده کنید.
  • یک تصویر 16 در 16 از آیکون سایت خود بسازید.
  • فایل آیکون خود را که با پسوند ico. است را دانلود کنید. استفاده از پسوندهای دیگری مانند jpg، gif و png نیز مجاز است ولی توجه داشته باشید که مرورگر اکسپلورر قادر به تشخیص پسوند png نیست.
  • فایل آیکون سایت خود را در ریشه یا root هاست خود آپلود و ذخیره کنید.
  • پس از این مراحل باید آدرس آیکون سایت خود را از طریق هدر صفحه به مرورگرها معرفی کنید. برای اینکار نام سایت خود را بجای yoursite.com در کد زیر قرار داده و فایل را ذخیره کنید. بطور مثال برای وردپرس و جوملا می توانید کد را در header.php و بین در دستور <head> کپی کنید و برای سایتهای html در فایل index.php.

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

لینک کوتاه : https://emila.ir/?p=16856
سلام علیکم!
5
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم