فاوآیکون چیست و چگونه برای سایت فاوآیکون بسازیم؟

اغلب کسانی که به فکر راه‌اندازی یک وب‌سایت هستند، یک نکته اصلی را که در واقع می‌تواند به یک تغییر بزرگ منجر شود نادیده می‌گیرند، فاوآیکون (Favicon) است.

فاوآیکون یا این تصویر کوچک در طراحی سایت اهمیت بسیاری دارد و بر تجربه کاربری و اعتماد کاربران سایت تاثیرگذار است. پس اهمیت آن را دست کم نگیرید.

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

favicon در واقع یک نماد کوچک 16×16 پیکسلی است که در مرورگرهای وب به‌منظور نمایش یک وب‌سایت یا یک صفحه وب استفاده می شود. به‌طور خلاصه favicon، یک آیکون یا نماد با جزئیات دلخواه است که معمولا در قسمت بالای تب مرورگر شما نمایش داده می‌شود. با این حال، آن‌ها همچنین در نوار بوکمارک مرورگر شما، تاریخچه و در نتایج جستجو و همینطور در کنار نوار آدرس (URL) قابل مشاهده هستند.

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

به‌عبارت دیگر وقتی شما یک فاوآیکون ایجاد می‌کنید این نماد در واقع برای وب‌سایت شما به‌عنوان یک آیکون یا شناسه بصری در ذهن کاربران عمل می‌کند تا آن‌ها راحت تر بتوانند در سراسر دنیای وب به وب‌سایت شما دسترسی پیدا کنند.

چرا فاوآیکون‌ها مهم هستند؟

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

• تجربه کاربری

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

آن‌ها همچنین می‌توانند تأثیر مثبتی بر روی تجربه کاربر در هنگام استفاده از تلفن همراه داشته باشند. طراحی وب برای موبایل تقریبا همه چیز را تحت تاثیر قرار می‌دهد و در بسیاری از مواقع، هیچ چیزی قدرتمندتر یا آسان‌تر از یک favicon عالی نمی‌تواند این امر را به سرانجام برساند.

• برندینگ

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

• اعتماد

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

• بازگشت کاربران

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

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

• فاوآیکون و سئو

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

نحوه ساخت فاوآیکون

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

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

دستورالعمل طراحی favicon ها

ما در بخش زیر به برخی نکات مربوط به طراحی favicon می‌پردازیم. با این حال در اینجا دستورالعمل‌های مهمی ذکر خواهند شد که شما می‌بایست آن‌ها را در نظر داشته باشید:

• اندازه‌ها

اندازه مطلوب برای ایجاد یک فاوآیکون 16×16 پیکسل است چرا که آن‌ها معمولاً در همین ابعاد نمایش داده می‌شوند. با این حال، آن‌ها می‌توانند در ابعاد بزرگ‌تر نیز به نمایش در بیایند (مثلا ۳۲x۳۲ پیکسل).  در اینجا برخی از اندازه ها و دستورالعمل های استاندارد برای زمانی که نیاز به استفاده از هر کدام دارید آورده شده است:

- ۱۶x۱۶: ابعاد favicon قابل نمایش در محیط مرورگر

- ۳۲x۳۲: ابعاد favicon برای میان‌بر در قسمت Taskbar

- ۹۶x۹۶: ابعاد favicon میان بر دسکتاپ

- 180x180: ابعاد favicon لمسی اپل

• فرمت فایل‌ها

در گذشته فرمت اصلی فاوآیکون ICO بود. امروزه فرمت فایل یا وکتور ترجیحی برای یک فاوآیکون PNG یا JPEG است. فرمت SVG یک فرمتی است که روز به روز به محبوبیت آن افزوده می‌شود چرا که از گذشته مرورگرهای بیشتری پشتیبانی از آن را آغاز کرده‌اند. مرورگرها همچنین قادر به نمایش favicon های ساخته شده به صورت GIF هستند اما اندازه کوچک‌شان باعث می‌شود تا فاوآیکون‌های GIF به سختی دیده شوند.

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

- فرمت PNG: از آنجایی که سازندگان وب‌سایت با این فرمت آشنایی بسیار زیادی دارند بنابراین PNG یک فرمت فایل محبوب برای فاوآیکون‌ها به حساب می‌آید. این فرمت به راحتی قابل ایجاد است و به‌طورکلی تصاویر و فاوآیکون‌های با کیفیتی توسط آن ساخته می‌شوند. فایل‌های PNG همچنین مزیت دیگری را در خود جای داده‌اند و آن‌ هم حجم کم است. یعنی به سرعت بارگذاری می‌شوند.

- فرمت SVG: این فایل‌ها به سبک بودن یا اصطلاحا کم‌حجم بودن معروف هستند. بزرگترین مزیت این نوع فرمت فایل‌ برای فاوآیکون‌ها، توانایی آن در ارائه تصاویر با کیفیت بسیار بالا است و این عامل باعث می‌شود تا سرعت بالا آمدن صفحه یا عملکرد سایت کاهش پیدا نکند. در گذشته، به‌دلیل عدم سازگاری مرورگر با فاوآیکون‌ها استفاده از SVG محدود شده بود اما امروزه این موضوع در حال تغییر است.

• وضوح

در صورتی که طرح شما دارای یک پس‌زمینه روشن است حتما می‌بایست فایل خود را به صورت PNG ذخیره کنید (تنظیمات شفاف‌سازی در حالت روشن قرار داشته باشند).

چند نکته اساسی اما مهم در مورد طراحی فاوآیکون‌ها

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

• سادگی

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

• هویت برند

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

• تا حد امکان، بدون متن

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

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

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

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

• رنگ

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

چگونه یک فاوآیکون را در HTML اضافه کنیم؟

اگر سایت خود را توسط یک وب بیلدر (سازنده وب‌سایت) ایجاد کرده‌اید نیازی به اضافه کردن فاوآیکون در HTML نیست. این گام صرفا در مورد سایت‌های ساخته شده توسط یک شرکت طراحی سایت می‌بایست عملی شود. در زیر نحوه وارد کردن تصویر فاوآیکون مورد نظرتان در header code به منظور نمایش آن در وب سایت آورده شده است.

کلام آخر

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