@ basinative/ favicon
SVG-First favicon生成器 + 每个 DuganLabs 项目的设计原始.
@basenative/favicon 是 BasicNative 回答"等待另一个通用的favion". 它为任何项目制作一个被打磨的、独特的SVG标记——加上辅助标记 apple-touch-icon, (中文(简体) ), maskable,网络应用程序显示,以及 对 <link> 要跳入的标签 <head>. Pure SVG prime; PNG 只在iOS或Android需要时才使用.
pnpm add -D @basenative/favicon
PNG倒计时(apple-touch-icon.png, (中文(简体) ), maskable.png(等等) @resvg/resvg-wasm,宣布为 optionalDependency ——大多数安装都是免费的. 如果安装跳过可选的依赖( N)--no-optional 明确加入:
pnpm add -D @resvg/resvg-wasm
品牌规则: SVG 第一级,光栅只有在iOS需要时才使用
每个现代浏览器(Chrome、Edge、Firefox、Safari 16) <link rel="icon" type="image/svg+xml"> 土生土长,包括在浏览器标签中. 用来. 将PNG churn保存在真正需要的平台上:
favicon.svg——主机,服务于每个浏览器.apple-touch-icon.png(180x180) (中文(简体) ) ——iOS家用屏幕.icon-192.png编号 :icon-512.png-Android Chrome(英语:Android Chrome)) (英语).maskable.png(512x512) (中文(简体) ) —— Android 适应性图标(其中80%的安全区被烤入).favicon.ico– 对非常老旧的浏览器可选带并悬浮;我们不生成它,而是生成<head>片段提到它是一个替代.
<head> 片断
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/favicon.svg" color="#0C0B09">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0C0B09">
你不必记住这些.. htmlTags() 财务报告和审定财务报表 defineFavicon().htmlTags() 为你解开绳子.
国 际
# Interactive — picks a preset, writes public/favicon.svg + manifest + (optional) PNGs.
bn-favicon init
# Non-interactive, idempotent (asks before overwriting unless --force):
bn-favicon init --preset tabs --out public
# Render a preset to stdout:
bn-favicon render basenative > public/favicon.svg
# Print the recommended <head> tags:
bn-favicon html --theme-color "#0C0B09"
# List presets:
bn-favicon list
若为 @resvg/resvg-wasm 已安装, init 还写 apple-touch-icon.png, (中文(简体) ), icon-192.png, (中文(简体) ), icon-512.png,以及 maskable.png。没有它,你只能得到 SVG 的设定,这对大多数网站都很好,直到你决定关心iOS家用屏幕图标为止,CLI打印出一条线来告诉你缺少什么以及如何安装它.
默认是名单 name编号 :short_name 使用预设的显示名(例如). basenative ——"BaseNative"). 过 --name 以覆盖或使用 defineFavicon(...).manifest({ name: ... }) 在方案方面.
程序化 API
import { defineFavicon } from "@basenative/favicon";
const fav = defineFavicon({
glyph: { kind: "monogram", text: "T", weight: 900, accentDot: true },
palette: { bg: "#0C0B09", fg: "#FFF3E0", accent: "#E8920A" },
shape: "rounded",
});
fav.svg; // <svg>…</svg> — primary asset
fav.apple; // square variant (no rounding) for iOS rasterization
fav.maskable; // 80% safe-zone variant for Android adaptive icons
fav.htmlTags(); // string[] — drop into <head>
fav.manifest({ name: "T4BS", themeColor: "#0C0B09" }); // JSON
您也可以直接通过一个预设名称 :
defineFavicon("basenative"); // → uses the BaseNative house mark
预设
8个DuganLabs项目船预建. 使用它们,叉子,或者自己滚.
| 预设 | 格莱弗 | 形状 | 百分点 |
|---|---|---|---|
tabs | 单克 T级 +重音点 | 四舍五入 | #E8920A |
basenative | 相接三角形 | 四舍五入 | #E8920A |
duganlabs | 单克 数字 | 屏蔽 | #E8920A |
pendingbusiness | 符号——时钟 | 四舍五入 | #4EAF7C |
greenput | 符号——叶 | 圆 | #4EAF7C |
warrendugan | 单克 W级 编号 : D级 堆栈 | qui | #E8920A |
ralph-station | sigil——车站标记 | 钻石 | #5EA0E8 |
warren-sys | 符号 — 终端提示 | 平方圆 | #66E0A0 |
每个预设都转换成静态SVG templates/favicons/<preset>.svg 这样你就可以 cp 直接进入您的 public/ 如果您不想安装运行时间 :
cp node_modules/@basenative/favicon/templates/favicons/tabs.svg public/favicon.svg
设计新预设
预设只是一个对象 :
export const myproject = {
name: "myproject",
description: "A one-line description for CLI help",
glyph: { kind: "monogram", text: "MP", weight: 900, letterSpacing: -28 },
palette: { bg: "#0C0B09", fg: "#F0EDE4", accent: "#E8920A" },
shape: "rounded",
themeColor: "#0C0B09",
};
食谱——取出三个接头:
-
格莱弗类型
monogram- 1 -3个字母。 键 :text, (中文(简体) ),weight, (中文(简体) ),letterSpacing, (中文(简体) ),stack, (中文(简体) ),accentDot。 。 。 .symbol——取自所编集:lightbulb, (中文(简体) ),leaf, (中文(简体) ),bolt, (中文(简体) ),key, (中文(简体) ),eye, (中文(简体) ),asterisk, (中文(简体) ),gear, (中文(简体) ),terminal-prompt, (中文(简体) ),calendar, (中文(简体) ),beaker, (中文(简体) ),clock, (中文(简体) ),anchor。 。 。 .sigil- 抽象标记:concentric-square, (中文(简体) ),intersecting-circles, (中文(简体) ),hex-grid, (中文(简体) ),signal-stack, (中文(简体) ),station-mark。 。 。 .wordmark——"相"中"相"中"相""相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相相"相"相"相"相"相"相"相"相相相"相"相"相相"相"相相"相"相"相"相相"相相"相"相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
-
调色板 - 通过
{ bg, fg, accent },或一六分(作为口音处理,与家用木炭配对). 这个fg自动从bg省去光线. -
形状 —— 说
square, (中文(简体) ),rounded, (中文(简体) ),circle, (中文(简体) ),squircle, (中文(简体) ),shield,或diamond。形状的剪接通了胶片,可以将平方单体降入circle形状和角 得到修剪干净.
16x16测试
整点是 看起来像一个浏览器Tab favion。 将 SVG 显示为 <link rel="icon"> 看看标签 如果它读作一个固态的blob,简化——少下下划线,更形成对比.
模块
| 路径 | 这是什么 |
|---|---|
@basenative/favicon | 公共 API : defineFavicon, (中文(简体) ), htmlTags, (中文(简体) ), presets。 。 。 . |
@basenative/favicon/render | renderFaviconSvg, (中文(简体) ), shape,可掩体+苹果变种. |
@basenative/favicon/glyphs | Glyph 图书馆 —— monogram, (中文(简体) ), symbol, (中文(简体) ), sigil, (中文(简体) ), wordmark。 。 。 . |
@basenative/favicon/palette | 颜色帮助器 - resolvePalette, (中文(简体) ), mix, (中文(简体) ), luminance。 。 。 . |
@basenative/favicon/manifest | Web App Manifest 构建器. |
@basenative/favicon/png | 可选 PNG 发光器( 可选分解 : @resvg/resvg-wasm) (中文(简体) ). |
@basenative/favicon/presets | DuganLabs预设地图. |
许可证
阿帕奇-2.0 杜干拉布斯(英语:DuganLabs). 由 BaseNative 所建—— BaseNative.dev.