اگه توی مرورگرتون توجه کرده باشید، هر سایتی برای خودش یه آیکن منحصر به فرد داره. و خب خیلی مهمه برای برندش و اینکه راحت پیداش کنیم توی تب های متعدد مرورگر. همچین وقتی بوکمارک میشه اون عکس رو نشون میده.
به این آیکن اصطلاحا میگن favicon که مخفف favorites icon هست. البته اسم های دیگه ای هم بهش میگن مثل
browser icon, favorite icon, shortcut icon, tab icon, URL icon, bookmark icon
ولی خب معروف ترینش همین favicon هست که تاریخچه ش به اینترنت اکسپلورر خدابیامرز برمیگرده.
مرورگر انتظار داره که همه وب سایت ها این عکس رو داشته باشند و پیش فرض شروع میکنه به لود کردنش.
این عکس میتونه png یا ico یا svg باشه و باید سایز کوچکی داشته باشه.
نکته ico که فرمت فایل مایکروسافتی هست که معروف شده، این هست که در واقع شامل چندین فایل داخل خودش هست و مرورگر بسته به نیاز هر سایزی که بخواد رو انتخاب میکنه. معمولا سایزهای استاندارد شامل 16x16, 32x32, 48x48 pixels هستند.
فرمت png باکیفیت تر از ico هست، ولی یک فایل رو شما میتونی معرفی کنی و خب توی سایزها و کاربردهای مختلف نمیتونی بهینه ش کنی.
فرمت svg یک فرمت بُرداری یا verctor هست و معنیش اینه که در هر سایزی بخوایم میتونیم بدون افت کیفیت بزرگش کنیم. فقط چون نسبتا جدید محسوب میشه، ممکنه مرورگرهای قدیمی پشتیبانی نکنن.
اگر ما هم بخواهیم برای سایتمون بسازیم باید چکار کنیم؟
ابزارهای آنلاین زیادی هستند که به شما در ساخت این فایل کمک میکنند. اگر در گوگل عبارت favicon online generator رو جستجو کنید، سایت های زیادی رو میبینید و اکثرا رایگان هستند.
چجوری favicon رو به سایتم اضافه کنم؟
به طور پیش فرض مرورگر سعی میکنه عکس favicon.ico رو از ریشه سایت دانلود کنه. یعنی اگه سایت شما آدرسش abooraja.ir باشه، مرورگر انتظار داره توی آدرس abooraja.ir/favicon.ico یه آیکن پیدا کنه.
مگر اینکه آدرسش رو سفارشی کرده باشید و بگین از فلان جا بخون.
اگر بخوام آدرس favicon رو سفارشی کنم چکار کنم؟
اگر بخوایم به مروگر آدرس متفاوت از رفتار پیش فرض خودش بدیم، باید توی head به فرمت زیر آدرس جدید رو معرفی کنیم.
<head> <link rel='shortcut icon' href='/images/favicon.ico' type='image/x-icon'> </head>
در کد بالا ما به مرورگر اعلام میکنیم که از پوشه images این فایل رو دانلود کن.
البته درنظر داشته باشید که عکس favicon میتونه ico یا png باشه. پس باید حواسمون به اسم فایلمون باشه و پسوندش رو درست وارد کنیم.
یه وقتایی نشون نمیده؟ مشکل داره یا چی؟
بعضی مرورگرها روی لوکال که در حال توسعه هستید، ممکنه نشون ندن. حواستون به این نکته باشه.
یا ممکنه عکس کش شده از زمانی که عوض کردین یا جدید قرارش دادین. برای رفع این مشکل بهتره کش مرورگر رو عوض کنید یا یه آدرس جدید بدین. همچنین میتونین یه کوئری استرینگ الکی به انتهای آدرس عکس اضافه کنید تا مرورگر مجدد دانلودش کنه و شامل کش نشه.
<link rel='shortcut icon' href='/favicon.png?v=1' type='image/x-icon'>
اون ?v1 آخر آدرس باعث میشه آدرس جدید بشه و مرورگر دوباره دانلودش کنه.
آیا favicon از نظر سئو مهمه؟
البته که مهمه. بعضی چیزها پایه ای هستند و نبودنش باعث مشکل میشه، اما بودنشون حداقلی هست. بنظر من این موضوع جزو این موارده. غیر از اینکه برای ظاهر سایت و راحتی کاربر و برندینگ حتما باید بذاریم.
