
PWA 图标完整指南:尺寸、安全区域与 manifest.json 配置
PWA 图标的完整参考:必备尺寸 192×192 与 512×512、80% 安全区域规则、可遮罩图标(maskable icon)配置,以及 Lighthouse 报错修复方法。

掌握为所有平台创建完美社交媒体图片的艺术,附最新规格说明
头像、封面、上传到信息流的照片和网站链接预览承担不同任务。先确定展示位置,再选择画布并检查实际裁切。下面区分平台公布的要求和本站建议的设计起始尺寸,不能把它们当作所有位置通用的兼容性清单。
| 平台与位置 | 可采用的尺寸 | 数值的适用范围 |
|---|---|---|
| Facebook 链接预览 | 1200×630 起始画布 | 本站横向排版建议,发布后检查实际分享 |
| X 头像/页眉 | 400×400/1500×500 | X 推荐上传尺寸,页眉仍可能被裁切 |
| LinkedIn 网站分享 | 至少 1200×627,约 1.91:1 | 网站分享模块说明,不是广告或头像规则 |
| Instagram 信息流排版 | 1080×1080 方形起始画布 | 设计示例,不代表允许的最高竖图尺寸 |
| YouTube 视频缩略图 | 当前推荐 3840×2160 | 普通视频说明;Shorts 为独立的 9:16 场景 |
| YouTube 频道横幅 | 推荐 2560×1440 | 重要内容需通过平台安全区预览检查 |
| TikTok 头像图稿 | 方形源图,例如 800×800 | 本站编辑建议,以应用内裁切和上传规则为准 |
网站分享可以从 1200×630 横向画布开始,突出一个视觉主体并保持文字清晰。这是排版起点,不是 Facebook 所有展示位置的统一要求。主页封面与圆形头像需要独立构图,不应把同一横图直接拉伸成两种素材。
为分享页面配置 Open Graph,并用 Meta Sharing Debugger检查公开网址。其抓取图片与时间有助于区分 metadata 错误和旧缓存。不同位置的限制参阅 Meta 分享图片文档,不要把记忆中的一个文件大小上限套用到所有上传类型。
X 的官方建议是头像 400×400、页眉 1500×500。推荐尺寸不代表响应式展示时不会裁切。横向文字 Logo 应远离页眉边缘,头像则检查圆形显示。
网站卡片不同于直接上传的照片或页眉。单独准备横向卡片时,应设计合适构图并测试实际分享,不要混用小型摘要卡片和大图卡片的规则,也不要把推荐头像尺寸写成最小要求。下方 400×400 导出只是一份起始素材,不代表 X 所有场景都已准备完成。
LinkedIn 网站分享说明给出的图片最小尺寸为 1200×627,推荐比例 1.91:1,文件上限 5 MB。这些数值适用于分享模块;上传照片、企业标志与广告有各自说明。
本站 1200×630 输出接近这一横向比例。需要精确排版时,另外准备 1200×627 版本,并用 LinkedIn Post Inspector检查。图片能公开访问和 metadata 正确同样重要,单纯调整尺寸不能修复抓取请求被拦截的问题。
方形帖子可以采用 1080×1080 作为实际排版示例。竖图应在实际发布入口选择目标裁切,并核对 Instagram 图片分辨率说明。不要把旧表格中的 4:5 当作所有 Instagram 上传入口永久适用的最大比例。
信息流、个人主页网格和 Story 可能用不同方式展示同一图稿。1080×1920、9:16 可作为竖向内容的设计起点,不代表固定安全区。重要文字应避开界面控件,并在预览中确认。网站 Open Graph 标签不会替你上传 Instagram 帖子、制作 Reel 或设置封面。
YouTube 当前缩略图说明推荐普通视频使用 3840×2160、Shorts 使用 2160×3840,并区分手机与桌面上传限制,因此旧稿笼统的“小于 2 MB”不完整。准备交付文件前,检查实际上传入口和账号是否具备自定义缩略图权限。
频道横幅参阅 YouTube 品牌说明:推荐 2560×1440,最小 2048×1152;1235×338 的文字与标志安全区是按最小画布尺寸定义的,不能原样套到更大画布。用设备预览检查裁切。LogoFoundry 三张社交 PNG 不包含已排版的频道横幅或视频缩略图。
保留方形源图,例如 800×800 的头像输出,并让主要符号靠近中心,方便检查圆形裁切。这是源文件准备建议,不代表 TikTok 强制要求 800px,或最小必须为 200px。
按 TikTok 头像设置说明操作并检查应用内最终预览。视频封面在另一套工作流中设置;方形头像或网站分享图不是已经完成的竖向视频封面。识别性文字应避开个人主页和信息流控件的覆盖区域。
先按目标展示位置调整构图,再导出文件。
从一份可编辑构图生成目标比例的不同排版。裁切、增加背景和缩放解决的是不同问题:横向链接卡片可以保留完整文字 Logo,小头像则仅使用符号。按信息流实际展示尺寸检查文字,而不是给所有画布规定统一的 24px 字号下限。
突出一个视觉主体并保留可编辑源图。横向卡片可保留文字 Logo,小头像可只用符号;分别设计这些排版,不要直接拉伸同一张横图。
重要内容远离四角和界面叠加区,保持明确的视觉层级,并比较浅色、深色界面背景。在平台支持时填写上传图片的替代文本;网站的 og:image:alt 不会自动填入所有平台的照片描述。
固定 24px 下限不能作为所有画布与展示尺寸的通用可读性规则。
排版确定后再优化副本,并查看真实导出像素。
PNG 适合保留 Logo 边缘和透明度;照片构图可考虑 JPEG 以控制文件大小,但 JPEG 不支持透明。只有目标上传入口接受 WebP 时再使用,浏览器能显示不代表平台上传器接受。LogoFoundry 当前输出 PNG,不会自动附带 JPEG/WebP 版本。
压缩副本后检查细线与文字,再与对应展示位置的文件上限比较。没有一个质量百分比适合所有图片。保留高分辨率源文件,避免后续缩放从已压缩的小预览图开始。
编辑器支持时可选 sRGB 导出;对色彩要求高的项目,应在另一块屏幕上比较上传结果。删除元数据前先明确完成色彩转换,剥离色彩配置文件不等于转换像素。透明部分应放到目标背景上检查,或主动合成到选定的实色底图。
以平台最终预览核对,而不只看源画布。
用 Meta 检查器查看真实分享网址,核对抓取图片,区分旧预览缓存与错误文件路径。
分别检查圆形头像、响应式页眉和网站卡片,重要内容避开界面覆盖或裁切区。
分享网址使用网站分享说明,直接上传照片或广告使用各自说明;用 Post Inspector 核对公开网址。
分别查看信息流、主页网格与竖向发布预览。文字避开界面控件;网站 Open Graph 不会替你发布 Instagram 帖子。
公开文件、metadata 和最终裁切应分别核对。
清晰文字、内容层级和恰当替代文本有助于使用体验。不要把一个字号或对比度数字写成所有社交图片的统一规则。自有网站上的文字无障碍要求可参阅 WCAG 对比度说明。
导出说明纠错可通过关于与联系反馈,具体任务交付内容以实际生成文件列表为准。
横向文字 Logo 可能适合横图,却在圆形头像中丢失首尾字母。方形版本应居中放置主要符号,避免文字贴近四角。加入细节前,先按信息流中的小尺寸检查。
生成器缩放图稿,不会自动设计标题、照片和行动按钮的组合。需要更丰富的预览时,应先在图像编辑器完成排版,再发布成品。原图已有背景时,透明输出设置不会自动删除背景。
LogoFoundry 上传工作流当前准备三种社交 PNG 画布。它们是生成器的输出选择,不是所有社交平台的完整要求清单。
| 导出文件 | 画布尺寸 | 起始用途 |
|---|---|---|
social/og-image.png | 1200×630 | 横向链接预览图片 |
social/avatar.png | 800×800 | 较大的方形头像源图 |
social/social-400x400.png | 400×400 | 较小的方形版本 |
此工作流没有平台专属封面、限时动态、视频或横幅编辑器。Logo 缩放完成不代表整套社交传播素材已经准备完成。
将 og-image.png 复制到公开可访问网址,并在页面 HTML head 中声明。Open Graph 协议解释各字段。已发布页面应使用图片绝对网址;本地路径或私有任务地址可能让平台抓取失败。
<meta property="og:title" content="Your project title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:image" content="https://example.com/social/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A description of the image">更换图片或修改尺寸时,同步更新声明。og:image:alt 应描述实际图片。Open Graph 有助于平台发现图片,但不能保证所有平台使用相同裁切或立即刷新。
若另有独立的 X 卡片图,可添加下面的声明。示例路径对应的文件需要自行制作和公开部署,不是上传资产包额外交付的承诺:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/social/x-card.png">
<meta name="twitter:image:alt" content="A description of the card image">按实际展示尺寸与场景检查内容能否被理解。
确保文字可读和图稿可辨。在平台支持时填写替代文本;网站 og:image:alt 不会自动填入所有上传照片描述。自有网站文字的要求可参阅 WCAG 对比度说明,不能把它当作所有社交图片的统一认证。
保持明确层级、简洁文字与熟悉的视觉提示,不要只用颜色传达重要操作或主体。
保留可编辑源图,并记录每份交付的展示位置与裁切方式。
新展示位置和发布入口可能改变适用比例或裁切。应从源图制作变体,而不是放大旧压缩缩略图。本节不承诺生成器未来功能。
发布新格式时重新核对平台链接和实际上传界面;记忆中的尺寸表不是所有位置永久有效的上限。
先确定目标位置,区分平台说明与设计起始画布,再测试真实分享。本站上传包只提供上述三种 PNG;封面、缩略图或更丰富构图需另行准备。导出说明纠错可通过关于与联系反馈。
加入我们的社区
订阅邮件列表,及时获取最新消息和更新