设置网页地址栏中的小图标

2024-04-29 18:08

本文主要是介绍设置网页地址栏中的小图标,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

下面我们就讲讲:

  <link rel="SHORTCUT ICON" href="http://****/*****.ico">

  <link rel="BOOKMARK" href="http://*****/*****.ico">

这两个代码的作用。

在浏览器地址栏有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)上传到您的网站所在的服务器的根目录下。

     网页标签ICON的制作方法

      favicon.ico图标在线制作,制作ico的一些软件+ico下载
      很多门户网站都有这个文件,Favicon可以方便用户在很多窗口的时候快速定位到他需要的那个TAB,人对图像的识别速度比抽象的文字还是要快很多。
      Favicon以前只是在IE收藏时会用到,当收藏网站时,标题名称前会显示favicon.ico,这样在众多的收藏网址中,你的网站就会比较显眼;但现在很多多窗口的浏览器都支持,打开网站时会直接显示在网站地址前以及标题前。

      相信现在很多朋友都在使用IE7.0了,IE7.0不但增加了标签页的功能,而且也可以显示Favicon。

      在RSS应用中,目前支持favicon的应用也越来越多……

      2、FAVICON.ICO文件制作
      favicon文件支持 16*16 和 32*32 两种格式,一般使用16*16。
      favicon.ico文件生成还是有些难度的,因为它不是标准的位图文件,需要用专门的favicon编辑器生成。
      还有一款小软件,魔法ICO v2.00.rar,可以让你把一张图片(支持 bmp,jpg,gif,png 等格式)转化成ico的图标文件,有16X16,32X32,48X48,64X64,72X72,96X96和128X128 多种尺寸,还可以提取程序里的图标。
      我很喜欢的一个在线favicon生成器服务:直接上传你喜欢的图片,直接生成16*16像素的favicon.ico文件,还有在线预览功能。
      另外推荐一个在线favicon生成器,http://www.chami.com/html-kit/services/favicon/                                      

3、使用方法

得到你的图标以后,把favicon.ico上传到服务器放在网站根目录下,然后在首页文件中<head>段插入:

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

如果你希望出现动画效果的favicon图标,那就上传animated_favicon1.gif并且添加如下的HTML标签:

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >

提供几个在线生成ico图标相关网站和下载:

在线生成favicon.ico地址:http://www.chami.com/html-kit/services/favicon

有6个在线工具:http://www.chami.com/html-kit/services

FavIcon from Pics //这个就是在线生成favicon.ico图标了,提交任何一个图片,它会给你生成一个ICO文件,并打包下载
Favicon Validator //favicon验证
Buddy Icon from Pics //把图片转换成ICO格式,还可制作PNG格式的背景图片
Image Embellisher //制作特殊效果的图片,比如立方体,Windows徽标那样的波浪
Online Image Splitter //切割图片
Cookie Tester //cookie 测试
得到你的图标以后,把favicon.ico上传到服务器放在网站根目录下

在线制作ico图标 - ico图标转换工具
http://www.bitbug.net/

图标下载:
http://download.pchome.net/php/dl.php?sid=17420
制作ico的一些软件:

icon sushi 1.18 Beta 1 
Icon sushi 精致小巧的图标编辑程序,能将 *.bmp 档案转成 *.ico 的图示编辑工具,此外它更可以处理 Windows XP 用的图示文件,让你的桌面更加多采多姿。
http://downloadfree.cn/Software/Catalog76/8343.html

Picture To Icon 1.90 
能将图片或屏幕的一部分转化为ICON图标,调整图标大小以及从资源库中提取icon。支持BMP, JPEG, GIF, CUR, WMF。
http://www.onlinedown.net/soft/45891.htm

魔法ICO 1.00 
这是一个简单、小巧的图标工具,它为您提供以下功能: 
1) 把.BMP和.PNG格式的图片批量转换成图标; 
2) 从.EXE可执行文件中提取图标。 
特别说明:由.BMP图片转换得到的图片色彩效果不太理想,建议把.BMP图片转换为.PNG格式,会得到更好的效果。转换图片格式可以用ACDSee,很方便。如果源.PNG图片带Alpha通道,则转换得到的图标也是32位带Alpha通道格式,效果很好。
http://www.onlinedown.net/soft/41613.htm


这篇关于设置网页地址栏中的小图标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/946786

相关文章

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也