I am currently working on setting up different icons to display when my browser is online (normal logo) and offline (greyed out logo). With Vue JS, I am able to detect the online and offline states, as well as set different favicons accordingly. However, the offline icon is not displaying because my browser lacks internet access to fetch the icon.
What would be the most effective method to accomplish this? Here is the code snippet I am currently using, and I am utilizing 'v-offline' to determine online or offline states:
handleConnectivityChange (status) {
status ? $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png') : $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png')
}