chore: sync local changes to Gitea

2026-06-24 22:10:24 +08:00
parent f0d79638c9
commit 2483614e89
21 changed files with 3946 additions and 262 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 .wrangler/
 .claude/
+node_modules/
+dist/
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
-# Favicon 代理 API（Cloudflare Pages）
+# Favicon 代理 API（Cloudflare Workers）

 通过 HTTP API **代理**获取任意网站的 favicon，解决国内无法直连部分站点的问题。  
-使用 **Google**、**DuckDuckGo** 与 **直连目标站** 三路同时请求，**谁先成功返回就用谁**。
+使用 **Google**、**DuckDuckGo**、**直连目标站 /favicon.ico** 与 **首页 HTML 中的 `<link rel="icon">`** 多路同时请求，**谁先成功返回就用谁**。

-> 说明：Bing 没有公开的 favicon 接口，因此第二源使用 DuckDuckGo；直连目标站（如 `https://域名/favicon.ico`）作为第三路，真正起到“代理访问被墙站”的作用。
+前端为 **React + Vite** 静态站点，由 Workers **Static Assets** 托管；`/api/favicon` 在同一 Worker 上运行，**Worker 脚本仅包含 API 逻辑**（React 产物在资源目录中，不计入 Worker bundle）。
+
+> 说明：Bing 没有公开的 favicon 接口，因此第二源使用 DuckDuckGo。

 ## 接口说明

@@ -16,69 +18,55 @@
 ## 示例

 ```bash
-# 使用 url 参数
-curl -o favicon.ico "https://你的 Pages 域名/api/favicon?url=https://twitter.com"
-
-# 使用 domain 参数
-curl -o favicon.ico "https://你的 Pages 域名/api/favicon?domain=github.com&size=64"
+curl -o favicon.ico "https://你的Workers域名/api/favicon?url=https://twitter.com"
+curl -o favicon.ico "https://你的Workers域名/api/favicon?domain=github.com&size=64"
 ```

 前端使用：

 ```html
-<img src="https://你的 Pages 域名/api/favicon?url=https://example.com" alt="favicon" width="32" height="32" />
+<img src="https://你的Workers域名/api/favicon?url=https://example.com" alt="favicon" width="32" height="32" />
 ```

-## 部署到 Cloudflare Pages
+## 开发与构建

-### 方式一：通过 Wrangler CLI
+```bash
+npm install
+npm run dev          # Vite + Workers 本地开发（同官方 Cloudflare Vite 插件）
+npm run build        # tsc -b && vite build → dist/client + dist/cf_favicon
+npm run deploy       # 构建后 wrangler deploy（等价于下面单独一条命令的效果）
+```

-1. 安装 [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/)：
-   ```bash
-   npm install -g wrangler
-   ```
+## 部署到 Cloudflare Workers

-2. 登录 Cloudflare：
-   ```bash
-   wrangler login
-   ```
+1. 安装 [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) 并登录：`wrangler login`
+2. 在项目根目录执行：

-3. 在项目根目录部署：
-   ```bash
-   wrangler pages deploy . --project-name=cf-favicon
-   ```
-   首次会提示创建项目，之后会得到 `https://cf-favicon.pages.dev` 这类地址。
+```bash
+wrangler deploy
+```

-### 方式二：通过 Git 连接（推荐）
+Wrangler 会根据 [`wrangler.toml`](wrangler.toml) 中的 `[build] command` 先执行 `npm run build`，再上传 Worker（约几 KiB）与静态资源目录 `dist/client`。自定义域名可在 Dashboard 中为该 Worker 绑定。

-1. 将本仓库推送到 GitHub/GitLab。
-2. 在 [Cloudflare Dashboard](https://dash.cloudflare.com) → **Workers & Pages** → **Create** → **Pages** → **Connect to Git**。
-3. 选择仓库，构建配置：
-   - **Build command**: 留空（无构建步骤）
-   - **Build output directory**: `/` 或 `.`（根目录即为静态资源）
-4. 保存并部署。  
-   部署完成后 API 地址为：`https://你的项目名.pages.dev/api/favicon?...`
-
-## 项目结构
+## 项目结构（概要）

 ```
-cf-favicon/
-├── functions/
-│   └── api/
-│       └── favicon.js   # Favicon 代理 API 实现
-├── public/
-│   └── favicon.ico      # 可选：默认图标，当所有外部源都失败时返回此文件
-├── index.html           # 简单说明页（可选）
-├── wrangler.toml        # 可选，用于 wrangler 部署
-└── README.md
+├── src/
+│   ├── App.tsx          # 说明页（React）
+│   ├── worker/
+│   │   ├── index.ts    # Worker 入口（仅路由 /api/favicon）
+│   │   └── favicon.ts  # Favicon 代理实现
+├── index.html           # Vite 入口
+├── vite.config.ts       # @cloudflare/vite-plugin + React
+├── wrangler.toml        # Workers + Static Assets（SPA 回退）
+└── public/              # 可选：根路径 /favicon.ico，API 全源失败时的回退图标
 ```

 ## 行为说明

- 请求会同时发往 **Google**、**DuckDuckGo**、**目标站 /favicon.ico** 以及 **目标站首页 HTML 中的 \<link rel="icon">**（支持 ico/png/jpg/webp/svg 等），采用“先成功先返回”，减少单点失败。
- **回退**：若三路均失败，会尝试返回 `public/favicon.ico`；若该文件存在则返回 200 并带响应头 `X-Favicon-Fallback: true`，否则返回 502。
- 运行在 Cloudflare 边缘，请求从 CF 出去，相当于代理访问，适合在国内环境调用以获取国外站点的 favicon。
- 成功时返回图片二进制和 `Cache-Control: public, max-age=86400`；失败时返回 400/502 及 JSON 错误信息。
+- 多路竞速详见上文；成功时返回图片及 `Cache-Control: public, max-age=86400`。
+- **回退**：若全部外部源失败，会通过 `env.ASSETS` 读取站点静态资源中的 **`/favicon.ico`**（请将可选图标放在 `public/favicon.ico`，构建后为站点根路径）。存在则返回 200 并带 `X-Favicon-Fallback: true`，否则 502 JSON。
+- 运行在 Cloudflare 边缘，出站请求由 CF 发起，相当于代理访问。

 ## License

--- a/api-docs/favicon-api.json
+++ b/api-docs/favicon-api.json
@@ -0,0 +1,84 @@
+{
+  "info": {
+    "_postman_id": "a7f3c2e1-4b8d-4f6a-9c2e-1d5b8a4f6e30",
+    "name": "favicon-api",
+    "description": "代理获取任意网站 favicon（Google、DuckDuckGo、直连 /favicon.ico、解析页面 link 图标多路竞速），适用于边缘代理访问被墙站点。",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+  },
+  "variable": [
+    {
+      "key": "baseUrl",
+      "value": "https://favicon.api.smyhub.com",
+      "type": "string"
+    }
+  ],
+  "item": [
+    {
+      "name": "获取 favicon（domain）",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "{{baseUrl}}/api/favicon?domain=github.com&size=128",
+          "query": [
+            {
+              "key": "domain",
+              "value": "github.com",
+              "description": "目标域名，与 url、u 三选一"
+            },
+            {
+              "key": "size",
+              "value": "128",
+              "description": "图标边长，16–256，默认 128（主要影响 Google 源）"
+            }
+          ]
+        },
+        "description": "使用 `domain` 参数指定站点域名。"
+      },
+      "response": []
+    },
+    {
+      "name": "获取 favicon（url）",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "{{baseUrl}}/api/favicon?url=https%3A%2F%2Ftwitter.com&size=128",
+          "query": [
+            {
+              "key": "url",
+              "value": "https://twitter.com",
+              "description": "完整 URL，与 domain、u 三选一"
+            },
+            {
+              "key": "size",
+              "value": "128",
+              "description": "图标边长，16–256，默认 128"
+            }
+          ]
+        },
+        "description": "使用 `url` 参数传入完整页面地址，服务端会解析出域名。"
+      },
+      "response": []
+    },
+    {
+      "name": "获取 favicon（u 简写）",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "{{baseUrl}}/api/favicon?u=example.com",
+          "query": [
+            {
+              "key": "u",
+              "value": "example.com",
+              "description": "域名或 URL 简写，与 domain、url 三选一"
+            }
+          ]
+        },
+        "description": "使用 `u` 作为 `url`/`domain` 的简写参数。"
+      },
+      "response": []
+    }
+  ]
+}
--- a/functions/api/favicon.js
+++ b/functions/api/favicon.js
@@ -1,167 +0,0 @@
-/**
- * Favicon 代理 API
- * 通过 Google、DuckDuckGo、直连 /favicon.ico 与解析页面 <link rel="icon"> 多路竞速获取 favicon（支持 ico/png/jpg/webp）
- * 注：Bing 无公开 favicon API，故使用 DuckDuckGo 作为第二源
- */
-
-function parseDomain(input) {
-  if (!input || typeof input !== 'string') return null
-  const trimmed = input.trim()
-  if (!trimmed) return null
-  try {
-    let url = trimmed
-    if (!/^https?:\/\//i.test(trimmed)) url = `https://${trimmed}`
-    const u = new URL(url)
-    return u.hostname
-  } catch {
-    return null
-  }
-}
-
-/** 从 HTML 中解析 <link rel="icon"> 的 href，支持 png/jpg/webp/svg 等 */
-function parseFaviconFromHtml(html, baseUrl) {
-  const linkRegex = /<link[^>]+>/gi
-  const links = html.match(linkRegex) || []
-  for (const tag of links) {
-    const relMatch = tag.match(/\brel\s*=\s*["']([^"']+)["']/i)
-    if (!relMatch) continue
-    const rel = relMatch[1].toLowerCase()
-    if (!rel.includes('icon')) continue
-    const hrefMatch = tag.match(/\bhref\s*=\s*["']([^"']+)["']/i)
-    if (!hrefMatch) continue
-    const href = hrefMatch[1].trim()
-    if (!href || href.startsWith('data:')) continue
-    try {
-      return new URL(href, baseUrl).href
-    } catch {
-      continue
-    }
-  }
-  return null
-}
-
-function firstSuccess(promises) {
-  return new Promise((resolve, reject) => {
-    let rejectedCount = 0
-    const total = promises.length
-    const onFulfill = (value) => {
-      if (!resolve.done) {
-        resolve.done = true
-        resolve(value)
-      }
-    }
-    const onReject = () => {
-      if (++rejectedCount === total && !resolve.done) reject(new Error('All sources failed'))
-    }
-    promises.forEach((p) => p.then(onFulfill, onReject))
-  })
-}
-
-export async function onRequestGet(context) {
-  const { request } = context
-  const url = new URL(request.url)
-  const domainParam = url.searchParams.get('domain') ?? url.searchParams.get('url') ?? url.searchParams.get('u')
-
-  const domain = parseDomain(domainParam)
-  if (!domain) {
-    return new Response(
-      JSON.stringify({
-        error: 'missing_domain',
-        message: '请提供 domain、url 或 u 参数，例如: ?url=https://twitter.com 或 ?domain=github.com',
-      }),
-      {
-        status: 400,
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-          'Access-Control-Allow-Origin': '*',
-        },
-      }
-    )
-  }
-
-  const size = Math.min(256, Math.max(16, parseInt(url.searchParams.get('size') || '128', 10) || 128))
-
-  const fetchOpts = {
-    headers: {
-      'User-Agent': 'Mozilla/5.0 (compatible; FaviconProxy/1.0)',
-    },
-  }
-
-  // 多路：Google、DuckDuckGo、直连 /favicon.ico、解析页面 <link rel="icon">（支持 png/jpg/webp）
-  const googleUrl = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=${size}`
-  const ddgUrl = `https://icons.duckduckgo.com/ip3/${encodeURIComponent(domain)}.ico`
-  const directUrl = `https://${domain}/favicon.ico`
-
-  // 四路竞速：任一路成功即返回，都不参与 fallback
-  const googlePromise = fetch(googleUrl, fetchOpts).then((r) =>
-    r.ok ? r : Promise.reject(new Error('Google non-OK'))
-  )
-  const ddgPromise = fetch(ddgUrl, fetchOpts).then((r) =>
-    r.ok ? r : Promise.reject(new Error('DDG non-OK'))
-  )
-  const directPromise = fetch(directUrl, fetchOpts).then((r) =>
-    r.ok ? r : Promise.reject(new Error('Direct non-OK'))
-  )
-
-  // 抓取首页 HTML，解析 <link rel="icon" href="...">，支持 png/jpg/webp/svg 等
-  const fromHtmlPromise = (async () => {
-    const pageRes = await fetch(`https://${domain}/`, { ...fetchOpts, redirect: 'follow' })
-    if (!pageRes.ok) throw new Error('Page non-OK')
-    const html = await pageRes.text()
-    const baseUrl = pageRes.url || `https://${domain}/`
-    const iconUrl = parseFaviconFromHtml(html, baseUrl)
-    if (!iconUrl) throw new Error('No icon in HTML')
-    const iconRes = await fetch(iconUrl, fetchOpts)
-    if (!iconRes.ok) throw new Error('Icon fetch non-OK')
-    return iconRes
-  })()
-
-  // 仅当以上四路全部失败时，才尝试 public/favicon.ico（最后才用，不参与竞速）
-  try {
-    const response = await firstSuccess([googlePromise, ddgPromise, directPromise, fromHtmlPromise])
-    const contentType = response.headers.get('Content-Type') || 'image/x-icon'
-    const body = await response.arrayBuffer()
-
-    return new Response(body, {
-      status: 200,
-      headers: {
-        'Content-Type': contentType,
-        'Cache-Control': 'public, max-age=86400',
-        'Access-Control-Allow-Origin': '*',
-        'X-Favicon-Domain': domain,
-      },
-    })
-  } catch (e) {
-    // 仅当四路（Google、DDG、直连 ico、页面解析）全部失败后，才用 public/favicon.ico
-    const fallbackUrl = `${url.origin}/public/favicon.ico`
-    const fallbackRes = await fetch(fallbackUrl, fetchOpts)
-    if (fallbackRes.ok) {
-      const contentType = fallbackRes.headers.get('Content-Type') || 'image/x-icon'
-      const body = await fallbackRes.arrayBuffer()
-      return new Response(body, {
-        status: 200,
-        headers: {
-          'Content-Type': contentType,
-          'Cache-Control': 'public, max-age=86400',
-          'Access-Control-Allow-Origin': '*',
-          'X-Favicon-Domain': domain,
-          'X-Favicon-Fallback': 'true',
-        },
-      })
-    }
-    return new Response(
-      JSON.stringify({
-        error: 'fetch_failed',
-        message: '无法从多路源获取该域名的 favicon，且未找到 public/favicon.ico 作为回退',
-        domain,
-      }),
-      {
-        status: 502,
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-          'Access-Control-Allow-Origin': '*',
-        },
-      }
-    )
-  }
-}
--- a/index.html
+++ b/index.html
@@ -1,42 +1,12 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Favicon 代理 API</title>
-  <style>
-    * { box-sizing: border-box; }
-    body { font-family: system-ui, sans-serif; max-width: 640px; margin: 0 auto; padding: 1.5rem; line-height: 1.6; }
-    h1 { font-size: 1.5rem; }
-    code { background: #f0f0f0; padding: .2em .4em; border-radius: 4px; }
-    pre { background: #f5f5f5; padding: 1rem; overflow: auto; border-radius: 6px; }
-    .example { margin: 1rem 0; }
-    .example img { vertical-align: middle; margin-right: .5rem; }
-  </style>
-</head>
-<body>
-  <h1>Favicon 代理 API</h1>
-  <p>通过 HTTP API 代理获取任意网站的 favicon，使用 <strong>Google</strong>、<strong>DuckDuckGo</strong> 与<strong>直连目标站</strong>三路竞速，谁先返回就用谁，适合在国内无法直连的站点。（Bing 无公开 favicon API，故用 DuckDuckGo 作为第二源。）</p>
-
-  <h2>用法</h2>
-  <p>GET 请求，支持参数：</p>
-  <ul>
-    <li><code>url</code> 或 <code>domain</code> 或 <code>u</code>：目标网站地址或域名（必填）</li>
-    <li><code>size</code>：图标尺寸，16–256，默认 128（仅对 Google 源有效）</li>
-  </ul>
-
-  <h2>示例</h2>
-  <div class="example">
-    <code>/api/favicon?url=https://twitter.com</code><br>
-    <img src="/api/favicon?url=https://twitter.com" alt="twitter" width="32" height="32">
-  </div>
-  <div class="example">
-    <code>/api/favicon?domain=github.com&size=64</code><br>
-    <img src="/api/favicon?domain=github.com&size=64" alt="github" width="64" height="64">
-  </div>
-
-  <h2>直接调用</h2>
-  <pre>GET https://你的 Pages 域名/api/favicon?url=https://example.com</pre>
-  <p>返回为图片二进制（或 400/502 JSON 错误）。</p>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Favicon 代理 API</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "cf-favicon",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "cf-typegen": "wrangler types",
+    "deploy": "npm run build && wrangler deploy",
+    "dev": "vite",
+    "preview": "npm run build && vite preview",
+    "check": "npm run build && wrangler deploy --dry-run"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.15.3",
+    "@cloudflare/workers-types": "^4.20250507.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.0",
+    "vite": "^6.0.0",
+    "wrangler": "^4.56.0"
+  }
+}
--- a/public/README.md
+++ b/public/README.md
@@ -1,7 +0,0 @@
-# 默认 Favicon
-
-将你的默认 `favicon.ico` 放在此目录下。
-
-当 Google、DuckDuckGo 与直连目标站都获取失败时，API 会返回本目录下的 `favicon.ico` 作为回退；若未放置该文件，则返回 502。
-
-响应头会带上 `X-Favicon-Fallback: true` 表示本次返回的是默认图标。
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,37 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+}
+
+pre {
+  background: #f5f5f5;
+  padding: 1rem;
+  overflow: auto;
+  border-radius: 6px;
+}
+
+.example {
+  margin: 1rem 0;
+}
+
+.example img {
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,53 @@
+export default function App() {
+  return (
+    <>
+      <h1>Favicon 代理 API</h1>
+      <p>
+        通过 HTTP API 代理获取任意网站的 favicon，使用 <strong>Google</strong>、
+        <strong>DuckDuckGo</strong> 与<strong>直连目标站</strong>
+        多路竞速，谁先返回就用谁，适合在国内无法直连的站点。（Bing 无公开 favicon
+        API，故用 DuckDuckGo 作为第二源。）
+      </p>
+
+      <h2>用法</h2>
+      <p>GET 请求，支持参数：</p>
+      <ul>
+        <li>
+          <code>url</code> 或 <code>domain</code> 或 <code>u</code>
+          ：目标网站地址或域名（必填）
+        </li>
+        <li>
+          <code>size</code>：图标尺寸，16–256，默认 128（仅对 Google 源有效）
+        </li>
+      </ul>
+
+      <h2>示例</h2>
+      <div className="example">
+        <code>/api/favicon?url=https://twitter.com</code>
+        <br />
+        <img
+          src="/api/favicon?url=https://twitter.com"
+          alt="twitter"
+          width={32}
+          height={32}
+        />
+      </div>
+      <div className="example">
+        <code>/api/favicon?domain=github.com&amp;size=64</code>
+        <br />
+        <img
+          src="/api/favicon?domain=github.com&size=64"
+          alt="github"
+          width={64}
+          height={64}
+        />
+      </div>
+
+      <h2>直接调用</h2>
+      <pre>
+        GET https://你的 Workers 域名/api/favicon?url=https://example.com
+      </pre>
+      <p>返回为图片二进制（或 400/502 JSON 错误）。</p>
+    </>
+  );
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./App.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/src/worker/favicon.ts
+++ b/src/worker/favicon.ts
@@ -0,0 +1,183 @@
+/**
+ * Favicon 代理 API
+ * 通过 Google、DuckDuckGo、直连 /favicon.ico 与解析页面 <link rel="icon"> 多路竞速获取 favicon（支持 ico/png/jpg/webp）
+ * 注：Bing 无公开 favicon API，故使用 DuckDuckGo 作为第二源
+ */
+
+function parseDomain(input: string | null): string | null {
+  if (!input || typeof input !== "string") return null;
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  try {
+    let url = trimmed;
+    if (!/^https?:\/\//i.test(trimmed)) url = `https://${trimmed}`;
+    const u = new URL(url);
+    return u.hostname;
+  } catch {
+    return null;
+  }
+}
+
+/** 从 HTML 中解析 <link rel="icon"> 的 href，支持 png/jpg/webp/svg 等 */
+function parseFaviconFromHtml(html: string, baseUrl: string): string | null {
+  const linkRegex = /<link[^>]+>/gi;
+  const links = html.match(linkRegex) || [];
+  for (const tag of links) {
+    const relMatch = tag.match(/\brel\s*=\s*["']([^"']+)["']/i);
+    if (!relMatch) continue;
+    const rel = relMatch[1].toLowerCase();
+    if (!rel.includes("icon")) continue;
+    const hrefMatch = tag.match(/\bhref\s*=\s*["']([^"']+)["']/i);
+    if (!hrefMatch) continue;
+    const href = hrefMatch[1].trim();
+    if (!href || href.startsWith("data:")) continue;
+    try {
+      return new URL(href, baseUrl).href;
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
+function firstSuccess<T>(promises: Promise<T>[]): Promise<T> {
+  return new Promise((resolve, reject) => {
+    let rejectedCount = 0;
+    const total = promises.length;
+    let done = false;
+    const onFulfill = (value: T) => {
+      if (!done) {
+        done = true;
+        resolve(value);
+      }
+    };
+    const onReject = () => {
+      if (++rejectedCount === total && !done)
+        reject(new Error("All sources failed"));
+    };
+    promises.forEach((p) => p.then(onFulfill, onReject));
+  });
+}
+
+export async function handleFaviconGet(
+  request: Request,
+  env: Env,
+): Promise<Response> {
+  const url = new URL(request.url);
+  const domainParam =
+    url.searchParams.get("domain") ??
+    url.searchParams.get("url") ??
+    url.searchParams.get("u");
+
+  const domain = parseDomain(domainParam);
+  if (!domain) {
+    return new Response(
+      JSON.stringify({
+        error: "missing_domain",
+        message:
+          "请提供 domain、url 或 u 参数，例如: ?url=https://twitter.com 或 ?domain=github.com",
+      }),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Access-Control-Allow-Origin": "*",
+        },
+      },
+    );
+  }
+
+  const size = Math.min(
+    256,
+    Math.max(16, parseInt(url.searchParams.get("size") || "128", 10) || 128),
+  );
+
+  const fetchOpts: RequestInit = {
+    headers: {
+      "User-Agent": "Mozilla/5.0 (compatible; FaviconProxy/1.0)",
+    },
+  };
+
+  const googleUrl = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=${size}`;
+  const ddgUrl = `https://icons.duckduckgo.com/ip3/${encodeURIComponent(domain)}.ico`;
+  const directUrl = `https://${domain}/favicon.ico`;
+
+  const googlePromise = fetch(googleUrl, fetchOpts).then((r) =>
+    r.ok ? r : Promise.reject(new Error("Google non-OK")),
+  );
+  const ddgPromise = fetch(ddgUrl, fetchOpts).then((r) =>
+    r.ok ? r : Promise.reject(new Error("DDG non-OK")),
+  );
+  const directPromise = fetch(directUrl, fetchOpts).then((r) =>
+    r.ok ? r : Promise.reject(new Error("Direct non-OK")),
+  );
+
+  const fromHtmlPromise = (async () => {
+    const pageRes = await fetch(`https://${domain}/`, {
+      ...fetchOpts,
+      redirect: "follow",
+    });
+    if (!pageRes.ok) throw new Error("Page non-OK");
+    const html = await pageRes.text();
+    const baseUrl = pageRes.url || `https://${domain}/`;
+    const iconUrl = parseFaviconFromHtml(html, baseUrl);
+    if (!iconUrl) throw new Error("No icon in HTML");
+    const iconRes = await fetch(iconUrl, fetchOpts);
+    if (!iconRes.ok) throw new Error("Icon fetch non-OK");
+    return iconRes;
+  })();
+
+  try {
+    const response = await firstSuccess([
+      googlePromise,
+      ddgPromise,
+      directPromise,
+      fromHtmlPromise,
+    ]);
+    const contentType = response.headers.get("Content-Type") || "image/x-icon";
+    const body = await response.arrayBuffer();
+
+    return new Response(body, {
+      status: 200,
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=86400",
+        "Access-Control-Allow-Origin": "*",
+        "X-Favicon-Domain": domain,
+      },
+    });
+  } catch {
+    const fallbackReq = new Request(new URL("/favicon.ico", request.url));
+    const fallbackRes = await env.ASSETS.fetch(fallbackReq);
+    if (fallbackRes.ok) {
+      const contentType =
+        fallbackRes.headers.get("Content-Type") || "image/x-icon";
+      const body = await fallbackRes.arrayBuffer();
+      return new Response(body, {
+        status: 200,
+        headers: {
+          "Content-Type": contentType,
+          "Cache-Control": "public, max-age=86400",
+          "Access-Control-Allow-Origin": "*",
+          "X-Favicon-Domain": domain,
+          "X-Favicon-Fallback": "true",
+        },
+      });
+    }
+    return new Response(
+      JSON.stringify({
+        error: "fetch_failed",
+        message:
+          "无法从多路源获取该域名的 favicon，且未找到站点根路径 /favicon.ico 作为回退",
+        domain,
+      }),
+      {
+        status: 502,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Access-Control-Allow-Origin": "*",
+        },
+      },
+    );
+  }
+}
--- a/src/worker/index.ts
+++ b/src/worker/index.ts
@@ -0,0 +1,11 @@
+import { handleFaviconGet } from "./favicon";
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    if (request.method === "GET" && url.pathname === "/api/favicon") {
+      return handleFaviconGet(request, env);
+    }
+    return new Response("Not Found", { status: 404 });
+  },
+};
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/worker/**"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.worker.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
--- a/tsconfig.worker.json
+++ b/tsconfig.worker.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "types": ["@cloudflare/workers-types"]
+  },
+  "include": ["src/worker/**/*.ts", "worker-configuration.d.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), cloudflare()],
+});
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@@ -0,0 +1,3 @@
+interface Env {
+  ASSETS: Fetcher;
+}
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -1,3 +1,11 @@
 name = "cf-favicon"
-compatibility_date = "2024-01-01"
-pages_build_output_dir = "."
+main = "src/worker/index.ts"
+compatibility_date = "2025-10-08"
+
+[assets]
+directory = "./dist/client"
+binding = "ASSETS"
+not_found_handling = "single-page-application"
+
+[build]
+command = "npm run build"