# 网站图标生成器为 Next.js 项目生成完整的图标集。 ## 工作流程 ### 第 1 步：自动检测应用程序信息 **重要提示：** 在向用户询问任何内容之前，请扫描代码库以提取： # 按顺序检查这些文件： #### 1\.包.json // 读取 package.json 中的名称和描述 { "name": "my-app", // 应用名称 "description": "..." // 应用描述 } #### 2\. Next.js 元数据 (app/layout.tsx) // 寻找元数据导出导出常量元数据：元数据 = { title: "应用程序标题", // 应用程序名称 description: "...", // 应用描述 }; // 或者metadataBase, applicationName #### 3\.自述文件.md # 应用程序名称 <- H1 摘录描述段落 <- 提取第一段 #### 4\. Tailwind 配置 (tailwind.config.ts) // 在 theme.extend.colors 中查找自定义颜色主题：{ 扩展：{ 颜色：{ Primary: "#6366f1", // 品牌颜色品牌：{ ... } } } } #### 5\. CSS 变量 (app/globals.css) ：根{ --主要：#6366f1； /* 品牌颜色 */ --品牌颜色：...； } #### 6\。现有的网站图标/图标 # 检查图标是否已经存在公共/favicon.ico 公共/apple-touch-icon.png 应用程序/icon.tsx 应用程序/图标.png ### 第 2 步：展示调查结果并确认扫描后，展示发现的内容：我从您的代码库中找到了以下内容：应用程序名称：史翠格简介：专业认证考试学习平台品牌颜色：#8b5cf6（来自 Tailwind 配置）现有图标：未找到我应该基于此生成一个网站图标吗？或者您想定制？仅在以下情况下提问： * 应用程序名称缺失或不清楚 * 未找到品牌颜色（根据应用类型建议） * 用户想要覆盖检测到的值 ### 第 3 步：选择生成方法根据用户输入，选择以下方法之一： ** ** ## 选项 A：根据描述生成（无源图像） ### A1：文本/基于首字母的图标最适合：专业的 SaaS 应用程序、干净的最小品牌。 // 应用程序/icon.tsx 从“next/og”导入{ImageResponse}；导出常量运行时=“边缘”；导出常量 contentType = "image/png"; 导出常量大小= {宽度：32，高度：32}；导出默认函数 Icon() { 返回新的图像响应（（

{/* 应用名称的首字母或缩写 */} S

), { ...尺寸 } ）； } 创建匹配的“apple-icon.tsx”： // 应用程序/apple-icon.tsx 从“next/og”导入{ImageResponse}；导出常量运行时=“边缘”；导出常量 contentType = "image/png"; 导出常量大小= {宽度：180，高度：180}；导出默认函数 AppleIcon() { 返回新的图像响应（（

), { ...尺寸 } ）； } ### A2：基于表情符号的图标最适合：有趣的应用程序、MVP、快速原型。 // 应用程序/icon.tsx 从“next/og”导入{ImageResponse}；导出常量运行时=“边缘”；导出常量 contentType = "image/png"; 导出常量大小= {宽度：32，高度：32}；导出默认函数 Icon() { 返回新的图像响应（（

{/* 选择代表应用的表情符号 */} 🚀

), { ...尺寸 } ）； } ### A3：SVG 图标（可缩放，深色模式支持）最适合：技术应用程序、开发人员工具。 // 应用程序/icon.tsx 从“next/og”导入{ImageResponse}；导出常量运行时=“边缘”；导出常量 contentType = "image/png"; 导出常量大小= {宽度：32，高度：32}；导出默认函数 Icon() { 返回新的图像响应（（

{/* 简单的几何形状或符号 */}

), { ...尺寸 } ）； } ### 按应用程序类型划分的设计指南应用程序类型 |风格|颜色 |图标创意 ---|---|---|--- 金融/银行|简约、专业 |蓝色、绿色、深色|字母、盾牌、图表生产力 |干净、现代|紫色、蓝色|复选标记、图层、网格社交/社区 |友善、热情|橙色、粉色|心、人、聊天开发者工具 |技术性，黑暗 |深灰色、青色|端子、括号、代码电子商务|大胆、值得信赖|橙色、蓝色|购物车、袋子、标签健康/健身 |活力、清新|绿色、青色 |心、叶、脉教育 |平易近人 |蓝色、黄色|书、帽子、灯泡 ### 颜色建议根据应用用途，建议颜色：常量颜色方案 = { 专业：“线性渐变（135deg，#1e3a8a 0%，#3b82f6 100%）”，创意：“线性渐变（135deg，#ec4899 0%，#8b5cf6 100%）”，增长：“线性梯度（135deg，#059669 0%，#10b981 100%）”，能量：“线性梯度（135deg，#ea580c 0%，#f59e0b 100%）”，信任：“线性梯度（135deg，#0284c7 0％，#06b6d4 100％）”，最小：“#0f172a”，//纯黑 light: "#f8fafc", // 带彩色图标的常亮灯 }; ** ** ## 选项 B：从现有源图像生成 ### B1：使用Sharp（推荐）发髻加尖 // 脚本/generate-favicons.ts 从“锐利”导入锐利；从“路径”导入{加入}； const SOURCE = "源图标.png"; const OUTPUT_DIR = "公共"; 常量大小 = [ {名称：“favicon-16x16.png”，大小：16}， {名称：“favicon-32x32.png”，大小：32}， { 名称：“apple-touch-icon.png”，大小：180 }， { 名称：“android-chrome-192x192.png”，大小：192 }， {名称：“android-chrome-512x512.png”，大小：512}， ]; 异步函数generateFavicons() { for (const { 名称, 大小 } of 尺寸) { 等待夏普（来源） .调整大小（大小，大小） .png() .toFile(加入(OUTPUT_DIR, 名称)); console.log(`生成：${name}`); } // 创建 ICO 等待夏普（来源） .调整大小(32, 32) .toFile(join(OUTPUT_DIR, "favicon.ico")); } 生成网站图标（）； ### B2：使用 ImageMagick 酿造安装imagemagick # 生成所有尺寸转换 source.png -调整大小 16x16 public/favicon-16x16.png 转换 source.png -调整大小 32x32 public/favicon-32x32.png 转换 source.png -调整大小 180x180 public/apple-touch-icon.png 转换 source.png -调整大小 192x192 public/android-chrome-192x192.png 转换 source.png -调整大小 512x512 public/android-chrome-512x512.png 转换 source.png -resize 32x32 -define icon:auto-resize=32,16 public/favicon.ico ** ** ## 步骤 3：创建 Web 清单 // 公共/site.webmanifest { “名称”：“APP_NAME”， "short_name": "APP_SHORT", “描述”：“APP_DESCRIPTION”， “图标”：[ { "src": "/android-chrome-192x192.png", “尺寸”：“192x192”， “类型”：“图像/png” }, { "src": "/android-chrome-512x512.png", “尺寸”：“512x512”， “类型”：“图像/png” } ], "主题颜色": "#PRIMARY_COLOR", "背景颜色": "#ffffff", “显示”：“独立”， “开始网址”：“/” } 或者使用动态清单： // 应用程序/manifest.ts 从“next”导入类型{MetadataRoute}；导出默认函数manifest(): MetadataRoute.Manifest { 返回{ name: “应用程序名称”, 短名称：“应用程序”，描述：“应用程序描述”，开始网址：“/”，显示：“独立”，背景颜色：“#ffffff”，主题颜色：“#6366f1”，图标：[ { src: "/android-chrome-192x192.png", 尺寸：“192x192”，类型：“图像/png”， }, { src: "/android-chrome-512x512.png", 尺寸：“512x512”，类型：“图像/png”， }, ], }; } ## 步骤 4：配置元数据（如果使用静态文件） // 应用程序/layout.tsx 从“下一个”导入类型{元数据}；导出常量元数据：元数据 = { 标题：“应用程序名称”，描述：“应用程序描述”，图标：{ 图标：[ { url: "/favicon-32x32.png", 尺寸: "32x32", 类型: "image/png" }, { url: "/favicon-16x16.png", 尺寸: "16x16", 类型: "image/png" }, ], 苹果：[ { url: "/apple-touch-icon.png", 尺寸: "180x180", 类型: "image/png" }, ], }, 清单：“/site.webmanifest”， }; ## 交互流程运行“/favicon”时： ### 1\.首先，扫描代码库（默默地）： # 读取这些文件猫包.json 猫应用程序/layout.tsx 猫自述文件.md 猫 tailwind.config.ts 猫应用程序/globals.css ls public/favicon* 应用程序/图标* 2>/dev/null ### 2\.目前的发现：我扫描了你的代码库并发现：应用程序名称：史翠格简介：专业认证考试学习平台品牌颜色：#8b5cf6（来自 tailwind.config.ts）现有图标：无我将生成一个图标： - 紫色渐变背景上的字母“S” - 专业风格（匹配教育/学习应用程序）继续这个吗？或者定制（名称/颜色/样式）？ ### 3\.如果信息缺失，仅询问需要什么：我无法检测到品牌颜色。我应该使用什么颜色？ 1.紫色（教育/学习） 2.蓝色（信任/专业） 3.绿色（成长/成功） 4. 自定义十六进制代码 > 1 ### 4\.生成： * `app/icon.tsx` \- 动态 32x32 图标 * `app/apple-icon.tsx` \- 动态 180x180 Apple 图标 * `app/manifest.ts` \- PWA 清单 * 使用主题颜色更新 `app/layout.tsx` ## 文件清单 ### 对于动态图标（选项 A）应用程序/ ├── icon.tsx # 32x32 图标（生成） ├── apple-icon.tsx # 180x180 Apple 图标（生成） └── manifest.ts # PWA 清单 ### 对于静态图标（选项 B）公共/ ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── 苹果触摸图标.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── site.webmanifest ## 故障排除问题 |解决方案 ---|--- 图标未更新 |清除缓存，重启开发服务器苹果图标不显示 |必须恰好为 180x180 PNG 动态图标500错误|检查 ImageResponse 语法表情符号未渲染 |使用系统表情符号字体渐变看起来不对 |使用标准 CSS 渐变语法

图标

包含技能