Add a toggle for the custom web logo

The feature could only be turned off by clearing the uploaded image, and
its fallback pointed at /favicon.ico, which current ComfyUI does not
serve at all, so disabling it left a dead icon rather than the original.

Remember whatever favicon ComfyUI has at setup, before any job has run,
and restore that when the toggle is off. If there is nothing to restore,
leave the favicon alone rather than pointing it somewhere broken.
This commit is contained in:
kk8bit
2026-09-20 18:23:18 +08:00
parent 56c2b6d353
commit f2bb5ec846
9 changed files with 55 additions and 11 deletions
+2
View File
@@ -1,6 +1,8 @@
# Changelog
## [未发布 Unreleased]
- 自定义网页徽标新增开关,关闭后恢复 ComfyUI 默认图标
- Added a toggle for the custom web logo; turning it off restores ComfyUI's own favicon
- 修复 ab Images 节点在新版前端下交互功能全部失效的问题(显示图像、A/B 切换、右键菜单、最小尺寸限制)
- Fixed ab Images losing all of its interactions on the current frontend (image display, A/B switching, context menu, minimum size)
- 修复通过 ComfyUI Manager 安装时 GuLuLu 图片加载不出来的问题
+2
View File
@@ -9,6 +9,8 @@ This is a custom node utility package developed for ComfyUI. Initially created f
## 最新更新 / Last Update
### [未发布 Unreleased]
- 自定义网页徽标新增开关,关闭后恢复 ComfyUI 默认图标
- Added a toggle for the custom web logo; turning it off restores ComfyUI's own favicon
- 修复 ab Images 节点在新版前端下交互功能全部失效的问题(显示图像、A/B 切换、右键菜单、最小尺寸限制)
- Fixed ab Images losing all of its interactions on the current frontend (image display, A/B switching, context menu, minimum size)
- 修复通过 ComfyUI Manager 安装时 GuLuLu 图片加载不出来的问题
+4
View File
@@ -17,6 +17,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "Set '🛜 Set/Get' Title color"
},
"KayTool_EnableCustomWebLogo": {
"name": "Enable Custom Web Logo",
"tooltip": "Turn this off to keep ComfyUI's own favicon"
},
"KayTool_CustomWebLogo": {
"name": "File must be < 1MB",
"tooltip": "This is a test feature, the file must be < 1MB, otherwise it may not be displayed"
+4
View File
@@ -17,6 +17,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "Ajuster la couleur du titre '🛜 Set/Get'"
},
"KayTool_EnableCustomWebLogo": {
"name": "Activer le logo web personnalisé",
"tooltip": "Désactivez pour conserver le favicon d'origine de ComfyUI"
},
"KayTool_CustomWebLogo": {
"name": "Le fichier doit être < 1 Mo",
"tooltip": "Ceci est une fonctionnalité test, le fichier doit être < 1 Mo, sinon il pourrait ne pas s'afficher"
+4
View File
@@ -17,6 +17,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "「🛜 Set/Get」タイトル色を調整"
},
"KayTool_EnableCustomWebLogo": {
"name": "カスタムウェブロゴを有効にする",
"tooltip": "オフにすると ComfyUI 標準のアイコンに戻ります"
},
"KayTool_CustomWebLogo": {
"name": "ファイルは1MB未満である必要があります",
"tooltip": "これはテスト機能です。ファイルは1MB未満である必要があります。そうでない場合、表示されない可能性があります。"
+4
View File
@@ -17,6 +17,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "'🛜 Set/Get' 제목 색상 설정"
},
"KayTool_EnableCustomWebLogo": {
"name": "사용자 지정 웹 로고 활성화",
"tooltip": "끄면 ComfyUI 기본 아이콘으로 돌아갑니다"
},
"KayTool_CustomWebLogo": {
"name": "파일 크기는 1MB 미만이어야 합니다.",
"tooltip": "이 기능은 테스트 기능이며, 파일 크기가 1MB 미만이어야 표시될 수 있습니다."
+4
View File
@@ -17,6 +17,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "Установить цвет заголовка '🛜 Set/Get'"
},
"KayTool_EnableCustomWebLogo": {
"name": "Включить пользовательский логотип",
"tooltip": "Выключите, чтобы вернуть стандартный значок ComfyUI"
},
"KayTool_CustomWebLogo": {
"name": "Файл должен быть < 1МБ",
"tooltip": "Это тестовая функция, файл должен быть < 1МБ, иначе он может не отобразиться"
+4
View File
@@ -30,6 +30,10 @@
"KayTool_SetGetBackgroundColor": {
"name": "标题颜色"
},
"KayTool_EnableCustomWebLogo": {
"name": "启用自定义网页徽标",
"tooltip": "关闭后恢复 ComfyUI 默认图标"
},
"KayTool_CustomWebLogo": {
"name": "文件必须 < 1MB",
"tooltip": "这是一个测试功能,文件最好 <1MB ,否则可能无法显示"
+27 -11
View File
@@ -3,16 +3,39 @@ import { app } from "../../../scripts/app.js";
app.registerExtension({
name: "KayTool.CustomWebLogo",
async setup() {
// setup 跑在页面加载时、任何任务开始之前,此刻的图标就是 ComfyUI 的常态图标,
// 记下来供关闭开关时还原。不要退回写死的 /favicon.ico —— 新版 ComfyUI 上它是 404。
const originalFavicon = document.querySelector("link[rel='icon']")?.href || null;
function updateFavicon(dataUrl) {
const href = dataUrl || originalFavicon;
if (!href) return; // 没有可还原的目标就别乱动,交给 ComfyUI 自己管
let link = document.querySelector("link[rel='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.head.appendChild(link);
}
link.href = dataUrl || "/favicon.ico";
link.href = href;
}
function applyLogo() {
const enabled = app.ui.settings.getSettingValue("KayTool.EnableCustomWebLogo");
const logo = app.ui.settings.getSettingValue("KayTool.CustomWebLogo");
const usable = enabled && typeof logo === "string" && logo.startsWith("data:image/");
updateFavicon(usable ? logo : null);
}
app.ui.settings.addSetting({
id: "KayTool.EnableCustomWebLogo",
name: "Enable Custom Web Logo",
type: "boolean",
defaultValue: true,
tooltip: "Turn this off to keep ComfyUI's own favicon",
category: ["KayTool", "Custom Web Logo (BETA)", "EnableCustomWebLogo"],
onChange: () => applyLogo(),
});
app.ui.settings.addSetting({
id: "KayTool.CustomWebLogo",
name: "File must be < 1MB",
@@ -20,16 +43,9 @@ app.registerExtension({
tooltip: "This is a test feature. File must be < 1MB to avoid potential errors",
defaultValue: null,
category: ["KayTool", "Custom Web Logo (BETA)", "CustomWebLogo"],
onChange: (newVal) => {
if (newVal && typeof newVal === "string" && newVal.startsWith("data:image/")) {
updateFavicon(newVal);
} else {
updateFavicon(null);
}
},
onChange: () => applyLogo(),
});
const savedLogo = app.ui.settings.getSettingValue("KayTool.CustomWebLogo");
updateFavicon(savedLogo && savedLogo.startsWith("data:image/") ? savedLogo : null);
applyLogo();
},
});
});