فاوآیکون (Favicon) چیست؟

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

فاوآیکون یک آیکون کوچک با اندازه‌ی 16×16 پیکسل است که در مرورگر های وب برای نمایش وب سایت یا صفحه‌ی وب قرار داده می شود. این کلمه کوتاه شده‌ی عبارت “Favorite Icon” است. فاوآیکون ها بیشتر روی تب ها در بالای مرورگر وب نمایش داده می شوند، اما می توانید آنها در نوار بوک مارک ها، History مرورگر و جاهای دیگر هم ببینید. در بعضی موارد، مانند گوگل کروم حتی می توانید آنها را در صفحه‌ی خانه‌ی مرورگر خود ببینید. به عبارت دیگر، فاوآیکون نشانگر آیکون وب سایت شماست، یا نمادی تصویری که وظیفه‌ی معرفی وب سایت شما در فضای اینترنت را دارد.

تاریخچه مختصری از Favicon

برای اولین بار در IE 5 امکان استفاده از Favicon در دسترس کاربران قرار گرفت. در واقع Favicon یک آیکون 16 پیکسلی در کنار آدرس URL وب سایت است که در هنگام Bookmark شدن یا اضافه شدن آدرس سایت مورد نظر در مرورگر این آیکون نیز در کنار آدرس در نوار Bookmark ذخیره میشود تا در هنگام پیدا کردن آدرس سایت در پنجره Bookmark این کار راحت تر صورت بگیرد و نوعی تابلو اعلان ساده و مختصر برای معرفی و ماندگار شدن آدرس سایت در ذهن مخاطبین به شمار میرود. به دلیل جذابیت بیش از حد این ایده در زمانی کوتاه در اکثر مرورگرهای دیگر نیز پشتیبانی از این ویژگی جدید صورت گرفت.

اهمیت استفاده از فاوآیکن

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

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

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

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

سادگی:

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

هویت برند:

یک فاوآیکون باید نشان دهنده‌ی هویت وب سایت و برند شما باشد و همان زبان تصویری و تم رنگی باقی وب سایت شما را نشان دهد.

بدون نوشته یا با نوشته‌ی کم:

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

استفاده از لوگو:

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

رنگ:

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

دلایل استفاده از فاوآیکون و قراردادن فاوآیکون در وردپرس

استفاده از فاوآیکون ها چند دلیل دارد که در ادامه دلایل رو لیست کرده ایم:

• بهتر دیده شدن سایت از نظر مخاطب
• حرفه ای جلوه دادن سایت در نظر مخاطب
• راحت پیدا کردن سایت شما توسط فاوآیکون سایت
• رتبه بالاتر در سایت های بنچ مارک های سئو

چگونه فاوآیکن طراحی کنیم؟

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

لذا در گام اول در برنامه گرافیکی فتوشاپ (Adobe Photoshop) یا سایر برنامه های گرافیکی مانند Inkscape آیکنی ترجیحا در ابعاد 228*228 پیکسل و عمق 32 بیت با طراحی دلخواه و با فرمت png می سازیم، باید سعی کنیم تا حد امکان از ترکیب چند رنگ با قابلیت تمایز مناسب استفاده کنیم.

به طور مثال :

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

سپس از تصویرمان با فرمت png خروجی گرفته و فایل را وارد برنامه سازنده آیکن می کنیم و با اندازه 16*16 پیکسل و ترجیحا با استاندارد رنگی True Colors از آن خروجی ico می گیریم، در گام آخر فایل خروجی را در سروری آنلاین یا در فضای سایت خود آپلود و آدرس آن را در تگ link جایگزین کرده و کد را در قسمت head صفحه و بین کدهای HTML قالب قرار می دهیم.