گرافیک و طراحی وب

طراحی favicon و قرار دادن آن در قالب وبسایت/وبلاگ

مرداد ۳۰م, ۱۳۹۰

favicon چیست؟

favicon مخفف favorites icon است که در مرورگرهای وب در کنار Address Bar نمایش داده می شود، شاید تا الان اسمش را نمیدانسته اید اما مطمئنا بارها favicon را دیده اید:

 

 

 

 

 

 

 

روش ساخت Favicon:

 

راه اول: استفاده از Microsoft Visual Studio

تصویری مربعی شکل با عرض ۱۶ یا ۳۲ پیکسل طراحی کرده و سپس آن را با فرمت ico. ذخیره نمایید!

 

راه دوم: استفاده از Photoshop و سایر نرم افزارهای معمول

تصویری مربعی شکل با عرض ۱۶ یا ۳۲ پیکسل طراحی کرده و سپس آن را با فرمت BMP. ذخیره نمایید، در قدم بعدی با استفاده از Rename ، پسوند آن را از BMP. به ico. تغییر دهید!

 

راه سوم: استفاده از سایت www.favicon.cc

با استفاده از ابزارهای این سایت به صورت آنلاین به طراحی پرداخته و همزمان نتیجه کار خود را مشاهده کنید:

 

 

پس از اتمام کار روی Download Favicon کلیک نموده و تصویر را ذخیره نمایید!

 

می توانید برای متحرک نمودن تصویر بر روی Use Animation نیز کلیک کنید!

همچنین با کلیک بر روی Top Rated Favicons بهترین طرح ها و با کلیک بر روی Latest Favicons آخرین طرح ها را مشاهده فرمایید!

 

استفاده از Favicon در سایت:

 

قدم اول:

برای درج Favicon در سایت یا وبلاگ خود ابتدا آن را Upload نمایید!

(چنانچه وبلاگ داشته و می بایست برای آپلود Favicon از سایت های رایگان آپلود بهره بگیرید، سایت persiangig.com پیشنهاد می شود، چراکه معمولا سایت های آپلود عکس از فرمت ico. پشتیبانی نمی کنند!)

 

قدم دوم:

آدرس favicon خود را بعد از href در کد زیر قرار داده و آن را در قالب وبسایت/وبلاگ خود کپی نمایید:

 

 

مرورگرهای قدیمی:

مرورگرهای قدیمی نظیر Internet Explorer ورژن ۶ از Favicon پشتیبانی نمی کنند!

بنابراین چنانچه favicon سایت های مختلف را مشاهده نمی کنید بهتر است از مرورگرهای قدیمی دست برداشته و همین حالا Firefox را دانلود نمایید!

 نویسنده: حمید توکلی

نوشته شده در دسته ي: HTML