企业官网建设流程全解析

做应用开发的，十有八九都被图标折腾过：App功能逻辑都写完了，结果图标一上真机就被系统套了一层奇怪的形状，原本设计得挺好看的图案边缘直接切掉一块；或者图标缩成指甲盖大小，四周空荡荡的；再或者背景色没铺满，露出桌面壁纸，丑得没法看。这些问题十有八九都是同一个根源——你没有把图标的前景图（foreground）和后景图（background）分开配置。注意，这里说的不是Photoshop里那种图层概念，而是Android自8.0（API 26）起推行的自适应图标（Adaptive Icon）体系里的一对官方概念。

整个机制说穿了其实很简单：系统要求你提供两张图，一张背景图负责铺底色、一张前景图承载主视觉，交给系统之后，由手机厂商预设的遮罩形状来裁剪和缩放。这个设计解决的不只是“图标被切掉”这么简单，它让一套图标素材可以通吃圆形、圆角方形、方形、泪滴形等各种桌面形态，这也是Google Play商店从2021年开始强制所有上架应用支持自适应图标的原因。这篇文章我就把这套配置逻辑从里到外拆干净：素材怎么做、尺寸怎么定、XML怎么配、老系统怎么兼容、动态图标怎么玩，以及我前前后后踩过的那些坑。

标题里说的“后景图”，在Android自适应图标体系里对应的就是background层，下面我统一叫背景层。至于Windows、macOS那些平台的桌面图标，走的还是“单张多尺寸”的静态图方案，不存在前景/后景分层这回事，所以这篇文章的实操部分全部以Android开发为例，但“主体居中、四周留余量”的设计思路对所有平台的图标制作都成立。

1. 为什么应用图标要拆成前景图和背景图

1.1 一张静态位图解决不了的问题

在Android 8.0之前，应用图标就是一张固定形状的PNG，系统显示什么形状就是什么形状。问题来了：Google原生系统桌面图标习惯用圆形，但三星、小米、OPPO、vivo这些厂商的桌面形状并不统一，有的用圆角矩形，有的用方形，有的干脆搞个异形。开发商要是想保证每个桌面都好看，就得针对每家系统各切一套图标，改一次Logo就得重新做一整套，维护成本高到离谱。更麻烦的是用户一旦换了第三方桌面或者图标包，图标形状一变，原图四个角就漏了馅。

谷歌推出自适应图标的思路是釜底抽薪——不再规定图标最终长什么形状，而是规定“你只需要给我两层素材，形状由系统现裁”。背景层决定图标的底色和纹理，前景层放品牌主视觉，系统拿到这两层之后按遮罩合成。这个设计有点像印章和印泥分离：印泥（背景层）可以被裁成任何形状，印章（前景层）永远留在中心位置，只要印章没有压到印泥边缘，怎么裁都伤不到图案主体。

1.2 前景图和背景图各自承担什么职责

背景图的任务是铺满整个108x108dp画布，提供一个完全不透明的底座。它可以是一张位图、一个渐变色、一个矢量图形，甚至是一组layer-list的组合。但有一个铁律：必须不透明、必须铺满。因为系统遮罩裁剪的是整张合成后的图标，如果背景存在透明像素，裁剪后露出来的就是桌面壁纸，图标看起来像被捅破了一个洞。

前景图承载的是品牌主元素——Logo、吉祥物、产品图形、文字缩写。前景图允许有透明区域，但主体内容必须高度集中。这个“集中”不是审美建议，而是硬性规则：画面四周会被遮罩吃掉一圈，只有中心区域是安全的。我见过太多人直接把一张完整设计稿导出成前景图，边缘元素被切得七零八落，然后跑来问为什么图标坏了——因为完整设计稿里本来就没给遮罩留余量。

这里要强调一个关键认知：前景图和背景图不是把一张图切成两半，而是分别设计的两个图层。理想的配合是——背景负责填充形状，前景负责表达主题，两者叠加之后才是一张完整的图标。背景如果太花哨，会抢前景的戏；前景如果太靠边，会被遮罩切断；两层之间的配合需要刻意设计，不是随手导一下就行。

2. 自适应图标的尺寸体系与安全区规则

2.1 108x108dp画布：33%的裁剪余量从哪来

谷歌规定的自适应图标画布是108x108dp，但系统只保证中心66x66dp这个区域不被任何遮罩裁掉。也就是说，画布四边各有(108-66)/2 = 21dp的余量，约占单边尺寸的19%，整张画布约1/3的面积是预留给各种遮罩形状“吃掉”的。

这21dp不是拍脑袋定的。系统遮罩在极端情况下还要对图标做二次缩放，比如用户开启了放大视图、调整了字体缩放比例，系统都可能对图标做额外的缩放和位移。预留足够的裁剪余量，才能保证图标主体在任何场景下都不会因为缩放而冲出遮罩边界。

这里需要把“安全区”分三个层级来理解。最外层是108x108dp完整画布，角色是背景的铺设区，背景必须把这个区域全部覆盖。中间层是中心66x66dp圆形区域，这是所有遮罩的公共保留区，前景主体可以放心放在这里。最内层是中心约48dp的圆形区域，这是品牌元素核心区，Logo主图形、产品名这些最关键的信息应该收进这个范围。很多设计师会把主体放在48到66dp之间，不是不行，但要承担“在部分异形遮罩下边缘被削”的风险，我的习惯是核心内容一律控制在40到48dp。

2.2 各厂商遮罩形状与设计应对

不同的遮罩形状对设计的杀伤力完全不一样。同样一张前景图，在圆形遮罩下四角全被切掉，在圆角方形遮罩下可能只伤到四个角，遇到方角遮罩则几乎不裁切。下面是市面上主流的情况，我自己实测汇总了一张表：

看到这个表你就明白为什么谷歌要反复强调安全区了——没有任何单一形状能覆盖所有设备。最稳妥的设计策略是两头兼顾：背景图整张铺满，不容许一像素的透明；前景图主体收进中心48dp以内，给各种遮罩留够发挥空间。这样圆形遮罩不会切掉Logo，方形遮罩也不会让图标显得太空。

2.3 dp、px与多密度适配

这部分容易忽略，但对适配很关键。Android用dp做逻辑单位，1dp在不同的屏幕密度下对应的物理像素不同。自适应图标的108x108dp画布，在mdpi屏上等于108px，在xxxhdpi上则要432px。具体对应关系如下：

所以如果你用位图做前景图，源图尺寸至少要到512x512px才能保证在最高密度屏幕上不糊。这也是我一直建议用矢量图做前景图的原因——VectorDrawable不受密度限制，任意缩放都清晰，打包体积还小。

3. 完整配置流程：从素材准备到打包上架

3.1 素材准备：位图、矢量图与背景的三种做法

先说位图。用PNG做前景图时，我建议源图准备512x512px以上，再根据上面那张密度表切到mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五个目录，文件名一致，系统会自动选适配密度的版本。JPG也能用，但不支持透明通道，前景图基本别考虑JPG。

背景层的做法更灵活，我按实际使用频率排个序：

• 纯色背景：直接在XML里写<color>资源，最简单，但视觉上容易显得单调
• 渐变背景：用shape drawable定义角度和渐变色，视觉效果立刻上一个档次
• 位图纹理：适合有品牌质感的图标，注意确保纹理中间部分干净，四周花哨一点没关系
• layer-list组合：底层放渐变、上层叠加半透明装饰，是我在项目里最常用的做法

一个我常用的背景layer-list模板，比如做一个深蓝色渐变底加上细微的网格纹理：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <gradient android:startColor="#FF0D1B2A" android:endColor="#FF1B263B" android:angle="45"/> </shape> </item> <item> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#2200A8E8"/> </shape> </item> </layer-list>

前景图我强烈建议用VectorDrawable画。第一次画可能觉得路径麻烦，但矢量图有三个不可替代的好处：任意缩放不模糊、XML文件才几KB、可以直接在Android Studio的预览面板里调整。画的时候注意viewportWidth和viewportHeight建议直接设成108，坐标系中心就是54,54，画主体时以这个坐标为中心。

3.2 XML声明与Manifest接入

素材准备好之后，核心配置就是在res/mipmap-anydpi-v26目录下创建一个XML文件，用adaptive-icon标签把两层资源串起来。这个目录名里的v26就是API 26的意思，系统会在这个版本及以上优先使用XML，低版本自动忽略。

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> </adaptive-icon>

然后在AndroidManifest.xml的application节点下指定图标：

<application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:label="@string/app_name">

android:roundIcon是Android 8.0引入的单独属性，指向圆形版本图标。如果你没有单独做圆形版，直接把roundIcon也指向同一个ic_launcher就行。我实测过，系统会优先用roundIcon，没配置才回退到icon。

3.3 兼容老系统的双轨方案

adaptive-icon标签在API 25及以下设备上是无法识别的，系统看到XML会直接忽略。所以你需要保证这些旧设备能拿到一张传统PNG图标。最省心的做法是双轨并行：

• mipmap-anydpi-v26/ic_launcher.xml：给新系统用，内容就是adaptive-icon
• mipmap-mdpi/ic_launcher.png、mipmap-hdpi/ic_launcher.png等：给旧系统用

这样无论设备是什么系统版本，都能通过同一个资源名@mipmap/ic_launcher自动加载到正确版本。mipmap-anydpi-v26这个目录创建的时候，记得把各密度的PNG都补齐，缺了一个密度，对应设备上就会出现模糊拉伸。

Android Studio有个一键工具能省掉手工操作：右键res目录，New > Image Asset，界面里可以分别导入前景图、背景图，并自动生成所有密度的PNG和v26目录下的XML。这个工具生成的前景图默认是108dp铺满画布，以我自己的经验看，它生成的东西只能当起步模板，里面的前景图主体比例通常偏大，真机裁切风险高，我后面还要手动改坐标系。想完全靠工具偷懒，不存在的。

3.4 一个完整的实操演示：给“简时”App配图标

拿一个工具类App举个完整例子，名字叫“简时”，产品定位是极简计时器，图标想要表达“时钟+极简”的感觉。

第一步：背景层。我在drawable/ic_launcher_background.xml里写了一个深蓝到浅蓝的45度渐变，配合一层极细的描边纹理，模拟表盘的质感。

第二步：前景层。在drawable/ic_launcher_foreground.xml里画一个白色圆形表盘加上两根指针。矢量图形状的pathData我用的是相对坐标，圆心的位置放在viewport的(54,54)，也就是108x108画布的正中心：

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="108dp" android:height="108dp" android:viewportWidth="108" android:viewportHeight="108"> <!-- 表盘外圈 --> <path android:fillColor="#FFFFFF" android:pathData="M54,54m-20,0a20,20 0,1 1,40 0a20,20 0,1 1,-40 0"/> <!-- 时针 --> <path android:fillColor="#0D1B2A" android:pathData="M52,54 L56,54 L56,42 L52,42 Z"/> <!-- 分针 --> <path android:fillColor="#0D1B2A" android:pathData="M53,54 L55,54 L55,34 L53,34 Z"/> </vector>

这里表盘的半径我取的是20dp，意味着整个主体直径40dp，稳稳落在最内层48dp安全核心区内。两步画完之后稍微在Android Studio的预览里检查一下，确认元素没有偏移。

第三步：在mipmap-anydpi-v26/ic_launcher.xml里组合两层，再顺手建一个ic_launcher_round.xml指向同一个资源。第四步：按照密度表生成五个PNG放在mipmap各目录。第五步：在AndroidManifest.xml里配上icon和roundIcon。真机预览时我一般用两台设备——一台原生Android、一台国产定制ROM，遮罩形状不同，能看出真实效果和模拟器的差距。

4. 动态图标与主题图标的进阶配置

4.1 Android 13主题图标（monochrome）的正确配法

Android 13（API 33）开始支持主题图标，系统会把应用图标替换成单色形态，根据壁纸取色统一风格。配置方法是给adaptive-icon增加一个monochrome图层：

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> <monochrome android:drawable="@drawable/ic_launcher_monochrome"/> </adaptive-icon>

这个monochrome图层的要求很特殊：必须是一张纯黑色（#FF000000）的剪影图，系统拿到之后按照alpha通道提取形状，再重新着色成壁纸主题色。如果你偷懒直接把彩色前景图拿来做monochrome，系统会按透明度提取形状，结果就是各种颜色混在一起变成半透明色块，效果完全失控。所以我通常单独画一个黑白剪影文件，哪怕只是把前景图的路径复制过来，把fillColor改成纯黑。

4.2 动态图标切换的实现思路与真实限制

有些应用需要按场景动态切换桌面图标，比如日历App每天变数字、天气App根据实时天气变图标。Android上有两条技术路径，但各有各的坑。

第一条是Activity-alias方案。在Manifest里声明多个带不同icon的alias，每个都指向同一个MainActivity，然后通过PackageManager动态启停：

<activity-alias android:name=".icon.IconBlueAlias" android:enabled="false" android:icon="@mipmap/ic_launcher_blue" android:targetActivity=".MainActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity-alias>

切换代码：

PackageManager pm = getPackageManager(); pm.setComponentEnabledSetting( new ComponentName(this, ".icon.IconBlueAlias"), PackageManager.COMPONENT_ENABLED_STATE_ENABLED, PackageManager.DONT_KILL_APP); pm.setComponentEnabledSetting( new ComponentName(this, ".icon.IconDefaultAlias"), PackageManager.COMPONENT_ENABLED_STATE_DISABLED, PackageManager.DONT_KILL_APP);

这套方案在原生系统上立竿见影，但很多国产桌面会有图标缓存，切完之后桌面不刷新，可能要重启桌面甚至重启手机才能看到变化。我踩过这个坑，最后给老板的解释是“系统限制，不是Bug”。如果频率很高、要求即时生效，建议改用ShortcutManager的动态快捷方式方案，pushDynamicShortcut可以带自己的图标，但是入口形态是长按菜单里的快捷操作，不是主桌面图标，适合“辅助入口”场景。总体上，动态图标这个功能属于“看似简单、实则水深”的类型，上生产环境前务必在真机上实测。

4.3 快捷方式图标怎么独立配置

顺带提一个高频需求：很多App会在桌面创建快捷方式，快捷方式图标是可以单独指定的。用ShortcutManager创建动态快捷方式时，通过Icon.createWithAdaptiveBitmap或者Icon.createWithResource传入图标即可，一样支持自适应图标的两层结构。如果你想复用主图标的adaptive-icon XML，直接传R.mipmap.ic_launcher对应的资源id就行；想单独样式，就单独做一张。这里唯一要提醒的是，快捷方式图标在部分桌面上表现不一致，有的厂商会强制用App主图标，有的会强制用圆形，配置了不生效别太意外。

5. 常见配置问题排查与避坑实录

5.1 图标四角被裁、整体变小、露出桌面壁纸

这三个问题占了配置问题里的80%。我整理成速查表：

四角被裁这个问题，我再单独展开说说。很多人做的前景图看着主体在中间，但一刀切下去边缘还是有内容被削，原因就在于主体外围有一些“装饰性内容”也占着安全区边缘。这类装饰元素在圆形遮罩下最容易遭殃。我的检查方法是在Android Studio的预览面板里叠加一个直径66dp的圆形参考图，把前景图放进去看有没有超出圆外的元素，超了就缩、就挪、就删。

5.2 部分国产ROM的图标适配要求

上架国产应用商店时，很多平台对图标有额外的审核规范。有的要求应用详情页提交一张512x512px的独立素材，有的要求图标里不能包含角标、运营文案和“测试版”字样，这是审核硬性规则。还有一点容易忽略：部分厂商的ROM会在首次启动时强制缓存图标，你发版后用户升级了新的图标，桌面上可能还显示旧图标，只能等系统自动刷新或用户重启桌面。这不是你配置错了，但提前在更新说明里提示一句“图标变更后请重启桌面查看”，能少很多用户反馈。

另外一个我在上架时踩过的坑：应用商店审核工具会扫描mipmap资源，如果发现只有mipmap-anydpi-v26里的XML、没有各密度的PNG兜底，就会判定图标资源不完整。所以即便你的minSdkVersion已经是26以上，PNG兜底我也建议留着，成本极低，但上架审核的麻烦能省一大半。

5.3 前景图动画、缩放等进阶话题的简单建议

Android 12以后系统支持对图标做轻微的视差移动和缩放动画，前景和背景层会产生微妙的位移效果。这个效果不需要额外配置，只要提供了正确的自适应图标就会自动生效。但要注意，前景图元素如果紧贴安全区边缘，动画时位移就会露出破绽。我在设计前景图时，主体与66dp安全区边缘之间至少给自己留2-3dp的缓冲，动画起来才不会现形。至于要不要做动态主题图标，明年再聊——先把静态这套弄扎实了，动态的才谈得上。

最后分享一个实用性技巧：设计前景图时别直接把Android Studio生成的模板当最终版，那个模板里的前景图默认铺满了108dp画布，实际主体太靠边，真机裁切率高。我习惯在矢量图里把主体元素画在以坐标(54,54)为圆心、半径20-24dp的圆内——20dp是很稳的，24dp有点冒险但视觉上更饱满。另一个技巧是务必拿两台不同品牌的真机装测试包看效果，模拟器上的圆形遮罩只是理想情况，定制ROM的圆角方形才是用户真实看到的。图标配置这件事没有太高深的技术含量，但每一个细节都是真机反馈出来的经验，踩过一遍就再也不会踩了。