امروز بعد از مدت ها از راه اندازی سایت یادمون افتاد که از لوگو خودمون favicon بسازیم و برای قالب قرار بدیم.البته کاره خیلی ساده ای هستش اما گفتم بد نیست یک آموزش جامع هم دربارش داخل سایت قرار بدیم ، مثلا چگونه باید بسازیم ، favicon رو عوض و آپلود کنیم و همینطور کد قرار دادن اون.
favicon چیست؟
اگر دقت کرده باشید ، هر سایتی رو که باز می کنید گوشه تب اون سایت یک آیکون کوچک هستش که به عنوان favicon سایت یا وبلاگ می شناسنش مثل شکل زیر.
فرمت و سایز favicon
معمولا فرمت favicon ها ico هستش اما می شود از فرمت های دیگر مثل png و بقیه هم استفاده کرد اما توصیه بر اینه که از ico استفاده کنید و اکثر سایت ها و خوده ماهم همین کار رو می کنیم.در مورد سایز هم بیشتر ۱۶ * ۱۶ پیکسل سایز استاندارد هستش.
ساخت آنلاین favicon
شاید براتون سوال باشه که با چه برنامه ای باید درستش کرد ؟! اکثرا با فتوشاپ امتحان می کنند اما فتوشاپ فرمت ico رو ساپورت نمی کنه.برنامه های زیادی وجود داره اما راحت ترین راه استفاده از سایت های آنلاین ساخت favicon هستش بدون درده سر می تونید از امکاناتش استفاده کنید و مثلا عکس خودتونو تو اون سایت آپلود کنید یا متن دلخواه … سایز رو هم انتخاب کنید و بعد آماده دانلود کنید.
من خودم سایت زیر رو پیشنهاد می کنم برای ساخت آنلاین ، سایت ساده ای هستش اما خوبه.
کد قرار دادن favicon
باید کدهای زیر رو قبل از <head/> داخل سایت خودتون قرار بدید.
<link rel="shortcut icon" type="image/x-icon" href=".../myicon.ico" /> |
دقت کنید که کد بالا برای favicon ها با فرمت ico هستش اما اگر فرمت دیگه ای دارید مثل png باید از کد زیر استفاده کنید (اما ما همچنان ico رو توصیه می کنیم !! )
همینطور در کد بالا و این پایینی باید بجای myicon.ico/… باید آدرس جایی که آپلود کردین رو بدید.
<link rel="icon" type="image/png" href=".../myicon.png" /> |
دانلود favicon آماده
سایت هایی زیادی هستند که مجموعه با موضوعات مختلفی برای دانلود دارند من هم یکی از اون سایت ها که خوب هستش و بدون عضویت و رایگان می تونید با هر موضوعی که دوست داشتید با فرمت ico دانلود کنید.سایت زیر رو توصیه می کنم ،ساده اما خوب هستش.
از منو بالا موضوع مورد نظر خودتونو انتخاب کنید مثل Business , Network , Software , … .
تغییر favicon وردپرس
خوب خودتون استاد من هستید !! باید فایل header.php قالب وردپرس خودتونو ویرایش کنید و کد بالا را قرار بدید یا اگر فاوآیکونی هستش ، آدرس اونو عوض کنید.
سورس: پیکور دات آی آر
سایت فروش اینترنتی بی بی اس کالا