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

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

相关文章

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》:本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

如何关闭 Mac 触发角功能或设置修饰键? mac电脑防止误触设置技巧

《如何关闭Mac触发角功能或设置修饰键?mac电脑防止误触设置技巧》从Windows换到iOS大半年来,触发角是我觉得值得吹爆的MacBook效率神器,成为一大说服理由,下面我们就来看看mac电... MAC 的「触发角」功能虽然提高了效率,但过于灵敏也让不少用户感到头疼。特别是在关键时刻,一不小心就可能触

Nginx配置系统服务&设置环境变量方式

《Nginx配置系统服务&设置环境变量方式》本文介绍了如何将Nginx配置为系统服务并设置环境变量,以便更方便地对Nginx进行操作,通过配置系统服务,可以使用系统命令来启动、停止或重新加载Nginx... 目录1.Nginx操作问题2.配置系统服android务3.设置环境变量总结1.Nginx操作问题

grom设置全局日志实现执行并打印sql语句

《grom设置全局日志实现执行并打印sql语句》本文主要介绍了grom设置全局日志实现执行并打印sql语句,包括设置日志级别、实现自定义Logger接口以及如何使用GORM的默认logger,通过这些... 目录gorm中的自定义日志gorm中日志的其他操作日志级别Debug自定义 Loggergorm中的

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...