امروز بعد از مدت ها از راه اندازی سایت یادمون افتاد که از لوگو خودمون favicon بسازیم و برای قالب قرار بدیم.البته کاره خیلی ساده ای هستش اما گفتم بد نیست یک آموزش جامع هم دربارش  داخل سایت قرار بدیم ، مثلا چگونه  باید بسازیم ، favicon رو عوض و آپلود کنیم و همینطور کد قرار دادن اون.

آموزش تغییر و ساخت favicon

favicon چیست؟

اگر دقت کرده باشید ، هر سایتی رو که باز می کنید گوشه تب اون سایت یک آیکون کوچک هستش که به عنوان favicon سایت یا وبلاگ می شناسنش مثل شکل زیر.

favicon چیست ؟

فرمت و سایز  favicon

معمولا فرمت favicon ها ico هستش اما می شود از فرمت های دیگر مثل png و بقیه هم استفاده کرد اما توصیه بر اینه که از ico استفاده کنید و اکثر سایت ها و خوده ماهم همین کار رو می کنیم.در مورد سایز هم بیشتر ۱۶ * ۱۶ پیکسل سایز استاندارد هستش.

ساخت آنلاین favicon

شاید براتون سوال باشه که با چه برنامه ای باید درستش کرد ؟! اکثرا با فتوشاپ امتحان می کنند اما فتوشاپ فرمت ico رو ساپورت نمی کنه.برنامه های زیادی وجود داره اما راحت ترین راه استفاده از سایت های آنلاین ساخت favicon هستش بدون درده سر می تونید از امکاناتش استفاده کنید و مثلا عکس خودتونو تو اون سایت آپلود کنید یا متن دلخواه … سایز رو هم انتخاب کنید و بعد آماده دانلود کنید.

من خودم سایت زیر رو پیشنهاد می کنم برای ساخت آنلاین ، سایت ساده ای هستش اما خوبه.

www.favicon-generator.org

کد قرار دادن 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 دانلود کنید.سایت زیر رو توصیه می کنم ،ساده اما خوب هستش.

www.freefavicon.com

از منو بالا موضوع مورد نظر خودتونو انتخاب کنید مثل  Business , Network , Software , … .

تغییر favicon وردپرس

خوب خودتون استاد من هستید !! باید فایل header.php قالب وردپرس خودتونو ویرایش کنید و کد بالا را قرار بدید یا اگر فاوآیکونی هستش ، آدرس اونو عوض کنید.

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 7 رای
Loading...