آخرین بروز رسانی سایت دوشنبه هفتم دی 1394 / 09:14:23 صورت گرفته است.

نحوه ی ساخت favicon برای وب سایت

خب سوالی که برای خیلی از طراحان و دوست داران وب مطرح می شود این است که چگونه برای وب سایت خود یک favicon درست کنیم .

اما اولین نکته ای که لازم است اینجا مطرح کنم تعریف favicon می باشد .

favicon چیست ؟ favicon ، لوگو یا عکس کوچکی است که در بالای پنجره مرورگر کنار نام وب سایت به نمایش در می آید در واقع مخفف کلمه ی انگلیسی (favorite + icon) به معنی آیکن مورد علاقه می باشد . در واقع وجود این عکس و لوگو در وب سایت هایی که طراحی می کنیم و یا طراحی می شن که چهره ی سایت ما در نظر مخاطب بهتر جلوه کند و به زیبایی سایت کمک می کند .

 

حال ما  آموزش  ساخت favicon رو در صفحات وب شروع می کنیم .

 ابتدا به وب سایت favicon.cc رفته ، این سایت یکی از بزرگترین و بهترین ها در این زمینه می باشد .

 

 

 

1) ازقسمت سمت راست (color picker) می توانیم رنگ وابزار را انتخاب کنیم .

2) در این قسمت شکل و یا عکس مورد نظر خود را درست می کنیم یه جورایی مثل paint ویندوز می مونه !!!

3) حتی ما می تونیم انیمیشن درست کنیم و کارمون رو تو چند فریم مختلف درست کنیم بدین صورت که با کلیک روی Use Animation می تونیم هر تعداد فریم درست کنیم و تو هر فریم عکس و یا شکل خودمون رو درست کنیم حتی می شود سرعت حرکت فریم (frame rate) رو هم مشخص کنیم .

4) از نکات بسیار مفید و رایج وب سایت اینه که ما عکس و یا لوگوی خدمون رو به favicon تبدیل کنیم برای این کار کافیست روی import image کلیک کنیم و عکس رو اضافه کنیم .

5) حتی می تونیم favicon هایی رو که دیگران درست کردن ببینیم و اگر خوشمون اومد همون رو انتخاب کنیم .

در کل کار با این وب سایت بسیار ساده است و با چند کلیک ساده می تونیم favicon های زیبایی خلق کنیم .

 

 

حال در پایین صفحه قسمتی به نام Preview رو داریم .

6) هر شکلی رو که درست می کنیم بلافاصله نمونه اش رو اینجا نشون می ده .

7) پس از پایان کار روی Download Favicon کلیک می کنیم و favicon رو دانلود می کنیم که حجم خیلی پایینی هم داره (حدودا 1 کیلوبایت).

اما تا اینجا favicon رو درست کردیم حال باید این فایل رو تو وب سایتمون اضافه کنیم .

برای اضافه کردن favicon به صفحات وب کد زیر رو در بین تگ های head قرار می دهیم .

<link rel="shortcut icon" href="/favicon.ico">

 نکته ی آخر اینه که این فایل یعنی favicon.ico حتما باید در کنار صفحات html باشد که ما کد بالا رو تو صفحات اونها نوشتیم .

حال برای اطمینان از درستی کار صفحه html رو که کد بالا رو در بین تگ های head آن قرار دادیم با firefox باز می کنیم ، قطعا باید favicon رو به ما نمایش دهد .