آنچه در این مقاله خواهیم آموخت :
- فاو ایکون چیست؟
- چرا داشتن فاو ایکون مهم است؟
- چگونه یک فاو ایکون ایجاد کنیم؟
سایز بندی مناسب فاو ایکون
فرمت مناسب فاو ایکون
نکاتی برای ایجاد یک فاو ایکون موفق - چگونه یک فاو ایکون به سایت خود اضافه کنیم؟
افزودن فاو ایکون به سایت در وردپرس
افزودن فاو ایکون به سایت در Weebly
افزودن فاو ایکون به سایت، به روش کلاسیک
فاو ایکون چیست؟
فاویکون یک نماد و ایکون کوچک از ۱۶×۱۶ پیکسل است که وظیفه دارد وب سایت شما را نشان دهد. این تصویر کوچکی است که می توانید در هر برگه مرورگر وب ببینید که به شما امکان می دهد وقتی چندین برگه باز دارید راه خود را راحت تر پیدا کنید.
و اگر شما هم مثل ما هستید، همیشه تعداد زیادی از آنها را باز دارید! مثال مورد نظر :
در حالی که فاویکونها اغلب در برگههای باز نمایش داده میشوند، اما در بسیاری از زمینههای دیگر از جمله نوار نشانکها، سابقه مرورگر و نتایج جستجوی Google در تلفن همراه استفاده میشوند.
چرا داشتن فاو ایکون مهم است؟
آنها ممکن است کوچک باشند، اما اهمیت فاو ایکون برای یک وب سایت را نادیده نگیرید. در واقع، آنها برای بهبود تجربه کاربری (UX) ضروری هستند، جنبهای که قطعاً ارزش توجه شما را دارد زیرا میدانید یک تجربه کاربری استراتژیک این پتانسیل را دارد که نرخ تبدیل را تا ۴۰۰% افزایش دهد. همانطور که در بالا دیدیم، هنگامی که یک بازدیدکننده چندین تب باز دارد، داشتن یک فاو ایکون، یافتن برگه مربوط به وب سایت شما را برای او آسان تر می کند.
نه تنها این، یک فاو ایکون همچنین بخشی از هویت بصری شما است، زیرا به صورت بصری نشان دهنده سایت، نام تجاری و/یا کسب و کار شما است. با ایجاد یک وب سایت حرفه ای تر، اعتبار را نسبت به مخاطبان هدف خود افزایش خواهید داد. افزودن فاو ایکون به شما برتری قابل توجهی نسبت به وب سایت هایی می دهد که از آن استفاده نمی کنند.
چگونه یک فاو ایکون ایجاد کنیم؟
اگر فکر میکنید لوگو یا بخشی از لوگوی شما به عنوان فاو ایکون کار میکند، فقط باید اندازه آن را تغییر دهید و تادا: شما یک فاو ایکون برای خود دارید! مانند مورد لوگوی WHC (از بخش “کره” لوگوی خود استفاده کرده اند که به زیبایی کار می کند زیرا به راحتی قابل تشخیص است). اگر لوگوی موجود شما بیش از حد دقیق است، یا به نظر می رسد درست به عنوان یک فاو ایکون نیست، در اینجا سه راه آسان برای ایجاد لوگو وجود دارد:
- برای مثال از طریق پلتفرمی مانند Fiverr یک طراح گرافیک حرفه ای پیدا کنید تا برای شما طراحی کند
- از یک فاو ایکون بدون مجوز استفاده کنید که می توانید آن را در Flaticon یا Shutterstock پیدا کنید
- یا، خودتان یک فاو ایکون با استفاده از ابزارهای آنلاین مانند favicon.io، Canva یا نرم افزار طراحی مورد علاقه خود طراحی کنید
سایز بندی مناسب فاو ایکون
اندازه استاندارد استفاده شده توسط مرورگرهای وب ۱۶×۱۶ پیکسل است. با این حال، در صفحههای با رزولوشن بالا، فاو ایکون شما ممکن است پیکسلی به نظر برسد، بنابراین ترجیح داده میشود حداقل اندازه آن را دو برابر کنید و به ۳۲×۳۲ پیکسل بدهید. توجه داشته باشید که برخی از پلتفرمها برای اندازهگیری الزامات خاصی دارند، به عنوان مثال وردپرس به حداقل اندازه ۵۱۲ در ۵۱۲ پیکسل نیاز دارد.
فرمت مناسب فاو ایکون
یک فاو ایکون که در ابتدا توسط مرورگر اینترنت اکسپلورر مایکروسافت معرفی شد، باید در قالب ویندوز ICO باشد و باید favicon.ico نامیده میشد. اکنون می توان از چندین فرمت استفاده کرد، اما در اینجا اصلی ترین آنها وجود دارد:
- Windows ICO: فرمت ICO فرمت اصلی است اما برای ایجاد آن نیاز به استفاده از مبدل تصویر دارد
- PNG: فرمت PNG بیشترین مزیت را در پشتیبانی از شفافیت و داشتن کوچکترین اندازه فایل ممکن دارد
- JPG: مطمئناً این بهترین فرمت تصویر شناخته شده است، اما متأسفانه کیفیت وضوح پایین تری نسبت به PNG دارد و به شما اجازه نمی دهد که یک فاو ایکون شفاف داشته باشید (بنابراین فاو ایکون شما باید یک مربع باشد)
نکاتی برای ایجاد یک فاو ایکون موفق
به همان اندازه که یک فاو ایکون کوچک است، قبل از شروع ساختن فاو ایکون، باید چند نکته را در نظر بگیرید تا از آن نهایت استفاده را ببرید:
- آن را ساده نگه دارید
favicon به دلیل اندازه کوچکش باید ساده نگه داشته شود. بنابراین باید از طراحی پیچیده پر از جزئیات اجتناب کنید زیرا خواندن و به خاطر سپردن نماد شما را دشوار می کند.
- از هویت بصری خود استفاده کنید
فاو ایکون شما نشان دهنده برند شماست و به این ترتیب باید هویت شرکت شما را منعکس کند. شما می توانید از کل لوگوی خود یا بخشی از آن در صورت مناسب بودن استفاده کنید. به عنوان مثال، فاو ایکون گوگل یک G را با ۴ رنگ مشخص نشان می دهد که در اکثر محصولات و خدمات آن یافت می شود. همانطور که برای یوتیوب، فقط از دکمه پخش قرمز موجود در لوگو استفاده می کند که تقریباً برای همه افراد روی زمین به راحتی قابل تشخیص است. - حالت تاریک یا دارک مود را نیز در نظر بگیرید
مرورگرها و سیستم عامل های بیشتری از حالت تاریک پشتیبانی می کنند و نوار برگه را به جای خاکستری روشن تیره می کنند. این جزئیاتی است که باید هنگام طراحی فاو ایکون خود به آن توجه کنید، زیرا برای مثال، اگر بخواهید یک W سیاه روی یک پس زمینه شفاف نمایش دهید، کاربران برای دیدن فاو ایکون شما در حالت تاریک با مشکل مواجه خواهند شد. اگر باید یک حرف یا نماد سیاه داشته باشید، درست مانند ویکیپدیا، یک پسزمینه سفید اضافه کنید.
چگونه یک فاو ایکون به سایت خود اضافه کنیم؟
روش افزودن فاو ایکون بسته به پلتفرمی که برای مدیریت وب سایت خود استفاده می کنید متفاوت خواهد بود. بیایید به ۳ احتمال اصلی نگاه کنیم:
افزودن فاو ایکون به سایت در وردپرس
از وردپرس ۴.۳، شما این امکان را دارید که فاو ایکون خود را از رابط مدیریت وردپرس اضافه کنید.
- به داشبورد وردپرس خود متصل شوید
- روی نمایش – سفارشی سازی کلیک کنید و هویت سایت را در نوار کناری سمت راست انتخاب کنید
- در بخش نمادک سایت می توانید تصویر faveicon خود را انتخاب کنید. فراموش نکنید که برای اعمال تغییرات خود، روی دکمه آبی «انتشار» در بالا کلیک کنید!
افزودن فاو ایکون به سایت در Weebly
برنامههای Weebly Starter، Pro و Enterprise به شما امکان میدهند فاو ایکون خود را سفارشی کنید.
- به Weebly Site Builder خود متصل شوید
- روی Settings and General کلیک کنید
- در قسمت Favicon شما این امکان را خواهید داشت که با کلیک بر روی دکمه آپلود تصویر فاو ایکون خود را انتخاب کنید. مثل همیشه فراموش نکنید که تغییرات خود را ذخیره کنید!
افزودن فاو ایکون به سایت، به روش کلاسیک
اگر میدانید چگونه از طریق FTP به فایلهای سایت خود متصل شوید، یا اگر از مدیریت فایل سی پنل راحت هستید، اضافه کردن فاو ایکون به سایت خود با استفاده از یکی از این دو روش بسیار آسان است:
- با استفاده از favicon.ico
اکثر مرورگرهای وب به طور خودکار فایل favicon.ico را که در ریشه وب سایت شما قرار داده شده است، بدون نیاز به تعیین چیزی در فایل های شما تشخیص می دهند. فقط مطمئن شوید که تصویر شما مربع است و به درستی نامگذاری شده است، سپس فایل را در ریشه وبسایت خود آپلود کنید (این پوشه معمولا public_html نام دارد). - اصلاح کد HTML
این روش به درک خوبی از HTML نیاز دارد، اما اگر این روش را دنبال کنید به راحتی قابل انجام است:
یک فاو ایکون بسازید و با فرمت دلخواه مثلا PNG ذخیره کنید و نام آن را favicon.png بگذارید.
فایل PNG خود را در وب سایت خود آپلود کنید، ترجیحاً در ریشه وب سایت خود
کد زیر را در تمام صفحات وب سایت خود بین تگ های <head></head> اضافه کنید:<link rel="icon" type="image/png" href="favicon.png">
و تمام! دفعه بعد که سعی کردید صفحه ای را در بین ۵۴ برگه باز مرورگر خود پیدا کنید، می توانید این عنصر کوچک را با نام آن صدا کنید: فاو ایکون.
اکنون میدانید که چرا همه وبسایتها باید نمادک سایت کوچک (و در عین حال قدرتمند!) خود را داشته باشند. تاثیری که این مینی افزودنی میتواند بر وبسایت شما داشته باشد، قابل توجه است، نه اینکه به بهبود تجربه بازدیدکنندگان و افزایش تصویر برند شما اشاره کنیم. با این حال، ایجاد یکی از آن ها بسیار آسان است، بنابراین هیچ بهانه ای برای نداشتن آن وجود ندارد. اگر از ابتدا لوگوی خود را دارید، ممکن است چند دقیقه طول بکشد تا چند ساعت طول بکشد. اما، به نظر حقیر ما، این زمان به خوبی صرف شده است.
پس چرا بیشتر صبر کنیم؟ فوراً شروع به ایجاد favicon خود کنید! بازدیدکنندگان شما منتظر هستند…
یکی دیگر از مجموعه آموزش های وردپرس به اتمام رسید. امیدواریم این آموزش به جهت یادگیری فاو ایکون چیست و چگونه آن را بسازیم؟ برای شما عزیزان مفید واقع شده باشد؛ اگر شما نیز راهکار یا ترفندی برای نحوه ایجاد favicon برای سایت به روشی آسانتر بلدید میتوانید آن را در بخش کامنت ها مطرح کنید تا با نام شما این مقاله بروزرسانی گردد؛ همچنین ممکن است مقاله های دسته بندی آموزش های سئو و بهینه سازی نیز برای شما کاربردی و مفید باشد.