Иногда появляется необходимость динамически изменять иконку сайта - favicon, например, в чатах, при получении нового сообщения, при завершении продолжительной операции и др.

Иконка подключается в документ при помощи следующего тэга:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Изменить иконку сайта можно путем удаления существующего тэга, указывающего на favicon и добавления нового (это действительно только для Firefox и Opera). Было бы неплохо, если бы иконку можно было изменять путём простой подмены аттрибута href, однако браузеры не реагируют на изменения аттрибутов тэга link. Ниже приведен пример функции, которая устанавливает иконку:

function changeIcon(){
	var head = document.getElementsByTagName("head")[0];

	// удаление старой иконки
	var links = head.getElementsByTagName("link");
	for (var i = 0; i < links.length; i++) {
		var lnk = links[i];
		if (lnk.rel=="shortcut icon") {
			head.removeChild(lnk);
			return;
		}
	}

	// создание и добавление новой иконки
	var link = document.createElement("link");
	link.setAttribute("href","myicon.ico");
	link.setAttribute("type","image/x-icon");
	link.setAttribute("rel","shortcut icon");
	head.appendChild(link);
}

Проверить этот скрипт можно нажав кнопку “Изменить иконку” - вместо логотипа сайта в адресной строке появится иконка “часы” (FF, Opera):

Хочу также обратить ваше внимание на библиотеку favicon.js, которая способна не только изменять иконки, но также делать простые анимации, изменять заголовок страницы, делать бегущую строку в заголовке. Примеры использования этой библиотеки:

// установка иконки, заголовка
favicon.change("/icon/active.ico", "new title");

// установка иконки
favicon.change("/icon/active.ico"); // leaves title alone. Cancels any animation.

// установка заголовка, иконка без изменения
favicon.change(null, "new title"); // leaves icon alone. Cancels any scrolling.

// Анимация иконок. Если последний элемент массива иконок пустая строка то
// между циклами будет вставляться пустая иконка
favicon.animate(["icon1.ico", "icon2.ico", ...]);

// анимация с задержкой в 500мс
favicon.animate(["icon1.ico", "icon2.ico", ...], {delay: 500} );

// бегущая строка
favicon.scrollTitle("new title");

// бегущая строка с задержкой 200мс между циклами, между каждой
// строкой будет вставляться "------", по умолчанию "      "
favicon.scrollTitle("new title", { delay: 200, gap: "------"} )

// отмена бегущей строки и анимации
favicon.unscroll();
favicon.unanimate();

Узнать больше о библиотеке можно здесь (англ). Скачать скрипт. Демо.

Запись добавлена 2 февраля 2008 в категории Разное.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.