فاویکون چیست و چگونه برای وب سایت خود یکی بسازیم

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

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

فاویکون یک نماد کوچک پیکسلی ۱۶×۱۶ است که در مرورگرهای وب برای نمایش یک وب سایت یا یک صفحه وب استفاده می شود. مخفف کلمه «نماد دلخواه»، فاویکون‌ها معمولاً در برگه‌های بالای مرورگر وب نمایش داده می‌شوند، اما در نوار نشانک مرورگر، تاریخچه و در نتایج جستجو، در کنار URL صفحه نیز یافت می‌شوند.

در برخی موارد، مانند Google Chrome، فاویکون ها حتی در صفحه اصلی مرورگر شما ظاهر می شوند. به عبارت دیگر، هنگامی که یک فاویکون ایجاد می کنید، به عنوان نماد وب سایت شما یا یک شناسه بصری برای کاربران برای شناسایی وب سایت شما در سراسر وب عمل می کند.

چرا فاویکون ها اهمیت دارند

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

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

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

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

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

فاویکون و سئو

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

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

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

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

اندازه ها

اندازه بهینه برای ایجاد فاویکون ۱۶×۱۶ پیکسل است که معمولاً در آن نمایش داده می شود. با این حال، آنها می توانند در ابعاد بزرگتر نیز ظاهر شوند (مانند ۳۲×۳۲ پیکسل). اگر برای دریافت اندازه مناسب برای فاویکون خود به کمک نیاز دارید، از ابزار Wix’s Image Resizer استفاده کنید.

در اینجا برخی از اندازه های استاندارد فاویکون، و دستورالعمل هایی برای زمان نیاز به استفاده از هر کدام آورده شده است:

۱۶×۱۶: فاویکون مرورگر

۳۲×۳۲: فاویکون میانبر نوار وظیفه

۹۶×۹۶: فاویکون میانبر دسکتاپ

۱۸۰×۱۸۰: فاویکون لمسی اپل

فایل ها

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

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

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

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

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

نکاتی برای طراحی فاویکون

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

در اینجا چند نکته در مورد ایجاد فاویکون که به بهترین وجه مناسب برند و وب سایت شما باشد آورده شده است:

سادگی

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

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

هویت نام تجاری

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

برای وب سایت طراح گرافیک، فاویکون رنگی رنگین کمان ادامه همان زبان بصری رنگارنگ وب سایت آنها است. فاویکون eBay رنگ‌های برند را با یک نماد کیف خرید ادغام می‌کند و با نسخه‌ای خلاصه شده از طراحی لوگوی آن‌ها روح سایت را کاملاً تسخیر می‌کند.

متن کم و بدون متن

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

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

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

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

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

رنگ

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

نحوه اضافه کردن فاویکون در HTML

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

تست فاویکون شما

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

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

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

منبع

پیکسلر | شبکه اجتماعی برنامه نویسان