Blog. Just Blog

Динамическое изменение favicon сайта в браузере

Версия для печати Добавить в Избранное Отправить на E-Mail 24.04.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Ни для кого не секрет, как на сайт добавляется иконка, которая отображается в адресной строке браузера. Достаточно прописать ссылку на нее в заголовке HTML-страницы:
Code (HTML) : Убрать нумерацию
  1. <html>
  2.   <head>
  3.     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  4.   <head>
  5.   <body>
  6.   ...
  7.   </body>
  8. </html>
С добавлением никаких сложностей нет. А вот можно ли динамически поменять иконку после того, как страница загружена? Первое, что приходит в голову, это присвоить тегу link с иконкой какой-нибудь id и затем попробовать поменять его свойства через DOM. Увы, такой способ не срабатывает. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. // Ссылка на файл новой иконки
  3. var icon='new_favicon.ico';
  4.  
  5. var head = document.getElementsByTagName('head')[0];
  6.  
  7. // Найти и удалить старую иконку из тега HEAD
  8. var links = head.getElementsByTagName('link');
  9. for (var i = 0; i < links.length; i++) {
  10.     var lnk = links[i];
  11.     if (lnk.rel=='shortcut icon') {
  12.         head.removeChild(lnk);
  13.     }
  14. }
  15.  
  16. // Добавить новую иконку
  17. var link = document.createElement('link');
  18. link.setAttribute('href',icon);
  19. link.setAttribute('type','image/x-icon');
  20. link.setAttribute('rel','shortcut icon');
  21. head.appendChild(link);
  22. </script>
Метод кроссбраузерный и самодостаточный, не требует никаких сторонних библиотек. Таким способом, например, можно оповестить пользователя о каком-нибудь событии, когда вкладка со страницей не активна. Для истинных извращенцев есть даже игра в favicon. Главное не злоупотреблять анимацией в рабочих проектах.

Поделиться ссылкой ВКонтакте
Просмотров: 10902 | Комментариев: 14

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Leka (12.01.2016 в 17:38):
В IE 11 не работает(
ManHunter (28.10.2014 в 10:59):
А вариант, что это просто никому не интересно, не рассматривался?
Dogica (27.10.2014 в 19:24):
решения нет?
или очень сложно?
Dogica (25.10.2014 в 19:53):
Ну и сразу уже по дороге..
Хочется скажем дать пользователю набор из 10 иконок
При каждом нажатии на кнопу чтобы менялась на следующую..
Возможно ли такое?
Понимаю что нужно определить VAR для каждой иконки в предложенной вами функции.. ну а дальше что делать? : )
-----------------------------------------
Буду очень благодарен за советы и помощь
Вот мой сайт: [del]
Dogica (25.10.2014 в 19:37):
Привет!
Простите конечно.. дилетантский вопрос
Как вызвать эту функцию в HTML коде странички?
Кнопку хочу сделать для пользователей
при нажатии на которую меняется Фавикон
ManHunter (16.10.2014 в 15:02):
Разве IE еще не сдох?
Артемий (16.10.2014 в 14:54):
В IE8 не меняется иконка
NorTan (01.06.2014 в 23:27):
По прежнему натыкаюсь на твой блог в своих поисках. Каждый раз все чаще и чаще, чему очень рад!
ManHunter (25.04.2014 в 09:09):
Там иконка рисуется через canvas, но в браузере меняется по такому же принципу.
Игорь (25.04.2014 в 06:10):
использую плагин для уведомления пользователей о появлении новых личных сообщений: http://oodavid.com/jQueryFaviconNotifier/
ManHunter (24.04.2014 в 23:48):
Зачем? Камуфляж включен только на рабочем компе.
voila (24.04.2014 в 21:55):
Ну, тогда проще все значки местопребывания своего Арго разом поменять на добро-корпо тогда уж)
ManHunter (24.04.2014 в 20:33):
Ну вот тебе практическое применение: при включенной настройке "камуфляж" этот сайт при потере фокуса страницы меняет заголовок на гугл и иконку на гугловскую. И когда кто-то заглядывает через плечо в экран, то видит рабочую вкладку, где я занимаюсь делом и рядом вкладку гугла. И больше ничего подозрительного. При возврате фокуса на страницу заголовок и иконка меняются обратно.
voila (24.04.2014 в 20:26):
Признаться, действительно серьезного практического применения этой забавной штуке, кроме как поиграться, лично я не в силах придумать, ага. Но спасибо, поигралсо)

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (362), COM (41), CSS (42), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (52), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (29), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (317), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (77), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (50), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (130), полезные функции (42), прохождения (4), процессы (25), птица (21), путешествия (25), распаковка (22), реверсинг (52), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (10), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,305 раз
<< 2024 - ОКТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Всемирный день почты
День Специальной пожарной охраны МЧС России
День разгрома советскими войсками немецко-фашистских войск в битве за Кавказ
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.005 сек.) / Память: 4.5 Mb
Наверх