تفکر طراحی سایت و فروشگاه اینترنتی

15.09.15

یک فاویکون که مدت کوتاهی برای آیکون مورد علاقه است، یک نماد کوچک است که در زبانه وب سایت خود در مرورگر قرار دارد.

 

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

 

آیکون های مبتنی بر SVG در طراحی سایت و اپ موبایل

در آخرین نسخه Safari، که بخشی از OS X El Capitan اپل است، Safari اجازه می دهد وبسایت ها را به طرف چپ tabbar متصل کند. آنها فقط به عنوان عناصر خاکستری بدون هیچ گونه برچسب متن نمایش داده می شوند. این نیاز به یک آیکون به خوبی طراحی شده و کاهش یافته را افزایش می دهد. برای این مورد استفاده از Safari نیاز به یک فایل SVG یکپارچه در تصویر آیکون دارد. این را می توان با قطعه کد زیر تعبیه کرد:

<link rel = "icon" sizes = "any" mask href = "iconname.svg">

من کاملا مطمئنم که فرمت فایل SVG آینده از favicons را به عنوان قطعنامه نمایش می دهد به 4K و بالاتر.

بزرگتر از 16 پیکسل

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

<link rel = "apple-touch-icon" href = "https://www.digitalgarden.com.au/apple-touch-icon.png">

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

پیش نمایش را در نظر بگیرید

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

آن را ساده نگه دارید

اگر یک بوم از 16 تا 16 نقطه و یا حتی 57 با 57 نقطه برای آیکون های بزرگتر سافاری وجود داشته باشد، شما باید چیزها را بسیار ساده نگه دارید. لوگو باید به یک نماد بسیار اساسی تبدیل شود. از آنجا که مرورگرها اغلب از رنگ های خاکستری برای طراحی UI خود استفاده می کنند، توصیه می شود از این رنگ ها در favicons ها اجتناب کنید تا آنها را قابل تشخیص نگه دارید.

از عنوان و رنگ خود آگاهی داشته باشید

با آخرین نسخه سافاری، اپل تصمیم گرفت از شر آن چشم اندازهای کوچک 16px در نوار تب خود خلاص شود تا طرح طراحی خود را پاک کنند. این اهمیت یک عنوان <title> را افزایش می دهد که به راحتی می شود و به دنبال قاعده ساده "اولین چیزها برای اولین بار" است. با Android Lollipop Google گوگل را قادر می سازد مدیران وب را با تغییر نام متا تگ های زیر در کد منبع خود تغییر دهند.

<meta name = "theme-color" content = "# 33363b">

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

 

وردپرس 4.3 "بیلی"

با آخرین نسخه از وردپرس توانایی اضافه کردن آیکون های خاص در چندین اندازه اضافه شده است. بنابراین حتی صفحات کوچکتر در 2015 برای فاویکون آماده هستند.