Динамически изменяемое изображение значка web-сайта (Favicon)

@InessaSuper · Регистрация: 09.05.2015

Студворк — интернет-сервис помощи студентам

У меня возникла необходимость динамически подгружать каждый раз другое изображение Favicon при каждой последующей перегрузке моей лэндинг-страницы.

Подскажите, пожалуйста, как это можно сделать при помощи использования JavaScript?

Это нужно мне для того, чтобы при пОстинге этой страницы в соц. сети Google+ на стене пользователя выводилось каждый раз новое изображение с Favicon моей лэндинг-страницы.

Это изображение самостоятельно "вытягивается" из URI страницы при помощи средств Google+ API и пОстится на стену пользователя Google+ вместе с публикуемым сообщением.

Мне это нужно, чтобы привлечь внимание пользователя в случае повторно пОстинга сообщения на стену пользователя в Google+.

Итак, у меня в папке domain_name.com/imgs находятся PNG-файлы (44 штуки), которые я предполагаю рандомным образом вызывать из JavaScript-функции.

Имена файлов имеют названия в формате: 1.png, 2.png, .., 44.png.

Для того, чтобы сопоставить изображение Favicon с соответствующим файле в статическом html-файле я использую следующий код.

JavaScript
1
2
3
4
5
6
7
8
9
<html>
<head>
    <title>My Landing Page</title>
    <link rel="shortcut icon" href="1.png">
  <style></style>
</head>
<body>
</body>
</html>

Подскажите, пожалуйста, как должен выглядеть html-файл c соответствующим JavaScript-ом, который бы при каждой загрузке страница рандомным образом подставлял бы вместо статической ссылки на файл "1.png" динамическое значение с именем png-файла из папки /imgs?

@massEffect · 22.03.2016, 12:04

HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>My Landing Page</title>
</head>
 
<body>
<script>
     
</script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var sourceFolderIcon = "";                       //занести путь к папке, если не в корне сайта
    var partName = "favicon";                        //шаблон имени файлов (favico1, favico2, favico3 ...., или "", если только цифры
    var extensionFile = ".ico";
    var quantityFiles = 3;                           //количество файлов
    var link = document.createElement("LINK");
    var head = document.getElementsByTagName("HEAD")[0];
 
    link.setAttribute("rel", "shortcut icon");
    link.setAttribute("href", getFavicon());
    if(head.childNodes.length){
        head.insertBefore(link, head.childNodes[0]);
    }
    else{
        head.appendChild(link);
    }
 
    function getFavicon(){
        var num = Math.ceil(Math.random() * quantityFiles);
        var fullName = partName + num + extensionFile;
 
        return fullName;
    };

@InessaSuper · 23.03.2016, 16:01 **[ТС]**

Скажите, пожалуйста, а как нужно дополнить/изменить этот скрипт, чтобы параллельно с изменением изображения значка web-сайта favicon происходило изменение соответствующего содержимого тэга <img src="image1.PNG"> в теле html-документа, где имя изображения также меняется от 1..44 (image1, image2, .., image44)?

@massEffect · 24.03.2016, 08:08

JavaScript
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
32
33
34
35
36
37
38
39
    var quantityFiles = 3;                           //количество файлов
    var res = {};
 
    // иконка
    var sourceFolderIcon = "";                       //занести путь к папке, если не в корне сайта
    var partNameIcon = "favicon";                        //шаблон имени файлов (favico1, favico2, favico3 ...., или "", если только цифры
    var extensionFileIcon = ".ico";
    var link = document.createElement("LINK");
    var head = document.getElementsByTagName("HEAD")[0];
 
    //рисунок
    var sourceFolderImg = "";                       //занести путь к папке, если не в корне сайта
    var partNameImg = "image";                        //шаблон имени файлов (image1, image2, image3 ...., или "", если только цифры
    var extensionFileImg = ".jpg";
    var img = document.getElementById("myImg");         //сделайте id нужному тегу с картинкой
                                                        // напр: <img id="myImg" src="">
 
    res = getFullNames();
    link.setAttribute("rel", "shortcut icon");
    link.setAttribute("href", res.nameIcon);
    if(head.childNodes.length){
        head.insertBefore(link, head.childNodes[0]);
    }
    else{
        head.appendChild(link);
    }
 
    img.setAttribute("src", res.nameImg);
 
    function getFullNames(){
        var num = Math.ceil(Math.random() * quantityFiles);
        var fullNameIcon = sourceFolderIcon + partNameIcon + num + extensionFileIcon;
        var fullNameImg = sourceFolderImg + partNameImg + num + extensionFileImg;
 
        return {
                    nameIcon: fullNameIcon,
                    nameImg: fullNameImg
        };
    };

Добавлено через 15 минут
Только скрипт в самый низ <body></body> поместите

@Опан · 26.03.2016, 09:01

Возьмите на вооружение Ваш изначальный код и добавьте в тело документа:

HTML5
1
<img id=myimg>

JavaScript
1
2
3
4
5
<script>
var icon=Math.ceil(Math.random()*44);
document.getElementsByTagName("link")[0].href=icon+".png";
myimg.src="image"+icon+".PNG";
</script>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Динамически изменяемое изображение значка web-сайта (Favicon)

Решение

Решение

@InessaSuper 97 / 4 / 0 Регистрация: 09.05.2015 Сообщений: 70
	23.03.2016, 16:01 [ТС]
	Скажите, пожалуйста, а как нужно дополнить/изменить этот скрипт, чтобы параллельно с изменением изображения значка web-сайта favicon происходило изменение соответствующего содержимого тэга <img src="image1.PNG"> в теле html-документа, где имя изображения также меняется от 1..44 (image1, image2, .., image44)? 0