تعریف آیکون برای سایت

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

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

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

تعریف آیکون برای سایت

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

درج کدهای لازم در بخش Head

برای پشتیبانی از شرایط مختلف در مرورگرهای مختلف لازم است تا چند کد مختلف را به صورت همزمان در بخش Head سایت خود درج کنید:

گوگل کروم و اپرا

مرورگرهای گوگل کروم و Opera از فایل icon.png که در بزرگترین اندازه‌ی ممکن ارائه شده استفاده خواهند کرد و به صورت خودکار اگر نیاز به کاهش اندازه باشد، این کار را انجام خواهند داد. در صورت تمایل می‌تواند صفت sizes را در ابعاد ضریب ۴۸ از جمله 48×48، 96×96، 144×144، 192×192 به صورت جداگانه تهیه و یک به یک برای مرورگر مشخص نمایید.

اپل سافاری

مرورگر Apple Safari برای نمایش آیکون از عنصر link با صفت rel مساوی apple-touch-icon استفاده می‌کند. همانند آنچه در مورد گوگل کروم گفته شد، می‌توانید اندازه‌های مختلف آیکون را یک به یک ایجاد کنید و آن را به مرورگر ارسال نمایید:

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

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

 


مشاهده‌ی تمامی نوشته‌ها در گروه: طراحی سایت. ‏ فهرست برچسب‌ها: .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *