-
Notifications
You must be signed in to change notification settings - Fork 35
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No Longer possible to change the "favicon" #821
Comments
Can you please provide the link to the forum where you got this code? |
The ideia was from this thread -> https://discourse.nodered.org/t/browser-tab-icon/85925 |
the code you used from the forum assume the existence of jquery. I modified it below to use add a method in your
use it this way from
|
Thanks. It was not working, had to make two modifications:
Without the second step, the browser downloads again the original `favicon.ico´ and the favicon remains the original one. Same behaviour as in original post. Tried in two instances where Dashboard is already V1.8.1 and it is working, although we can still see the original favicon for a moment when loading the page. let's hope this new <template>
</template>
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
}
},
watch: {
msg: function(){
if(this.msg.payload !== undefined){
console.log('Set Favicon via msg.payload');
this.changeFavIcon();
}
}
},
methods: {
// expose a method to our <template> and Vue Application
changeFavIcon () {
console.log('Enter ChangeFavIcon');
const src = `/server_Status.png`;
const link = document.createElement('link');
//find the existing favicon in document to remove from head
const oldLink = document.querySelector('link[href="./favicon.ico"]');
link.id = 'favicon';
link.rel = 'shortcut icon';
link.href = src;
link.type = 'image/png';
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
console.log('Exit ChangeFavIcon');
},
},
mounted() {
console.log('Setup window Load Event');
//document.querySelector('link[rel="icon"]').setAttribute('type','image/png');
//document.querySelector('link[rel="icon"]').setAttribute('href','/server_Status.png');
this.changeFavIcon();
console.log('Icon Setup');
// code here when the component is first loaded
},
unmounted() {
}
}
</script>
<style>
</style> |
I can't follow the 'how-to' here, and cant get it to work. |
@thebaldgeek At least for me, is basically copy that code to a template node. Setup the template to be UI-Scoped And make sure that you have the static folder setup. Node-Red on file settings.js have the property I am using *.png. Change the line And set a inject module to send a message to the template node (set to send after 0.1s) Flow example (i think it is correct, just exported the required nodes) [
{
"id": "67f712a4eb7d2b5b",
"type": "inject",
"z": "08258208cc944d94",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 230,
"y": 220,
"wires": [
[
"26804ac671ce28d6"
]
]
},
{
"id": "e7b432f591473419",
"type": "ui-control",
"z": "08258208cc944d94",
"name": "",
"ui": "9df4836d2f5c3db3",
"events": "connect",
"x": 220,
"y": 180,
"wires": [
[
"26804ac671ce28d6"
]
]
},
{
"id": "26804ac671ce28d6",
"type": "ui-template",
"z": "08258208cc944d94",
"group": "e347ef2c4f0a3336",
"ui": "9df4836d2f5c3db3",
"name": "Change Favicon",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n\n }\n },\n watch: {\n msg: function(){ \n if(this.msg.payload !== undefined){ \n console.log('Set Favicon via msg.payload');\n this.changeFavIcon();\n }\n }\n },\n methods: {\n // expose a method to our <template> and Vue Application\n changeFavIcon () {\n console.log('Enter ChangeFavIcon');\n const src = `/NG_Logo.png`;\n const link = document.createElement('link');\n //find the existing favicon in document to remove from head\n const oldLink = document.querySelector('link[href=\"./favicon.ico\"]');\n link.id = 'favicon';\n link.rel = 'shortcut icon';\n link.href = src;\n link.type = 'image/png';\n if (oldLink) {\n document.head.removeChild(oldLink);\n }\n document.head.appendChild(link);\n console.log('Exit ChangeFavIcon');\n },\n },\n mounted() {\n console.log('Setup window Load Event');\n //document.querySelector('link[rel=\"icon\"]').setAttribute('type','image/png');\n //document.querySelector('link[rel=\"icon\"]').setAttribute('href','/server_Status.png');\n this.changeFavIcon();\n console.log('Icon Setup');\n // code here when the component is first loaded\n \n },\n unmounted() {\n }\n }\n</script>\n<style>\n</style>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "widget:ui",
"className": "",
"x": 460,
"y": 200,
"wires": [
[]
]
},
{
"id": "9df4836d2f5c3db3",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default"
},
{
"id": "e347ef2c4f0a3336",
"type": "ui-group",
"name": "Ambien Values",
"page": "3cdf194d3e1f3330",
"width": "12",
"height": "1",
"order": 1,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "3cdf194d3e1f3330",
"type": "ui-page",
"name": "Values Visualization",
"ui": "9df4836d2f5c3db3",
"path": "/values_view",
"icon": "chart-timeline",
"layout": "grid",
"theme": "6abc079232f2e7a5",
"order": 6,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "6abc079232f2e7a5",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#097479",
"primary": "#097479",
"bgPage": "#111111",
"groupBg": "#333333",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "6px",
"groupGap": "6px",
"groupBorderRadius": "4px",
"widgetGap": "6px"
}
}
] |
@arturv2000 hmm I dont know why doesn't it work with you where it works fine with me! I also use version 1.8.1 |
One thing I forgot to mention, the changes as you suggested (after fixing the I think I have it working now without needing to inject the message to the ui-template. Apparently the "head" section has changed quite lot in 1.7.x and 1.8.x. In v1.7.1 (already has my own favicon): There are more "tags" related to icons and stuff, for what i can tell related to PWA functionality. So for v1.7.1, this is all is required (at least in my installation), changing the document.querySelector('link[rel="icon"]').setAttribute('type','image/png');
document.querySelector('link[rel="icon"]').setAttribute('href','/server_Status.png'); For v1.8.1 the way a get it is: changeFavIcon () {
console.log('Enter ChangeFavIcon');
const alternate_icon = document.querySelector('link[rel="alternate icon"]');
if(alternate_icon){
console.log('Alternate icon found');
document.head.removeChild(alternate_icon);
}else{
console.log('Alternate icon not found');
}
const src = `/server_Status.png`;
const link = document.createElement('link');
//find the existing favicon in document to remove from head
const oldLink = document.querySelector('link[href="./favicon.ico"]');
link.rel = 'icon';
link.href = src;
link.type = 'image/png';
if (oldLink) {
//document.head.removeChild(oldLink);
document.head.replaceChild(link, oldLink); //Optional, instead of replacing it, we can remove and append a new link
}else{
document.head.appendChild(link);
}
console.log('Exit ChangeFavIcon');
}, I need to remove the "alternate icon" link, otherwise after a reload the old icon would show up. Probably the correct option, would be to replace all the icon tags:
In case this 'links' exists.. for correct ones with the correct icon image file. And most likely is a good idea to use svg instead of png. |
in all cases ideally a config for fav icons gets to be part of the ui-base config because it's application-wide. |
I still cant get any of this working. I suspect its the httpStatic setting in settings.js. Its such a tiny image, I'd rather use the base64 encoded image in the flow like the original post: This way, any one can use the same flow for both instances and there is no need to restart Node-RED to get it working? |
@nileio It is probably a browser version issue, I am using Microsoft Edge, it is based on Chromium / Chrome but Microsoft / Google add some of their For the moment it seems to be working with my workarounds. |
Still unable to get this working on my end. @joepavitt is changing the favicon worthy of a low priority feature request? |
Yes, although challenging, but will detail thoughts on the issue once raised |
This may also be linked, as I know many other 1.8.0+ issues have been to #708 |
I also would like to have some kind of configuration, in order to replace all the required files for favicon, or just a conf to the new directory where they are.
@joepavitt Regarding this issue, there is another issue related to the favicon / icons and PWA modifications In order to work properly in Android, it seems that the "manifest.webmanifest" is required, but if fails to download if the page is behind authentication. In order to work properly in Windows / Android and IOS (dindn't test personally, but a college told me that the symbol was OK) this is the current template <template>
</template>
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
}
},
methods: {
// expose a method to our <template> and Vue Application
changeFavIcon () {
console.log('Enter ChangeFavIcon');
const src = '/Icons/favicon-32x32.png';
const alternate_icon = document.querySelector('link[rel="alternate icon"]');
if(alternate_icon){
console.log('Alternate icon found');
document.head.removeChild(alternate_icon);
}else{
console.log('Alternate icon not found');
}
const link = document.createElement('link');
//find the existing favicon in document to remove from head
const oldLink = document.querySelector('link[href="./favicon.ico"]');
link.rel = 'icon';
link.href = src;
link.sizes = "32x32";
link.type = 'image/png';
if (oldLink) {
//document.head.removeChild(oldLink);
document.head.replaceChild(link, oldLink);
}else{
document.head.appendChild(link);
}
const link_16_16 = document.createElement('link');
link_16_16.rel = 'icon';
link_16_16.href = '/Icons/favicon-16x16.png';
link_16_16.sizes = "16x16";
link_16_16.type = 'image/png';
document.head.appendChild(link_16_16);
//replace apple-touch-icon
const apple_touch_icon = document.querySelector('link[rel="apple-touch-icon"]');
if(apple_touch_icon){
const link_apleTouchId = document.createElement('link');
link_apleTouchId.href = '/Icons/apple-touch-icon.png';
link_apleTouchId.rel = 'apple-touch-icon';
link_apleTouchId.sizes = "180x180";
link_apleTouchId.type = 'image/png';
document.head.replaceChild(link_apleTouchId, apple_touch_icon);
}
//Replace MaskIcon
const mask_icon = document.querySelector('link[rel="mask-icon"]');
if(mask_icon){
const link_maskIcon = document.createElement('link');
link_maskIcon.href = '/Icons/safari-pinned-tab.svg';
link_maskIcon.rel = 'mask-icon';
link_maskIcon.color = "#5bbad5";
document.head.replaceChild(link_maskIcon, mask_icon);
}
//Replace Manifest
const manifest_icon = document.querySelector('link[rel="manifest"]');
if(manifest_icon){
const link_manifest = document.createElement('link');
link_manifest.href = '/Icons/site.webmanifest';
link_manifest.rel = 'manifest';
link_manifest.crossOrigin = "use-credentials";
document.head.replaceChild(link_manifest, manifest_icon);
}
console.log('Exit ChangeFavIcon');
},
},
mounted() {
console.log('Setup window Load Event');
this.changeFavIcon();
console.log('Icon Setup');
// code here when the component is first loaded
},
unmounted() {
}
}
</script>
<style>
</style> |
@arturv2000 Just to clarify, your sample code (thank-you for that) uses the path |
I have setup my
Was having problems replacing the favicon paths by "/Icons/TurboClinicV2/favicon.ico" when i only have had the single static source All the files (ico and site.manifest), where generated using https://realfavicongenerator.net/ |
Thanks everyone for your help. I have it working! |
Use forward slashes, Windows works perfectly well with forward slashes and it removes all the problems associated with backslash. |
Current Behavior
At least in version v1.8.0 (Know that for 1.7.1 and before that is working) I am no longer able to change the dashboard page
favicon
.I have this implemented inside a template node
Widget (UI-Scope)
.The code was found in the forum, may not be totally correct but was working :smi
The template is "loaded" and I can see in the network manager (Browser Development Tools) that the image was downloaded. But the favicon in not changed.
In fact almost immediately after downloading the "correct" image, it downloads again the original icon
At this point, I have some node-red instances where the icon is the "correct one" and others (where I updated dashboard to v1.8.1) with the default icon.
Expected Behavior
Favicon should change.
Steps To Reproduce
No response
Environment
Have you provided an initial effort estimate for this issue?
I am not a FlowFuse team member
The text was updated successfully, but these errors were encountered: