关闭

地址栏小图标 代码

232人阅读 评论(0) 收藏 举报

网页中如何设置在网页地址栏中的小图标:

在浏览器地址栏有csdn有一个"圆圈"图标 如何在自己的jsp网页之中设置?

通常做法是:

要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。

在源文件“<head></head>”之间添加如下代码:

<Link Rel=\"ICON NAME\" href=\"http://图片的地址(注意与刚才的目录对应)\">

收藏夹:

favicon.ico

你随便用一种画象素的工具,画一个图标,然后起成这个名字,上传到你所有网页文件的那个文件夹里就行了。

一般都会自动找这个favicon.ico的文件,只要有,就会显示。

并且是根目录下

地址栏的方法:

只是在网页中多加入下面一条代码就行了。

<link rel=”shortcut icon” href=”sample.png” type=”image/x-icon” />

如果手头没有合适的工具制作图片,也可以选择一个自己喜欢的图片,然后到这个网站去自动生成一个。

Favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。

您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢?其实要实现这一目的非常简单。

第一步,准备一个图标制作软件。

首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问http: //www.favicon.com/,这里提供一个免费的在线“收藏夹”图标生成器,如果您 E 文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识。

第二步,确定“收藏夹”图标的规格。

“收藏夹”图标有着它特有的规格:图标的大小为 16 * 16(以像素为单位);所使用的颜色不得超过 16 色。 (为了清晰)

第三步,设计一个属于您自己的图标。

您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:favicon.ico。

最后,将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。

看一些著名的 favicon:

地址栏小图标 代码 - lurui110 - lurui110的博客 以某字母、汉字为主体

地址栏小图标 代码 - lurui110 - lurui110的博客 以 logo 等简洁图案为主体

地址栏小图标 代码 - lurui110 - lurui110的博客 Google 的部分服务

这些图标都非常具有代表性,让人看了之后留下深刻的印象。由此我们看出两个通用的 favicon 设计路线:

  1. 取首字母,用 logo 配色、图案来修饰它。

    比如 SKPYE的 S 图案,就是自家完整LOGE 的精简。

    而汉字有着方块字的先天优势,一个汉字所包含的信息量又远远大于一个字母,我挖网采用类似于DIGG 配色的“挖”字,把网站类型、功能都体现在小小的图标里了。

  2. 使用一个简洁的图标。

    上面的苹果图标简单到只有灰色和白色,但它用 Mac 上常见的色彩搭配勾出了一个清晰的苹果图案。

    第三排我专门列出了 Google 系列服务的 favicon,像 Gmail, Calendar, Reader, Groups, 都很好地在图标中表达了一个信息:它是干什么用的。

    第二排最后一个是经典桌面资源站的 favicon,看似简单的一个绿色按钮,却有着不错的阴影,在标签栏上的显示效果非常好。

要自己创作一个图标是件很费精神的事情,有时候我们也要借鉴甚至拿来主义:

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1612次
    • 积分:25
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档