در این تاپیک از انجمن تخصصی علوم کامپیوتر و هنرهای دیجیتال سه سایت بسیار جالب در زمینه ساخت فاوآیکون favicon و تبدیل عکس به آیکن برای سایت را معرفی خواهیم کرد
اما فاوآیکون favicon چیست ؟
لوگو یا عکس کوچکی است که در بالای پنجره مرورگر کنار نام سایت به نمایش درمیاد در واقع مخفف کلمه انگلیسی (favorite + icon) به معنی آیکون موردعلاقه می باشد . در واقع وجود این عکس و لوگو در وب سایت هایی که طراحی می کنیم باعث میشه که چهره ی سایت ما در نظر مخاطب بهتر جلوه کنه و سایت رو زیباتر میکنه.
سایت اول که میخواهیم معرفی کنیم*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* هستش
ابتدا به سایت مراجعه کنید : *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
از بخش سمت راست (color picker) می تونیم رنگ وابزار را انتخاب کنیم
در این قسمت شکل و یا عکس مورد نظر خودمونو درست می کنیم خیلی شبیه paint ویندوزه
می تونیم انیمیشن هم درست کنیم و کارمون رو تو چند فریم مختلف درست کنیم بدین صورت که با کلیک روی Use Animation می تونیم هر تعداد فریم درست کنیم و تو هر فریم عکس و یا شکل خودمون رو درست کنیم حتی می شود سرعت حرکت فریم (frame rate) رو هم مشخص کنیم
از نکات بسیارجالب و مفید و رایج وب سایت اینه که ما عکس و یا لوگوی خودمون رو به favicon تبدیل کنیم برای این کار کافیست روی import image کلیک کنیم و عکس رو اضافه کنیم .
حتی می تونیم favicon هایی رو که دیگران درست کردن رو ببینیم و اگر خوشمون اومد همون رو انتخاب کنیم
سایت دوم برای ساخت فاو آیکن :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
این سایت هم قابلیت تبدیل عکسهای ما به فاوآیکون favicon رو داره
و با استفاده از *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* می تونیم به ابزارهای خوبی که برای وبمستر ها بسیار مفیدن دسترسی پیدا کنیم
انجمن تخصصی علوم کامپیوتر و هنرهای دیجیتال
سایت سوم برای ساخت فاوآیکن :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
کد قرار دادن فاوآیکون favicon در سایت :
باید کدهای زیر رو قبل از <head/> کپی کنید.
دقت کنید که کد بالا برای favicon ها با فرمت ico هستش اما اگر فرمت دیگه ای دارید مثل png یا gif باید از کد زیر استفاده کنید (اما ico پیشنهاد ماست)
همینطور در کد بالا و این پایینی باید بجای favicon.ico/… باید آدرس جایی که آپلود کردین رو بدید.
مثلا برای آیکون png به این صورت :
تغییر فاوآیکون در سایتهای مختلف :
معمولا در اکثر سایت ها باید فایل header.php در قالب رو ویرایش کنید و کد هایی که در بالا گفته شد رو قرار بدید یا برای برخی مدیریت محتوا ها مانند وردپرس ،جوملا،دروپال و .. اگر قالب فاوآیکونی هستش ، آدرس اونو عوض کنید.بعضی قالبها هم تنظیماتی برای فاوآیکون دارن که می تونید آیکونتون رو جایگزین کنید.
برای قرار دادن فاوآیکن در وردپرس از کد زیر هم میتونین درHeader.php استفاده کنید :
توجه کنید که آدرس *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* موجود در کد بالا رو به آدرس لوگوتون که آپلود کردید تغییر بدید.
دانلود favicon آماده برای سایت :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
اما فاوآیکون favicon چیست ؟
لوگو یا عکس کوچکی است که در بالای پنجره مرورگر کنار نام سایت به نمایش درمیاد در واقع مخفف کلمه انگلیسی (favorite + icon) به معنی آیکون موردعلاقه می باشد . در واقع وجود این عکس و لوگو در وب سایت هایی که طراحی می کنیم باعث میشه که چهره ی سایت ما در نظر مخاطب بهتر جلوه کنه و سایت رو زیباتر میکنه.
سایت اول که میخواهیم معرفی کنیم*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* هستش
ابتدا به سایت مراجعه کنید : *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
از بخش سمت راست (color picker) می تونیم رنگ وابزار را انتخاب کنیم
در این قسمت شکل و یا عکس مورد نظر خودمونو درست می کنیم خیلی شبیه paint ویندوزه
می تونیم انیمیشن هم درست کنیم و کارمون رو تو چند فریم مختلف درست کنیم بدین صورت که با کلیک روی Use Animation می تونیم هر تعداد فریم درست کنیم و تو هر فریم عکس و یا شکل خودمون رو درست کنیم حتی می شود سرعت حرکت فریم (frame rate) رو هم مشخص کنیم
از نکات بسیارجالب و مفید و رایج وب سایت اینه که ما عکس و یا لوگوی خودمون رو به favicon تبدیل کنیم برای این کار کافیست روی import image کلیک کنیم و عکس رو اضافه کنیم .
حتی می تونیم favicon هایی رو که دیگران درست کردن رو ببینیم و اگر خوشمون اومد همون رو انتخاب کنیم
سایت دوم برای ساخت فاو آیکن :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
این سایت هم قابلیت تبدیل عکسهای ما به فاوآیکون favicon رو داره
و با استفاده از *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* می تونیم به ابزارهای خوبی که برای وبمستر ها بسیار مفیدن دسترسی پیدا کنیم
انجمن تخصصی علوم کامپیوتر و هنرهای دیجیتال
سایت سوم برای ساخت فاوآیکن :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
کد قرار دادن فاوآیکون favicon در سایت :
باید کدهای زیر رو قبل از <head/> کپی کنید.
کد:
<link rel="shortcut icon" type="image/x-icon" href=".../favicon.ico" />همینطور در کد بالا و این پایینی باید بجای favicon.ico/… باید آدرس جایی که آپلود کردین رو بدید.
مثلا برای آیکون png به این صورت :
کد:
<link rel="icon" type="image/png" href=".../favicon.png" />معمولا در اکثر سایت ها باید فایل header.php در قالب رو ویرایش کنید و کد هایی که در بالا گفته شد رو قرار بدید یا برای برخی مدیریت محتوا ها مانند وردپرس ،جوملا،دروپال و .. اگر قالب فاوآیکونی هستش ، آدرس اونو عوض کنید.بعضی قالبها هم تنظیماتی برای فاوآیکون دارن که می تونید آیکونتون رو جایگزین کنید.
برای قرار دادن فاوآیکن در وردپرس از کد زیر هم میتونین درHeader.php استفاده کنید :
کد:
<link rel="icon" href="http://www.cgaria.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.cgaria.com/favicon.ico" type="image/x-icon" />دانلود favicon آماده برای سایت :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
خورشید باش که اگر خواستی بر کسی نتابی نتوانی.
