no-img
اِمیلاسلام کاربر مهمان. امروز دوشنبه ۲۷ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۱۲ تیر ۱۳۹۸،
138 روز پیش
نکات طراحی ایکون و فاوایکون سایت
امتیاز 5.00 ( 6 رای )
حمایت از emila.ir

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

انتشار؛ ۱۲ تیر ۱۳۹۸ - 138 روز پیش

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

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

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

بیشتر: نمایش Favicon سایت

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

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

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

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

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

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

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

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.

بیشتر: نمایش Favicon سایت

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


موضوع : وب/ برچسب : , , , / لینک کوتاه : https://emila.ir/?p=16856
designer