ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت

۱۳۸۸/۰۲/۲۰ ۳:۲۱ Salar Khalilzadeh https://plus.google.com/105397214522932500988 منتشر شده در تاریخ : ۱۳۸۸/۰۲/۲۰ دسته بندی : ، ، ، 3

تاکنون سایتهایی را دیده اید که favicon متحرک دارند. اعمال این انیمشین به سادگی امکان پذیر است.

برای اطلاع از اینکه favicon چیست به اینجا مراجعه کنید.

متحرک بودن آیکون سایت فقط در مرورگر فایرفاکس پشتیبانی میشود و در بقیه متحرک نخواهد بود. مرور IE نیز که به طور کل آن را پشتیبانی نمی کند.

favicon متحرک


برای اعمال آیکون متحرک ابتدا فایل انیمشن gif مورد خودتون رو ایجاد کنید و در مسیر سایت قرار بدید.

کد زیر رو به قسمت head فایل html مورد نظر اضافه کنید:
<link rel="shortcut icon" href="favicon.gif" type="image/gif">

نکته ای که در اینجا مهم هست استفاده همزمان از فایل gif و icon هست  تا برای مرورگرهایی که از این ویژگی پشتیانی نمی کنند مشکلی پیش نیاید و همچنان آیکون سایت نمایش داده بشود.
بس برای این منظور فایل favicon.ico را هم در مسیر قرار و لینک آن را نیز به قسمت head اضافه کنید. توجه کنید لینک icon باید قبل از gif باشد تا فایل gif در اولویت قرار گیرد.

نتیجه نهایی قسمت head صفحه به این صورت خواهد بود:
<head>
<title>SalarBlog.wordpress.com Animated Favicons</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.gif" type="image/gif">
</head>

نحوه تغییر favicon با جاوا اسکریپت


در صورتی که بخواهید آیکون سایت در شرایط مختلف تغییر کنه می توانید از روشی که در ادامه توضیح می دهم استفاده کنید.
کاربرد این تغییر می تونه برای وضعیت های مختلف صفحه باشه. برای مثال آیکون سایت برای روز متفاوت از آیکون برای شب باشه و از این مدل تغییرات.

این روش فقط در مرورگرهای فایرفاکس و اپرا کار خواهد کرد و در سایر مرورگرها بی اثر هست.
تابع زیر در جاوا اسکریپت با دریافت آدرس آیکون آن را به صفحه اعمال می کند:
function ChangeFavicon(iconUrl){
var docHead=document.getElementsByTagName('head');
if(docHead!=null && docHead.length>0)
docHead=docHead[0];
else return;
var link = document.createElement("link");
link.type="image/x-icon";
link.href=iconUrl;
link.rel="shortcut icon";
docHead.appendChild(link);
}

در این تابع با ایجاد یک شی Link و مقدار دهی آن و سپس اضافه کردن آن به بخش head سایت مرورگر رو وادار به شناسایی آیکون جدید کرده و آن را نمایش می دهیم.

استفاده از این تابع آسان است و به صورت زیر خواهد بود.
ChangeFavicon('favicon-frame1.ico');
ChangeFavicon('favicon-frame2.ico');
ChangeFavicon('favicon-frame3.ico');

پ.ن: برای ایجاد favicon به صورت آنلاین از سایت favicon.cc استفاده کنید.

موفق باشید

 

3 بازخورد برای “ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت”

  1. از اینکه favicon چیست به اینجا مراجعه کنید.

    اين صفحه وجود ندارد!
    ------------------------------------
    مشکل فارسی بودن آدرس بود که حل شد

    پاسخحذف
  2. للللللللل

    پاسخحذف