Vary Color of Favicon Depending on State of Timer

As a person tracking my time in a web app,
I would like to see a visual cue in the **Browser Tab/Window**
indicating that the timer has _exceeded_ the original estimate/allocation for that activity/task.
So that I can remember to **stop** the timer.

At present we display the @dwyl **`teal`** favicon in the Browser Tab:


# Todo / Acceptance Criteria

+ [ ] Using the @dwyl **`teal`** favicon as the starting point.
+ [ ] ***Scale*** and optimise the icon to be the correct dimensions (_to reduce bandwidth_)
> Can we do better than **1,920 bytes** for a favicon? (_optimise later if not immediately obvs_)
+ [ ] Create a **`red`** [**`#e74c3c`**](https://flatuicolors.com/palette/defo) version of the icon.
+ [ ] Create a JS function that _updates_ the Favicon to the **`red`** version when timer exceeds estimate.
see: https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically
+ [ ] Dependent on: Estimate expected time a task/activity will take to complete https://github.com/dwyl/time/issues/147
> We need to have a field for `time_estimate` in the schema so that we know when it expires.

For more technical info on Favicons see: https://github.com/audreyr/favicon-cheat-sheet