Sketch Favicon Exporter 模板使用教程

Sketch Favicon Exporter 模板使用教程

sketch-favicon-exporter-templateEasily generate favicons for today's devices with Sketch.项目地址:https://gitcode.com/gh_mirrors/sk/sketch-favicon-exporter-template

1. 项目的目录结构及介绍

sketch-favicon-exporter-template/
├── LICENSE
├── README.md
└── favicon-exporter.sketch

• LICENSE: 项目的许可证文件，采用MIT许可证。
• README.md: 项目的说明文档，包含项目的基本介绍和使用方法。
• favicon-exporter.sketch: 项目的主要文件，Sketch模板文件，用于生成各种设备的favicon图标。

2. 项目的启动文件介绍

项目的启动文件是 favicon-exporter.sketch。这是一个Sketch模板文件，用于生成各种设备的favicon图标。用户需要下载并打开此文件，然后根据需要添加和导出图标。

3. 项目的配置文件介绍

该项目没有传统的配置文件，所有的配置和操作都在Sketch软件中进行。用户需要在Sketch中打开 favicon-exporter.sketch 文件，然后根据以下步骤进行操作：

1. 添加资产: 将你的图标资产添加到不同的画板中。较大的画板可以添加更多细节。
2. 导出: 通过 Share > Export HTML 导出图标。
3. 使用HTML代码: 将导出的HTML代码片段添加到你的网站代码中，以添加favicon图标。

示例HTML代码片段：

<link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

通过以上步骤，你可以轻松地生成并使用适用于各种设备的favicon图标。

sketch-favicon-exporter-templateEasily generate favicons for today's devices with Sketch.项目地址:https://gitcode.com/gh_mirrors/sk/sketch-favicon-exporter-template