Как изменить фавикон динамически?

Опубликовано: 1 Декабря, 2021

Возможно, вы заметили, что многие социальные сети и современные веб-приложения имеют динамические значки. Динамические значки могут быть для разных целей, например, социальные сети используют их для отображения уведомлений или сообщений. Некоторые веб-сайты также имеют процентный значок, который отслеживает уровни успеха, и если вы завершите уровень, значок будет заменен значком успеха. Значок изменен, чтобы привлечь внимание людей. Вы можете переключаться между разными значками для разных страниц вашего веб-приложения.

Чтобы изменять значки динамически, мы создадим две функции javascript, чтобы изменить значки GeeksforGeeks и Technical Scripter соответственно. Мы назначим постоянную переменную и получим их по идентификатору значка с помощью функции getElementById () . После этого мы создадим 2 функции и назначим для них две кнопки. При наведении курсора на эти кнопки значок изменится.

Пример ниже иллюстрирует подход:
Пример: Для начала мы создадим HTML-страницу с двумя кнопками на ней. Эти кнопки помогут изменить значок при наведении курсора мыши.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Dynamic Favicon</ title >
   
    <!-- Default favicon image -->
    < link id = "favicon" rel = "icon"
          href = "image_name.png"
          type = "image/png"
          sizes = "16x16" >
   
    <!--To style the Buttons-->
    < style >
        .btn1 {
            background-image: url('img2.png');
            border: none;
             
        }
        .btn2 {
            background-image: url('img.png');
            border: none;
        }
         
        .container {
            text-align: center;
        }
         
        h1 {
            color:green;
        }
    </ style >
 </ head >
 
< body >
    < div class = "container" >
    < h1 >GeeksforGeeks</ h1 >
    < h3 >Change favicon with JavaScript</ h3 >
   
    <!--Creating buttons to change favicons on
        the hover of the mouse on the button-->
    < button class = "btn1" type = "button" onmouseover = "toRed()" >
      GeeksforGeeks
    </ button >
    < button class = "btn2" type = "button" onmouseover = "toBlue()" >
      Tecnical Scripter
    </ button >
   
    < script >
       
        // Assign a constant variable and get them by the favicon Id
        const favicon = document.getElementById("favicon");
       
        // Creating a function for the button GeeksforGeeks
        function toRed() {
            favicon.setAttribute("href", "img2.png");
        }
        // Creating a function for the button Techiniacl Script
        function toBlue() {
            favicon.setAttribute("href", "img.png");
        }
    </ script >
    </ div >
 </ body >
 
</ html > 

Выход:

Technical Scripter JavaScript Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Как изменить фавикон динамически?

РЕКОМЕНДУЕМЫЕ СТАТЬИ