Prosty plugin jQuery: Dynamiczny favicon
Ten prosty wpis ma za zadanie przybliżyć Wam dwa tematy jednocześnie — jak stworzyć prosty plugin do jQuery oraz jak z poziomu JavaScriptu podmienić obrazek favicon dla strony. Zamierzam przedstawić plugin który właśnie taką czynność wykonuje 
jQuery chyba nie trzeba przedstawiać. Jest to w mojej opinii najłatwiejsza w użyciu biblioteka czyniąca język JavaScript prostym i wygodnym w użyciu. Co więcej — można ją bardzo łatwo rozszerzać o dodatkową funkcjonalność za pomocą pluginów. Uważam, że warto wiedzieć jak taki plugin można sobie szybko przygotować.
jquery.favicon_replace.js wygląda następująco:
(function($) {
$.fn.favicon_replace = function(url) {
$('head link').each(function() {
if ($(this).attr('rel') == 'shortcut icon') {
$(this).remove();
}
});
$('<link rel="shortcut icon" href="'+url+'" />')
.appendTo('head');
return this;
};
})(jQuery);
Jak powyższy kod działa: tworzymy closure której jako parametr podajemy strukturę jQuery. Wewnątrz closury definiujemy funkcję, która sprawdza atrybut rel każdego taga typu link wewnątrz head porównując go do shortcut icon. Znaleziony w ten sposób element jest kasowany. Następnie tworzony jest nowy link typu shortcut icon, z nowym url'em. Urla podajemy funkcji jako parametr. Closura w postaci anonimowej funkcji jest wykonywana, a w efekcie jQuery zyskuje nową funkcję. return this; na końcu funkcji umożliwia wywoływanie kolejnych funkcji jQuery.
Zastosowanie tego plugina jest proste — oto przykład:
$(document).favicon_replace('/images/new-favicon.ico');
Warto napomnieć, że favicon wcale nie musi być ikoną. Możecie równie dobrze zaserwować przeglądarce animowanego gifa, nawet z rozszerzeniem ico, który zostanie automatycznie przeskalowany przez przeglądarkę i animowany na pasku adresu
