案例：Hype中如何添加网页标签图标

在Hype 4交互动效制作软件的文稿面板的基础选项中，还有一个“编辑头HTML”按钮选项，它是这款H5创作工具提供给用户的一个编辑HTML5文档头部head的入口。在排印面板讲到的添加字体，就可以通过这个按钮选项对添加的字体代码进行编辑。

本章节将通过一个“添加网页标签图标”的案例，详细讲述在“编辑头HTML”中head里的元素语句的编写规则，以及其功能与作用。

案例的讲解涉及到一些代码，不过都相当的简单，相信小伙伴通过这样一个案例能够举一反三，掌握HTML5元素语句的编写，以及文档头部head里的元素的功能和作用。

一、什么是网页标签图标

打开一个网站，在网页标签上除了有这个网页的标题（title）外，在标题的左边还有一个图标，这个就是网页标签图标，被称为favicon。大多数情况，这个图标就是该网站公司的Logo。

图1：网页标签图标

二、准备工作

网页标签图标为正方形图形，通常选用png格式。图标宽高没有特别的要求，可以选择“36px*36px”、“72px*72px”、“96px*96px”、“128px*128px”等等。图标的容量大小最好不要超过100KB。小伙伴可以通过图像编辑软件调整图标的大小。

1、编辑图标

将一个SVG图标拖到Photoshop软件中，在“栅格化SVG格式”弹窗中，把图标的宽和高设定为128px，并点击“确定”后返回Photoshop工作界面。

选择一个前景颜色，用“油漆桶”更改图标的颜色。选择菜单“文件”中的“存储为”，“保存类型”选择png，把文件名称改为favicon-128x128。

图2：编辑图标

2、把图标导入Hype资源库中

在Hype 4资源库面板中，点击“+”按钮，在“访达”弹窗选择刚才保存的图标添加到资源库中。

图3：把图标导入到资源库中

三、link元素及属性

添加网页标签图标是在HTML5文档头部head里使用link元素，其中会用到link元素的三个属性：rel、type和href。

rel：注析链接的文档是做什么的。在这里链接的文档是一个图标，这里填写的就是icon，即rel=“icon”。

type：注析链接的文档是什么类型的文档。在这里链接的文档是一个png格式的图形，所以填写image/png，即type=“image/png”。

href：被链接文档的位置，也就是图标保存的路径位置。这里要特别注意，由于图标已经添加到Hype的资源库文件夹中，所以要加载的图标路径已经不是原来电脑存放的路径了，而是指向Hype的资源库文件夹。

在Hype中，资源库文件夹的位置是${resourcesFolderName}，那么图标的具体路径为${resourcesFolderName}/favicon-128x128.png。

四、实现图标的添加

在Hype文稿面板，点击“编辑头HTML”按钮打开一个HTML编辑界面。

编辑界面分为上下两部分——上部分是HTML文档头部head元素部分，可以在head元素部分添加元素语句；下部分是Hype内部变量及其说明，例如资源库文件夹位置替代变量${resourcesFolderName}的说明。

这些变量名不需要专门记忆，使用的时候点击变量旁边的图标，就能添加到上部分鼠标光标的位置上。

图4：添加Hype变量

在中间部分，输入link元素及属性语句：

小伙伴要注意：整个语句必须是英文输入，不要出现中文符号，例如中文的双引号。（上面的语句是给小伙伴参考的，不要拷贝使用，因为小编使用了中文的双引号。）

图5：输入link元素语句

五、网页上显示图标

link元素语句输入结束后，返回场景界面，点击预览打开浏览器，在浏览器网页标签上，就可以看到添加的图标了。

图6：显示网页标签图标

六、总结

对于初学者来说，看到代码总会恐惧。其实在HTML5文档头部head的内容相对来说都是比较简单固定的，例如本章讲述的添加网页标签图标，语句都是固定的，要添加不同的图标，只要更换png图标即可。

小伙伴可以自己尝试，使用meta元素添加关键字（name=“keyword”）和网页简介（name=“description”）。