为你的网站添加 Logo

XiaO / 2020-04-25

Real Favicon Generator 提供了一个免费的网站 Logo 生成器，让网页 Logo 添加变得很简单。只需要几步，咱们走着。

上传一张用作 Logo 的图片

上传一张用作网站 Logo 的图片，格式可以是 PNG, JPG, SVG 等，分辨率至少 $70 \times 70$ ，以便生成基本的 Logo。另外还该生成器还提供一些其他选项，但是你的图片分辨率至少需要 $260 \times 260$ 。

生成 Logo，并作相关设置

为桌面浏览器以及谷歌搜索生成相应的图标。

为 iOS 系统生成相应的 Logo。另外你可以根据左侧的实时显示，对你的 Logo 作更多的调节。

为 Androd 系统生成相应的 Logo，同样你可以根据左侧的实时显示，对你的 Logo 作更多的调节。

为 Windows Metro 生成相应的 Logo，细节可以做更多的调节。

为 macOS Safari 生成相应的 Logo，细节可以做更多的调节。

生成 Logo 并加入网页

下载生成的 Logo 图片包，解压后放入网页所在文件夹。将生成的嵌入代码，添加到网页的 <head>…</head> 标签中即可。

<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/icons/favicon-16x16.png">
<link rel="manifest" href="/path/to/icons/manifest.json">
<link rel="mask-icon" href="/path/to/icons/safari-pinned-tab.svg" color="#cc342c">
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="XiaO">
<meta name="application-name" content="XiaO">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png">
<meta name="msapplication-config" content="/path/to/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="google-site-verification" content="3C4lz-WqreDsFFohPRed1rO14aKeEDmTbw2lfIHN6og" />