روش تعریف favicon در طراحی سایت

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

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

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

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

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

گوگل کروم

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

اپل سافاری

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