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

اگر در حوزه طراحی سایت و یا برندسازی فعالیت داشته باشید قطعا با فاوآیکون (Favicon) و اهمیت طراحی آن آشنایی دارید. اما فاوآیکون چیست؟ طراحی فاوآیکون چه اهمیتی دارد؟

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

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

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

در پاسخ به پرسش فاوآیکون چیست؟ در ابتدا باید بگوییم که Favicon از ترکیب دو کلمه Favourite و Icon ساخته شده است که به عنوان یکی از مهم‌ترین عناصر در طراحی و راه اندازی وب سایت‌ها شناخته می‌شود. فاوآیکون‌ها در واقع نمادهای مربعی شکل کوچک و پیکسلی هستند که در مرورگرهای وب جهت نمایش یک وب سایت یا یک صفحه مورد استفاده قرار می‌گیرند. فاوآیکون‌ها معمولا پیش از URL در نوار آدرس مرورگر، در تب‌های مرورگر و در کنار نام سایت، در لیست بوک مارک‌های (نشانک‌ها) مرورگر کاربران، نوار ابزار، صفحات نتایج موتورهای جستجو (SERP)، تاریخچه و نتایج جستجو مشاهده می‌شوند. در برخی موارد همچون Google Chrome، فاویکون‌ها حتی در صفحه اصلی مرورگر شما نیز ظاهر می شوند.

بیشتر بخوانید: طراحی سایت فروشگاهی در تهران

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

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

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

تجربه کاربری (User Experience)

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

برندسازی (Branding)

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

اعتبار (Credibility)

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

بازگشت کاربران (Return Users)

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

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

طراحی فاوآیکون چه تاثیری بر سئو سایت دارد؟

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

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

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

سوالی که اکنون ممکن است برایتان پیش آمده باشد این است که چگونه برای سایت خود Favicon بسازیم؟ اغلب وب سایت‌ها معمولا از لوگوی خود به عنوان فاوآیکون نیز استفاده می‌کنند. بنابراین شما نیز می‌توانید در صورت دارا بودن لوگوی اختصاصی برای کسب و کار یا شبکه‌های اجتماعی خود، آن را به فاوآیکون تبدیل کنید. اما فاوآیکون را در سایزی بسازیم؟ فاوآیکون باید به صورت مربع باشد و اندازه آن در حالت ایده آل 16*16 پیکسل است اما می‌توانید آن را در ابعاد بزرگ‌تر همچون 32*32 نیز طراحی کنید. با این حال برای طراحی و ساخت فاوآیکون باید مراحل زیر را طی کنید:

مرحله اول: تصویر موردنظرخود را بسازید

برای طراحی تصویر دلخواه خود به عنوان فاوآیکون می‌توانید از ویرایشگرهایی مانند Fireworks، Photoshop، Corel Paint یا یک جایگزین رایگان و متن باز مانند GIMP استفاده نمایید. همانطور که اشاره کردیم، بسیاری از شرکت‌ها به منظور ثابت ماندن هویت بصری برندشان از لوگوی خود به عنوان فاوآیکون استفاده می‌کنند. برای سهولت در ویرایش، طراحی فاوآیکون را با مربع 64*64 پیکسل شروع کنید و بعدا می‌توانید آن را به مربع 16*16پیکسل کاهش دهید. سپس باید فایل خود را با فرمت‌هایی همچون jpg، .png، .gif، bmp. یا .tif ذخیره نمایید.

مرحله دوم: تصویر خود را تبدیل کنید

پس از نهایی شدن طرح تصویر فاوآیکون خود باید آن را با فرمت favicon.ico ذخیره کنید که در واقع یک فرمت پیشنهادی است که توسط اکثر مرورگرهای وب پشتیبانی می‌شود. برای تبدیل فایل خود به فرمت ico ممکن است لازم باشد از یک ابزار آنلاین مانند iconifier.net، prodraw.net یا faviconer.com استفاده کنید. کار با این ابزارها بسیار ساده است و تنها کافی است تصویر خود را در آنها آپلود کنید، اندازه نماد را انتخاب کرده و سپس فایل جدید را با فرمت .ico دانلود نمایید.

مرحله سوم: تصویر را در وب سایت خود بارگذاری کنید

فایل .ico باید در دایرکتوری ریشه وب سایت شما آپلود شود تا در زمان مراجعه به www.yoursite.co.uk/favicon.ico تصویر آن قابل مشاهده باشد.

مرحله چهارم: کد اصلی HTML را اضافه کنید

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

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

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

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

سادگی

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

طراحی فاوآیکون

حفظ هویت برند

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

طراحی بدون متن یا با متن اندک

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

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

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

رنگ

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

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

جمع بندی

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