روش تعریف favicon در طراحی سایت
در هنگام طراحی سایت توجه به ویژگی‌های کاربردی و گرافیکی سایت، سبب شکل‌گیری بینش‌های متفاوت از سوی بازدیدکنندگان خواهد شد. یکی از این ویژگی‌ها که در بخش گرافیک می‌بایست مورد توجه قرار گیرد، آیکون وبسایت است.
آیکون وبسایت به صورت سنتی با نام favicon شناخته می‌شود. ولی در مرورگرها و محیط‌های جدید آیکون‌های با ابعاد بزرگتر برای استفاده‌هایی متفاوت با favicon نیز مورد نیاز هستند.
آیکون وبسایت ممکن است بسته به سیستم‌عامل و بسته به مرورگر به کار رفته در محل‌های مختلفی از جمله در کنار عنوان سایت در بخش Tabها، در هنگام تغییر دادن Tabهای مرورگر، برگه‌ی وبسایتهای تازه دیده شده، آیکون‌های کاشی در اینترنتی اکسپلورر و صفحه‌ی اصلی مرورگر برای انتخاب سایت‌های پربازدید مورد استفاده قرار گیرد.
تعریف تصاویر با کیفیت مناسب برای هر یک از کاربردهای فوق سبب می‌شود کاربران در هنگام استفاده از مرورگر و در هنگام مراجعات بعدی، سایت شما را آسان‌تر بیابند و در نتیجه تجربه کاربری بهتری را کسب کنند.
درج کدهای لازم در بخش Head
برای پشتیبانی از شرایط مختلف در مرورگرهای مختلف لازم است تا چند کد مختلف را به صورت همزمان در بخش Head سایت خود درج کنید:
|
1 2 3 4 5 6 7 8 |
<!-- آیکون با بزرگترین اندازه ممکن برای کروم --> <link rel="icon" sizes="192x192" href="icon.png"> <!-- آیکون برای مرورگر سافاری --> <link rel="apple-touch-icon" href="icon.png"> <!-- آیکون کاشی برای اینترنت اکسپلورر --> <meta name="msapplication-square310x310logo" content="icon_ie.png"> |
گوگل کروم و اپرا
مرورگرهای گوگل کروم و Opera از فایل icon.png که در بزرگترین اندازه‌ی ممکن ارائه شده استفاده خواهند کرد و به صورت خودکار اگر نیاز به کاهش اندازه باشد، این کار را انجام خواهند داد. در صورت تمایل می‌تواند صفت sizes را در ابعاد ضریب ۴۸ از جمله 48x48، 96x96، 144x144، 192x192 به صورت جداگانه تهیه و یک به یک برای مرورگر مشخص نمایید.
اپل سافاری
مرورگر Apple Safari برای نمایش آیکون از عنصر link با صفت rel مساوی apple-touch-icon استفاده می‌کند. همانند آنچه در مورد گوگل کروم گفته شد، می‌توانید اندازه‌های مختلف آیکون را یک به یک ایجاد کنید و آن را به مرورگر ارسال نمایید:
|
1 2 3 4 |
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> |
اینترنت اکسپلورر و ویندوز فون
IE و ویندوز فون جدید قابلیت نمایش آیکون سایت‌ها به صورت کاشی را دارا هستند. آیکون‌های مورد استفاده می‌توانند به صورت جداگانه در اندازه‌های مختلف برای مرورگر تعیین شوند:
|
1 2 3 |
<meta name="msapplication-square70x70logo" content="icon_smalltile.png"> <meta name="msapplication-square150x150logo" content="icon_mediumtile.png"> <meta name="msapplication-wide310x150logo" content="icon_widetile.png"> |