Favicon چیست و نحوه گذاشتن آن در وبسایت

Favicon چیست و نحوه گذاشتن آن در وبسایت

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

فاوآیکون (Favicon) مخفف Favorites Icon به معنای شکل کوچک و آیکون مورد دلخواه شما است. فاوآیکون همچنین تحت عناوین shortcut icon, website icon, tab icon, URL icon یا bookmark    icon شناخته می شود. این فایل درحقیقت یک یا چند آیکون کوچک و مرتبط با یک وب سایت و صفحه وب خاص است. طراحی فاوآیکون یکی از انواع طراحی لوگو است که باید نمادی از لوگو اصلی شرکت باشد و در عین حال طراح وب بتواند این آیکون کوچک را در وب سایت آپلود نماید تا در نهایت مرورگرهای وب بتوانند از آن استفاده کنند. مرورگرهایی که از فاوآیکون پشتیبانی می کنند؛ معمولا این آیکون بسیار کوچک را در قسمت نوار آدرس مرورگر نشان می دهند استفاده و فایده اصلی استفاده از Favicon برای زیبایی وب سایت و همچنین شناخته شدن وب سایت شما در کنار تب های زیادی می‌باشد که در مرورگر باز خواهد بود. فرض کنید 20 تب در مرورگر شما باز باشد؛ در صورتی که از Favicon استفاده کنید، وب سایت شما ساده تر قابل شناسایی می‌باشد. چون تشخیص یک لوگو نسبت به نوشته، هم راحت‌تر است، هم بهتر در ذهن می‌ماند.

 

چرا Favicon مهم است؟

فاوآیکون ها علی رغم اندازه‌ی کوچکشان اهمیت فوق العاده بالایی برای وب سایت ها دارند، آنها تجربه‌ی کاربران را بهتر می کنند، نقش برند سازی دارند و نشان حرفه ای بودن وب سایت شما هستند:

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

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

 

حرفه ای بودن:  فاوآیکون نشان منطقی و حرفه ای بودن وب سایت شما است و باعث می شود وب سایت شما هدف دار و فکر شده به نظر برسد.

 

فاو آیکون کدام فرمت تصویر است؟

اگرچه بیشتر مرورگرهای مدرن فرمت های PNG ، GIF و JPG را برای favicons تشخیص می دهند ، اما اینترنت اکسپلورر در حال حاضر چنین کاری نمی کند. توصیه می شود از فرمت ICO مایکروسافت که در همه مرورگرها کار می کند استفاده کنید.

 

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

ایزهای متداول فایو آیکون ها معمولا 12× 12، 16 × 16 یا 32 × 32 پیکسل می باشد. این سه سایز از معمولترین سایزهای فاو آیکون ها می باشند و تصاویر آن ها معمولا با کیفیت بالا اما حجم پایین، تولید می شوند. یکی دیگر از دلایل استفاده از فرمت ICO به این دلیل است که می تواند چندین فایل را در اندازه های مختلف را در یک فایل ICO داشته باشد..

بهتر است حداقل نسخه ۱۶×۱۶ پیکسلی را داشته باشید. که معمولاً نسخه های ۳۲×۳۲ و ۴۸×۴۸ را بیشتراستفاده می شود. به این ترتیب ، اگر کاربران نشانک را به سمت دسک تاپ خود بکشند ، به جای نسخه ۱۶×۱۶ ، یک نسخه زیبا از لوگو را مشاهده می کنند.

 

چگونه یک فاو آیکون ایجاد کنیم؟

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

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

برای اضافه شدن لوگوی مورد نظر سایت‌تان، باید فرمت آیکون، ico، یا png را ایجاد کنیم. ابعاد این آیکون را باید روی 16*16 یا 32*32 یا 64*64 پیکسل تنظیم کنید.

اگر تصویری که مایلید به عنوان فاوآیکون سایت خود قرار دهید را از پیش در اختیار دارید، تنها کاری که لازم است انجام دهید این است که اندازه ی تصویر را به 16 در 16 پیکسل تبدیل کرده و اطمینان حاصل کنید که تصویر دارای یکی از فرمت های ico, png یا gif باشد. اگر ابزار مناسب جهت تغییر سایز تصویر مورد نظر را بر روی کامپیوتر خود در اختیار ندارید.

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

 

آیا استفاده از فاوآیکون بر سئوی سایت تاثیرگذار است؟

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

 

قرار دادن favicon در هاست؟

  • ابتدا باید فاوآیکون را در هاستتان آپلود کنید.
  • اگر از فرمت HTML استفاده می‌کنید دستور زیر را بین <head> و <head/> قرار دهید.

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

3)در کد بالا، به جای favin.ico باید آدرس فاوآیکون در هاستتان را قرار دهید.

چگونه Favicon خود را لینک کنید؟

1) روش اول: قرار دادن آیکون برای سایت به این شکل بسیار بسیار ساده است. در این روش تنها کاری که لازم است انجام دهید این است که تصویر دلخواه خود را با سایز 16 در 16 پیکسل و فرمت ico در روت سایت خود قرار دهید. در این حالت کلیه ی مرورگر ها بدون

نیاز به هیچ نوع کار اضافی، آیکون مورد نظر را بارگذاری کرده و در کنار عنوان سایت نشان

خواهند داد. این روش در کلیه ی سایت ها، از هر نوع برنامه نویسی یا سی ام اس که استفاده کنید قابل استفاده خواهد بود.

2) روش دوم : روش دوم نیز مانند روش اول محدود به هیچ نوع سایت خاصی نیست و در کلیه ی سایت ها، اعم از سایت های استاتیک یا سایت های که از سی ام اس های مختلف استفاده میکنند قابل استفاده است. در این روش کافی است ابتدا فاوآیکون دلخواه خود را در هاست خود آپلود کرده و سپس کد زیر را در تگ <head> سایت خود قرار دهید :

 

<link rel=”shortcut icon” href=”http://example.com/myicon.ico” />

در کد بالا لازم است که آدرس فاوآیکون خود را به جای http://example.com/myicon.ico قرار دهید. همچنین اگر فاوآیکون شما دارای فرمت gif باشد میتوانید از کد زیر استفاده کنید:

 

<link rel=”icon” type=”image/gif” href=”http://example.com/image.gif” />

و در صورت استفاده از favicon با فرمت png از کد زیر :

 

<link rel=”icon” type=”image/png” href=”http://example.com/image.png” />

 

 

3) روش سوم: این روش برای سایت های وردپرسی مناسب است که در پنل تنظیمات قالب سایتشان، بخشی جهت قرار دادن Favicon موجود باشد. در این حالت کافی است به پنل تنظیمات قالب وردپرس خود مراجعه کرده، تصویر دلخواه را آپلود نموده و به عنوان فاوآیکون سایت انتخاب کنید. تنظیمات مربوط به فاوآیکون معمولا باید در بخش general یعنی عمومی یا بخش appearance یا نمایش پنل تنظیمات قرار گرفته باشد. بدیهی است که این بخش در هر پنل ممکن است به شکل خاصی و در بخش خاصی قرار گرفته باشد ولی میتوانید از تصویر زیر به عنوان یک راهنما استفاده کنید .

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *