HTML如何给网页添加ico图标?

HTML如何给网页添加ico图标?,第1张

首先准备一个32*32 格式为 ico 的图标

方法/步骤

1

先做好一张格式为ico的图标(我就是用在线工具转换为ico格式的)

2

打开页面代码,找到<head>标签,在<head></head>标签中插入一句,

<link href="/favicon.ico" rel="shortcut icon">

请点击输入图片描述

3

ok啦,运行一下你的网页,看看是不是有图标了呢?

请点击输入图片描述

END

注意事项

图标格式一定要是ico格式的

图片路径要写正确

方法一:

直接在站点根目录下放入名为:favicon.ico 的图标文件(必须要为 ICO 文件,BMP 及其他格式的图片文件不行)。还有将 favicon.ico 中的 favicon 命名为你网站域名的名称也可以,例如:你网站的域名为:xll.com,你可以将该 ICO 文件命名为:xll.ico 。

方法二:

1. 在网页的 ... 区加入代码:,如果用这一种方法的话,其中 ICO 文件的文件名就不一定要用 favicon.ico了,可以用任意的名字来命名,如:aoul.ico,你甚至可以使每一个目录下的每一个网页文件的IE地址栏图标都不同,但前提是 必须做到图标文件的链接地址要正确。还有,在 ... 区加入代码:,就可以在收藏夹中显示你网页链接的自定义图标。

2. 在网站首页的源文件 之间插入下面的斜体部分代码 ……

3.动态ico图标的实现方法,先把做好的gif动态图标命名为favico.gif 之间加上。 1、将ico文件放在网站根目录

2、在网站页面中head标签内添加

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />即可。

在这一次教程我们将会使用Photoshop制作2个小icon。这2个同属于一个系列的icon应该要符合相同的主题,这一次我们将会制作一个太阳icon,一个Rss icon.

步骤一

新建一个350x350 px的文件,点击背景内容旁边的下拉菜单,设置画布的颜色。

步骤二

在拾色器里面选择#e0e0e2作为我们的背景颜色

步骤三

新建一个组,命名为sun,我们把sun icon放在这里

步骤一

使用圆角矩形工具画一个83x64 px 圆角半径为8px的圆角矩形。

步骤二

按住shift画一个36 px,半径3px的正圆角矩形。(和之前的圆角矩形在同一个图层)

步骤三

按CTRL+T键将正圆角矩形旋转45度

步骤四

使用对齐工具使两个圆角矩形水平居中对齐用鼠标拖动正圆角矩形到适当的位置

步骤五

在已有的图形上新画一个比原来小1px的图形。你可以复制原来的矩形然后缩放,也可以从新画一个。(在新的一个图层)

步骤六

将新图形的颜色设置为#57adf8

步骤七

双击新图像的图层打开图层样式,设置描边和渐变叠加。

渐变编辑器如下设置。

步骤八

将图层填充设置为11%

结果像这样

步骤一

新建一个图层放置到基本图形图层的下面,使用笔刷工具画出阴影。

步骤二

用笔刷工具在小三角下面再加一层阴影

步骤三

按住CTRL键左键同时单机新圆角矩形图层的图标做出选区,新建图层,使用软笔刷画出高光。

步骤四

CTRL+D取消选区,降低高光图层的透明度。

步骤五

再制作出刚才的选区,新建图层,在选区内填充从黑到白的渐变。将图层模式设置为叠加,降低图层的透明度。

步骤六

使用之前的选区,将模式设置为取交集,使用椭圆选区工具在圆角矩形的下部分做出选区,新建一个图层,填充黑到白的渐变。将图层模式设置为滤色,降低图层透明度。

步骤七

按住CTRL点击大圆角矩形图层做出选区,新建一个图层放于最顶部。编辑->描边,将颜色设置为淡蓝,宽度1px。

步骤八

给描边图层添加图层蒙版,给蒙版填充黑色,这样描边就消失了。用笔刷工具,颜色设置为白色,在蒙版上,在圆角矩形边的一些地方涂抹,制作出高光。

步骤九

新建一个色彩平衡调节图层,将他的名字设置为color changer。

步骤十

将color changer图层的蒙版填充黑色,用选区工具把有圆角矩形的地方填充白色。图层设置如下。

步骤十一

复制sun文件,改变color changer的设置,这样就获得了三个不同颜色的基本形状。

步骤一

我们先做太阳的图标,用椭圆工具画一个圆形,填充黄色。

  步骤二

给图层样式添加内阴影和内发光,设置如下,颜色为#7b6708,模式都是正片叠底。

步骤三

在太阳的下半部画上亮一些的黄色。

步骤四

在太阳的上部画一个椭圆,填充一个明亮的黄色。

步骤五

在太阳的右上角画出一条细的高光,为了更自然一些,可以用硬度小的橡皮擦除一部分。

步骤六

接下来我们制作阳光的部分。用钢笔工具画出一个菱形,填充黄色。将它放到太阳的后面。

步骤七

复制一份菱形,旋转45度。(这些菱形在一个图层内)

步骤八

重复复制和旋转。

步骤九

打开图层样式,添加内阴影#b48f0b,外发光#f9dc7e。

步骤十

把太阳图层隐藏起来,新建图层,画更多小一些的菱形。

步骤十一

用椭圆工具画一个圆形,设置路径模式为减去。

步骤十二

在太阳图层下面新建一个图层,用软笔刷画出漫射光

步骤十三

给sun组添加图层样式,添加内发光。

步骤十四

现在开始画Rss图标,新建图层,用椭圆工具画一个圆形。

步骤十五

复制这个圆形路径,将它缩小,路径模式设置为减去。

步骤十六

重复上面步骤,获得如下图形。

步骤十七

绘制两个矩形,设置路径模式为减去顶层,如图。

步骤十八

打开图层样式,添加内发光,渐变叠加,投影。

结果如图。

@Mohammad Jeprie

原文地址

PSD


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/10982800.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-12
下一篇2023-05-12

发表评论

登录后才能评论

评论列表(0条)

    保存