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

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

اگر به تازگی با واژه ی Favicon آشنایی پیدا کرده اید، بهتر است که ابتدا با تلفظ صحیح آن آشنا شوید. این کلمه را به صورت فَـ (مثل فندوق) – وی (مثل ویرایش) – کان (مثل کانادا) تلفظ میکنند. کلمه Favicon از ترکیب دو کلمه ی Favorite به معنای مورد علاقه و icon که با معنی آن آشنا هستید ایجاد شده است. Favicon در واقع تصویری است که نماینده ی یک سایت است و به همین جهت از آن به عنوان آیکن میانبر، آیکن بوکمارک و … هم یاد میکنند. اندازه ی Favicon عموما 16 در 16 پیکسل است. وقتی یک سایت دارای فَویکان باشد، مرورگر ها، بسته به نوع مرورگر، این آیکن را در کنار آدرس سایت، در سربرگ هر تب در کنار عنوان سایت و … به نمایش در خواهند آورد. برای نمونه، اگر همین حالا به تصویر ابتدای این نوشته سری بزنید، خواهید دید که یک favicon در بالای تصویر مرورگر با فلش برایتان مشخص شده است. Favicon ای که برای سایتتان انتخاب میکنید میتواند دارای یکی از فرمت های ico, png, gif, jpg, svg, apng باشد. از میان این فرمت ها، سه فرمت ico, png و gif توسط کلیه ی مرورگر ها ساپورت میشوند. بنابراین توصیه میشود از یکی از این سه فرمت استفاده کنید. همچنین در صورت استفاده از تصویر gif متحرک به عنوان Favicon باید در نظر داشته باشید که نمایش فریم های تصویر متحرک در برخی از مرورگر ها به درستی ساپورت نمیشود و در این حالت تصویر به صورت ثابت به نمایش در خواهد آمد.

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

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

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

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

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

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

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

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

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

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

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