حتما تا به امروز بارها دیده اید که در حالت عادی وقتی وارد سایتی می شوید، یک آیکون کوچک نیز در بالای مرورگر در کنار عنوان و نام سایت مورد نظر نمایش داده می شود. اگر می خواهید بدانید چگونه می توانید چنین تصویری را برای سایت خود تعریف کنید، کافیست در آموزش امروز با ما همراه باشید. در ادامه وردپرس پرو توضیحاتی در مورد این تصویر به نام فاویکون در اختیار شما قرار می دهد و سپس نحوه ایجاد و قرار دادن فاویکون در هر نوع سایتی اعم از سایت های استاتیک، سایت های وردپرسی و غیره را مورد بحث قرار می دهد.
آنچه در این مقاله می خوانید:
فاویکون چیست و چه کاربردی دارد؟
اگر به تازگی با اصطلاح فاویکون آشنا شده اید، بهتر است ابتدا با تلفظ صحیح آن آشنا شوید. این کلمه به صورت ف (مانند fondoc) – ve (مانند ویرایش) – kan (مانند کانادا) تلفظ می شود. کلمه فاویکون از دو کلمه “favorite” به معنای “مورد علاقه” و “آیکون” گرفته شده است که با آنها آشنا هستید. فاویکون در واقع تصویری است که یک سایت را نشان می دهد و به همین دلیل به آیکون میانبر، نماد نشانک و غیره نیز معروف است. اندازه فاویکون به طور کلی ۱۶×۱۶ پیکسل است. زمانی که سایتی فاویکون داشته باشد، مرورگر بسته به نوع مرورگر، این نماد را در کنار آدرس سایت، در کنار عنوان سایت، در سربرگ هر تب و … نمایش می دهد. به عنوان مثال، اگر به تصویر ابتدای این مقاله نگاهی بیندازید، می بینید که یک فاویکون با فلش در بالای تصویر مرورگر مشخص شده است. فاویکونی که برای سایت خود انتخاب می کنید می تواند در یکی از فرمت های ico, png, gif, jpg, svg, apng باشد. از بین این فرمت ها، سه فرمت ico، png و gif توسط تمامی مرورگرها پشتیبانی می شود. بنابراین توصیه می شود از هر یک از این سه فرمت استفاده کنید. همچنین در صورتی که از تصویر متحرک گیف به عنوان فاویکون استفاده می کنید باید توجه داشته باشید که نمایش فریم های تصاویر متحرک در برخی از مرورگرها به درستی پشتیبانی نمی شود و در این صورت تصویر به صورت ایستا نمایش داده می شود.
چگونه فاویکون ایجاد کنیم؟
اگر از قبل تصویری را که می خواهید به عنوان فاویکون سایت خود استفاده کنید دارید، تنها کاری که باید انجام دهید این است که اندازه تصویر را به 16 در 16 پیکسل تغییر دهید و مطمئن شوید که تصویر دارای یکی از فرمت های زیر است: ico، png یا gif. اگر ابزار مناسبی در رایانه خود برای تبدیل اندازه تصویر مورد نظر ندارید، می توانید از ابزار آنلاینی مانند image.online-convert.com استفاده کنید. با استفاده از این سایت می توانید فرمت های مختلف تصاویر را به راحتی به یکدیگر تبدیل کرده و اندازه آنها را به ابعاد دلخواه تغییر دهید. اما اگر از قبل تصویر مورد نظر خود را ندارید و می خواهید خودتان یک تصویر یا لوگوی جدید به عنوان فاویکون ایجاد کنید. سایت خود را طراحی کنید، بهترین کار استفاده از سایت بسیار مفید Favicon.cc است. با استفاده از این سایت می توانید تصویر مورد نظر خود را تا حد امکان کامل طراحی کنید و نتیجه کار را به صورت فاویکون در بالای تب مرورگر مشاهده کنید. همچنین این سایت به شما این امکان را می دهد که تصویر مورد نظر خود را برای ویرایش وارد کنید یا از فاویکون هایی که قبلا توسط سایر کاربران ایجاد شده است استفاده کنید. پس از اتمام کار، تصویر ایجاد شده را در رایانه خود دانلود کنید تا در مراحل بعدی آموزش از آن استفاده کنید.
چگونه Faicon را برای سایت خود تنظیم کنیم؟
برای قرار دادن فاویکون در سایت خود می توانید از یکی از 4 روش زیر استفاده کنید:روش 1: داشتن یک نماد برای سایتی مانند این بسیار ساده تر است. در این روش تنها کاری که باید انجام دهید این است که تصویر مورد نظر خود را با سایز 16*16 پیکسل و فرمت ico در روت سایت خود قرار دهید. در این صورت تمامی مرورگرها آیکون مورد نظر را بارگذاری کرده و در کنار عنوان سایت (یا هر قسمت دیگری که این آیکون را نمایش می دهد) بدون هیچ کار اضافی نمایش داده می شود. این روش را می توان در همه سایت ها، از هر نوع برنامه نویسی یا CMS که استفاده می کنید، استفاده کرد.روش 2: روش دوم مانند روش اول محدود به نوع خاصی از سایت نیست و در تمامی سایت ها چه سایت های ثابت و چه سایت هایی با استفاده از CMS های مختلف قابل استفاده است. در این روش کافی است ابتدا فاویکون مورد نظر خود را در هاست خود آپلود کنید و سپس کد زیر را به سایت خود اضافه کنید.
در تگ وارد کنید:< پیوند مربوط،“آیکون میانبر” href،“http://example.com/myicon.ico” ، |
در کد بالا باید آدرس فاویکون خود را به جای http://example.com/myicon.ico وارد کنید. همچنین اگر فاویکون شما با فرمت GIF است، می توانید از کد زیر استفاده کنید:
< پیوند مربوط،آیکون نوع،“تصویر/گیف” href،“http://example.com/image.gif” ، |
و در صورت استفاده از فاویکون با فرمت png با کد زیر:
< پیوند مربوط،آیکون نوع،“تصویر/png” href،“http://example.com/image.png” ، |
راه سوم: این روش برای سایت های وردپرسی که قسمتی برای قرار دادن آیکون در پنل تنظیمات قالب سایت دارند مناسب است. در این صورت کافی است به پنل تنظیمات قالب خود مراجعه کرده، تصویر مورد نظر را آپلود کرده و به عنوان فاویکون سایت انتخاب کنید. تنظیمات مربوط به فاویکون ها معمولا باید در قسمت General یا Appearance پنل تنظیمات قرار داده شوند. بدیهی است که این بخش باید در هر پنل به روشی خاص و در قسمت خاصی قرار گیرد، اما می توانید از تصویر زیر به عنوان راهنما استفاده کنید:
راه چهارم: از این روش فقط در وردپرس 4.3 و بالاتر می توانید استفاده کنید. در این صورت کافی است از منوی Display به زیر منوی Customization مراجعه کنید. سپس به تب و بخش Site Identity بروید نماد سایت بر روی آپلود فایل کلیک کنید.
سپس از بین فایل های رسانه ای موجود تصویر مورد نظر را انتخاب کنید و یا در صورت نیاز فاویکون یا آیکون مورد نظر خود را آپلود کنید تا در سایت قرار گیرد با این روش ساده اکنون یک فاویکون نیز در وب سایت خود دارید. امیدواریم از آموزش امروز لذت برده باشید