طراحی سایتآموزشفناوری

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

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

فایو آیکون یا FAVICON مخفف favorites icon می باشد به معنی شکل کوچک و آیکونی مورد دلخواه شما.
اگر به تازگی با واژه ی فایو آیکون یا FAVICON آشنا شدید، بهتر است که ابتدا با تلفظ صحیح آن آشنا شوید.
این کلمه را به صورت فَـ (مثل فندوق) – وی (مثل ویرایش) – کان (مثل کانادا) تلفظ میکنند.
کلمه فایو آیکون یا FAVICON از ترکیب دو کلمه ی Favorite به معنای مورد علاقه و icon که با معنی آن آشنا هستید ایجاد شده است. Favicon در واقع تصویری است که نماینده ی یک سایت است.
چیزی که درباره آن صحبت می‌کنیم در تصویر زیر قابل مشاهده می‌باشد.

فایو آیکون یا FAVICON

و به همین جهت از آن به عنوان آیکن میانبر (shortcut icon)  آیکن بوکمارک (bookmark icon) وهمچنین تحت عناوین , website icon, tab icon, URL icon  شناخته می شود.

سایز فاوآیکون

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

اندازه ی فایو آیکون یا FAVICON  عموما 16 در 16 پیکسل است.

فاوآیکون در کجا نمایش داده می شود؟

سمت چپ آدرس بار
در تب های مرورگر
در نشانه گذاری موارد دلخواه یا Bookmark

وقتی یک سایت دارای فَویکان باشد، مرورگر ها، بسته به نوع مرورگر، این آیکن را در کنار آدرس سایت، در سربرگ هر تب در کنار عنوان سایت و … به نمایش در خواهند آورد.
برای نمونه، اگر همین حالا به تصویر ابتدای این نوشته سری بزنید،
خواهید دید که یک فایو آیکون یا FAVICON  در بالای تصویر مرورگر با فلش برایتان مشخص شده است.
فایو آیکون یا FAVICON ای که برای سایتتان انتخاب میکنید میتواند دارای یکی از فرمت های ico, png, gif, jpg, svg, apng باشد.
از میان این فرمت ها، سه فرمت ico, png و gif توسط کلیه ی مرورگر ها ساپورت میشوند.
بنابراین توصیه میشود از یکی از این سه فرمت استفاده کنید.
همچنین در صورت استفاده از تصویر gif متحرک به عنوان فایو آیکون یا FAVICON باید در نظر داشته باشید که نمایش فریم های تصویر متحرک در برخی از مرورگر ها به درستی ساپورت نمیشود و در این حالت تصویر به صورت ثابت به نمایش در خواهد آمد.

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

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

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

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

میتوانید از یک ابزار آنلاین مانند سایت image.online-convert.com استفاده کنید.

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

بهترین کار این است که از سایت بسیار کاربردی Favicon.cc استفاده کنید.

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

چگونه برای سایت خود Favicon قرار دهیم؟

برای قرار دادن فایو آیکون یا FAVICONبرای سایت خود میتوانید به یکی از 4 روش زیر عمل کنید :

روش اول :

قرار دادن آیکن برای سایت به این شکل بسیار بسیار ساده است.
در این روش تنها کاری که لازم است انجام دهید این است که تصویر دلخواه خود را با سایز 16 در 16 پیکسل و فرمت ico در روت سایت خود قرار دهید. در این حالت کلیه ی مرورگر ها بدون نیاز به هیچ نوع کار اضافی، آیکن مورد نظر را بارگذاری کرده و در کنار عنوان سایت (یا هر بخش دیگری که این آیکن را به نمایش در می آورند) نشان خواهد داد.
این روش در کلیه ی سایت ها، از هر نوع برنامه نویسی یا سی ام اس و … ای که استفاده کنید قابل استفاده خواهد بود.

روش دوم :

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

<link rel = “نماد میانبر” href = “http://example.com/myicon.ico” />

در کد بالا لازم است که آدرس favicon خود را بجای http://example.com/myicon.ico قرار دهید.

همچنین اگر favicon شما دارای فرمت 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” />

روش سوم :

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

فایو آیکون یا FAVICON

روش چهارم :

از این روش فقط در وردپرس 4.3 به بعد میتوانید استفاده کنید.
در این حالت کافی است از منوی نمایش به زیر منوی سفارشی سازی مراجعه کنید.
سپس به تب هویت سایت بروید و در بخش نمادک سایت بر روی بارگذاری پرونده کلیک کنید.

فایو آیکون یا FAVICON

 

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

چرا طراحی لوگوی فایوآیکون برای برندسازی شما مهم است؟

فایوآیکون معرف وب سایت شماست و تجربه کاربران را از شناخت برند و لوگو شرکت شما ارتقا می بخشد. حتما برای شما هم پیش آمده که صفحات بسیار زیادی در مرورگر خود باز کرده باشید و ندانید هر یک از صفحات برای چه موضوعی و از چه سایتی هستند. اما اگر صفحات این وبسایت ها دارای فایو آیکون یا FAVICON باشند، به راحتی تشخیص خواهید داد این صفحات مربوط به چه موضوع و از چه وب سایتی هستند. به عبارتی مغز ما تصاویر را زودتر از متون تجزیه و تحلیل می کند و زمانی که شما وب سایتی را جستجو می کنید با مشاهده فایوآیکون ها راحت تر و سریع تر می توانید به وب سایت مورد نظر خود دسترسی پیدا کنید.
نکته مهم دیگر در این راستا این است که فایوآیکون نقش برندسازی داشته و حرفه ای بودن وب سایت شما را نشان می دهد. می توان تاثیر فایو آیکون یا FAVICON را در طراحی لوگو و جذب مخاطب به صورت زیر طبقه بندی نمود:
تجربه کاربران: این آیکون کوچک معرف وب سایت شما بوده و باعث ارتقا تجربه کاربران از شناسایی و کاربرد وب سایت شما می شود. بدین معنا که آنها می توانند به آسانی تب (Tab) مربوط به وب سایت را در مرورگر پیدا کنند و به این ترتیب بارها به وب سایت شما سر بزنند.
برندسازی: فایوآیکون به برندسازی و معروف شدن وب سایت شما کمک می کند. شرکت های معتبر جهانی دارای فایوآیکون های قابل تشخیصی هستند که به آنها کمک می نماید تا از سایر وب سایت ها متمایز باشند.
گذشته از موارد بالا که ذکر شد برای اینکه بهتر اهمیت فایوآیکون را درک کنید لازم است با طراحی لوگو نیز آشنا شوید.

تأثیرات طراحی لوگوی فاوآیکون روی وب سایت

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

جمع بندی

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

آموزش بیشتر در کانال آپارات : www.aparat.com/amozeshisho

نویسنده و گردآورنده : محمد باغدار

amozeshisho.com

مدرس و طراح کسب وکارهای اینترنتی

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

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

همچنین ببینید
بستن
دکمه بازگشت به بالا