Dinamic favicon add

public/index.html

@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Rambla:wght@400;700&display=swap" rel="stylesheet"> 
     <!-- CSS -->
     <meta charset="utf-8" />
-    <link rel="icon" href="./img/favicon.ico" />
+    <link rel="icon" href="./img/favicon.ico" id="favicon" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -216,6 +216,12 @@ const MainPomodoroTimer = (props) => {
 
     })*/
 
+    const getFavicon = () => {
+        const r = document.getElementById('favicon')
+        
+        return r
+    }
+
     React.useEffect ( () => {
         let idTimeOut
 
@@ -224,6 +230,8 @@ const MainPomodoroTimer = (props) => {
 
             if (!weAreInBreakTime) {
 
+                getFavicon().href = './img/working favicon.ico'
+
                 if (!alreadyCountingStart) {
                     const time = getAndFormatCurrentTime()
                     props.setStartTime(time)
@@ -279,6 +287,8 @@ const MainPomodoroTimer = (props) => {
 
             if(weAreInBreakTime) {
                 
+                getFavicon().href = './img/rest favicon.ico'
+
                 if (minutes === 0 && seconds === 0) {
                     setTimerActivity(false)
                     
@@ -315,6 +325,8 @@ const MainPomodoroTimer = (props) => {
             
             if (!props.timerOn) {
 
+                getFavicon().href = './img/favicon.ico'
+
                 if ( timerActivity === true) {
 
                     if (!weAreInBreakTime) {

src/components/MainPomodoro.jsx

@@ -3,8 +3,6 @@ import MainPomodoroTimer from './Main Pomodoro Childrens/MainPomodoroTimer'
 import PomodoroCounter from './Main Pomodoro Childrens/PomodoroCounter'
 import StyleSelector from './Main Pomodoro Childrens/StyleSelector'
 import uploadToClockifyTimer from './Clockify/uploadToClockifyTimer'
-import react from 'react'
-
 
 const MainPomodoro = (props) => {