browser-logos 归档资源包：@browser-logos/chrome-android_18-36 的获取、安装与多尺寸 PNG 生成原理

• 前端

本文以 browser-logos 仓库归档区的 Chrome v18-36 for Android 浏览器 Logo 资源包为主线，讲解如何通过 npm、Yarn 与 cdnjs 三种方式获取该 Logo，并深入源码剖析多尺寸 PNG 的批量生成流程，以及 README、package.json 的自动化产出机制。读完本文，你既能直接上手安装使用该资源包，也能理解 browser-logos 项目统一的 Logo 资源组织与发布规范。

一、资源包定位：归档区中的 Chrome for Android 历史 Logo

browser-logos 项目按"当前"与"归档"两类管理浏览器 Logo：仍活跃浏览器的 Logo 位于 src/，而历史版本、或已不再活跃浏览器的 Logo 则统一收进 src/archive/。本资源包正是后者中的一员，目录为src/archive/chrome-android_18-36。

目录名与 npm 包名中的18-36标识了该 Logo 对应的版本区间——Chrome for Android 第 18 至 36 版。在 归档索引 的 "Chrome (Android)" 小节中，该目录与chrome-beta-android_25-36并列展示，用于呈现 Android 端 Chrome 及其 Beta 渠道的历史图标；而如果你需要的是当前版本的 Chrome 图标，则应使用 src/chrome/ 下的资源。归档区与当前区互不覆盖，使用时需按目标浏览器版本选择合适的包。

根据仓库根目录 README.md 的说明，browser-logos 中所有 Logo 均为**高分辨率（high resolution）且带透明背景（transparent backgrounds）**的图片，可直接用于演示文稿、博客配图或站点展示。

二、文件清单：一张主图与八种导出尺寸

该目录下共包含 9 张 PNG，遵循统一命名规范chrome-android_18-36_<宽>x<高>.png，其中不带尺寸后缀的chrome-android_18-36.png即原始主图（512x512）。具体清单如下：

这套"主图 + 8 种固定尺寸"的文件结构并非手工逐个绘制，而是由仓库脚本批量生成，具体机制见第五节。

三、如何获取该 Logo：官方 README 的三种方式

资源包 README 的 "How to get the logo" 一节给出了两种获取路径：通过包管理器安装或通过 cdnjs 引用。下面逐一说明。

3.1 通过 npm 安装

npm install --save-dev @browser-logos/chrome-android_18-36

3.2 通过 Yarn 安装

yarn add --dev @browser-logos/chrome-android_18-36

两条命令均使用--save-dev，表示该 Logo 包作为**开发依赖（devDependencies）**写入项目——这与它作为静态资源、仅供构建/展示场景使用的定位相符。安装完成后，包内即包含上文第二节的 9 张 PNG，可在代码中按需引用。

3.3 通过 cdnjs 使用

如果不想把图片打进自己的项目，也可以直接使用 cdnjs 上托管的 browser-logos 静态资源库，通过 URL 引用对应尺寸的 PNG。README 中同时注明了cdnjs、npm、yarn三个外部入口的链接标签（README.md）。

3.4 包元数据一览

安装行为背后的元数据由目录内的 package.json 定义，关键字段如下：

可见每个 Logo 包都遵循@browser-logos/<package-name>的命名空间，版本号独立维护。

四、版本历史：CHANGELOG 揭示的维护轨迹

CHANGELOG.md 记录了该包从 2016 年至今的演进，主要节点如下：

• 1.0.0（2016-12-18）：包首次发布。
• 1.0.1（2017-06-03）：对 README 做小幅修改。
• 1.0.2（2017-12-30）：进一步优化图片体积（"Further optimize images"）。
• 1.0.3（2019-03-07）：继续压缩优化图片，并改进 README。
• 1.0.4（2019-03-15）：改善 README 排版，一度移除 Yarn 安装说明。
• 1.0.5（2019-08-27）：在package.json中显式声明包所在目录（repository.directory）。
• 1.0.6（2019-10-13）：重新加入 Yarn 安装说明。
• 1.0.7（2019-11-30）：移除 cdnjs 推荐。
• 1.0.8（2020-07-11，当前版本）：重新加入 cdnjs 使用推荐，并统一 README 排版。

从 1.0.7 移除 cdnjs、1.0.8 又恢复 cdnjs 的反复，可以看出维护者对"包管理器优先、cdnjs 兜底"的取舍有过调整，最终稳定为"npm/Yarn + cdnjs"并存的推荐组合。这也解释了为什么当前 README 同时列出这三种方式。

五、源码级原理：多尺寸 PNG 如何批量生成

仓库中的 scripts/generate-images.sh 负责把每个 Logo 目录的主图批量缩放为 8 种尺寸。脚本头部注释给出了用法：generate-images.sh [dir] [dir] ...，例如generate-images.sh src/archive/arora。

5.1 固定尺寸清单

declare -r -a IMAGE_SIZES=( "16x16" "24x24" "32x32" "48x48" "64x64" "128x128" "256x256" "512x512" )

（generate-images.sh）

这正是第二节表格中 8 个尺寸的来源。脚本会先校验主图chrome-android_18-36.png是否存在（L91-L94），随后循环调用 ImageMagick 的convert命令逐一生成：

convert "$path/$basename.png" \ $CONVERT_BASE_OPTIONS \ -resize "$imageSize" \ "$path/${basename}_$imageSize.png"

5.2 缩放质量参数

为保证从 512x512 缩小到 16x16 时边缘依然清晰，脚本内置了一组高质量缩放参数（CONVERT_BASE_OPTIONS）：

-colorspace RGB \ +sigmoidal-contrast 11.6933 \ -define filter:filter=Sinc \ -define filter:window=Jinc \ -define filter:lobes=3 \ -sigmoidal-contrast 11.6933 \ -colorspace sRGB \ -background transparent \ -gravity center

其中filter:filter=Sinc/filter:window=Jinc是 ImageMagick 中适合高保真缩小的重采样滤波器组合，lobes=3控制滤波核的瓣数；+sigmoidal-contrast与随后的反向操作构成对比度增强-还原，用于减少缩小过程的细节损失；-colorspace RGB → sRGB的往返则确保缩放在线性光空间进行；-background transparent -gravity center保证透明背景与居中构图。这就是最终 PNG 即使小到 16x16 仍能保持锐利且背景透明的原因。

5.3 连带生成的组图与预览

脚本还会在必要时连带更新两类聚合产物（L193-L213）：一是src/old-browser-logos.gif、src/browser-logos.gif这类由各目录 256x256 缩略图拼成的预览 GIF；二是src/main-desktop-browser-logos.png、src/main-mobile-browser-logos.png这类主浏览器拼图。后者仅当本次处理的目标属于MAIN_DESKTOP_BROWSERS（chrome/edge/firefox/opera/safari）或MAIN_MOBILE_BROWSERS列表时才触发——chrome-android_18-36属于归档旧版，不在这两个列表内，因此不会影响主拼图。

六、源码级原理：README 与 package.json 的自动化生成

细心的读者会发现，第二节文件清单与目录中 README.md、package.json 的格式，在 src/ 下其他 Logo 目录中几乎一模一样。这是因为它们由 scripts/prepare-for-publishing.js 按统一模板自动生成。

6.1 包名到展示名的解析

脚本的getData()（L107-L123）以目录名为输入，按_分割：

const name = packageName.split('_')[0]; // "chrome-android" const versions = packageName.split('_')[1] || ''; // "18-36"

随后prettifyName()（L100-L105）将连字符转空格并把单词首字母大写，最终拼出Chrome Android v18-36这类展示名——本目录 README 标题 "Chrome v18-36 for Android" 即由此而来。getData()还会通过git log --pretty=format:'%H' -n 1 <dir>取该目录最后一次提交的 SHA，用于生成指向精确提交版本（而非浮动的main分支）的图片直链，保证 README 中引用的图片地址永不漂移。

6.2 模板产出的两份文件

createReadme()（L60-L98）按固定模板写出 README，内容结构与本目录 README 完全一致：标题行 + 240 高的图片表格（引用_512x512.png）+ "How to get the logo" 安装说明（npm/Yarn/cdnjs 三段 + 链接标签）。createPackageJSON()（L33-L58）则按模板写出 package.json，keywords由包名派生chrome-android、chrome-android-logo等条目。

由此可见，"主图 + 8 尺寸 + 标准 README + 标准 package.json"是 browser-logos 每个 Logo 包的统一出厂规格，本文主题资源包正是这一流水线的产物之一。

七、在项目中使用该 Logo

安装或拿到文件后，可按需引用不同尺寸：

<!-- 站点 favicon：用最小尺寸 --> <link rel="icon" type="image/png" href="node_modules/@browser-logos/chrome-android_18-36/chrome-android_18-36_16x16.png"> <!-- 页面展示：用大尺寸保证清晰度 --> <img src="chrome-android_18-36_256x256.png" alt="Chrome v18-36 for Android browser logo" width="128" height="128">

选图建议：作为 favicon 使用 16/32 像素版本；作为页面或文档配图使用 128/256 像素版本；需要高清印刷或大屏展示时使用 512 像素版本。由于所有尺寸均为透明背景 PNG，可直接叠加在任意底色之上。

需要说明的是：仓库中的 Logo 均为各浏览器厂商的商标资产，使用时请注意相应商标与版权条款（参见根目录 README.md 的 Legal 章节——所有 Logo 与商标归其各自所有者所有）。

八、小结

src/archive/chrome-android_18-36是 browser-logos 归档区中针对 Chrome for Android 第 18-36 版的历史 Logo 资源包：安装命令为npm install --save-dev @browser-logos/chrome-android_18-36（或对应 Yarn 命令），也可经 cdnjs 引用；包内含 1 张 512x512 主图与 8 种标准尺寸透明 PNG。其背后由 generate-images.sh 完成高质量批量缩放、由 prepare-for-publishing.js 自动产出标准 README 与 package.json，版本演进记录在 CHANGELOG.md 中（当前 1.0.8）。如果你需要在项目中展示 Chrome for Android 的历史图标，这个包提供了现成、规范、可直接集成的高清素材。

• 前端