怎样制作网站标题栏ICO图标工具及步骤

 

网站标题栏ICO图标制作方法

看到别人网站在浏览器的网址前面和收藏夹里有一个自已网站的图标,你是不是也想要一个?下面给大家带来两种方法。


第一种:用软件来制作

打开软件,按照操作就可以了,这是一款绿色软件,使用起来非常的方便,载入图片,调整图标的尺寸就可以了,而且是中文。

 


第二种:哈哈最近发现的一个网站帮你制作ico图标,用起来更方便了!

网站地址是:http://www.html-kit.com/favicon/

虽然是一个英文的网站,但你不用管他,浏览上传你用图象处理软件做一个16X16的小图片,格式可以是.gif, .jpg, .png的.然后点击 Generate Favicon.ico 生成后下载就可以了。


1、如果你想把图标在收藏夹里显示,尺寸为 16x16 文件名一定要为 favicon.ico。把这个文件上传到根目录下,就可以了,系统会自动查找这个文件的。

2、如果你想让你的图标在任意页面都可以显示,尺寸还是16x16 将这个图标文件命名为wishu.ico 或favicon.ico。在网页文件的head部分加入下面的内容: 
<link rel="Shortcut Icon" href="favicon.ico"> 
<link rel="Bookmark" href="favicon.ico">

什么是网站 ICO 图标?

  打开微软、百度等网站后看到浏览器的标题栏、地址栏,多浏览器的标签上都显示了一个小图标,如 ,这里说的就是这个东东。如果用户收藏了网站,这个图标还会出现在用户收藏夹里。

  如何制作 ICO 图标?

  这里使用最简单的办法。因为 ico 格式图片比较特殊,一般软件(如 Windows 自带的画图、Adobe Photoshop 等)都制作不了,我们就分两步做。

  第一步是用 Windows 自带的画图或 Adobe Photoshop 制作一个 ico 的原图,格式可以是 jpg / jpeg / gif / png 等,大小大概在 32×32 像素差不多,最好是 16px×16px 的,因为浏览器标题栏和地址栏上显示的就是这个尺寸。

  第二步是将制作好的 ico 原图转换为 ico 格式,制作好后去一个可以在线转换 ico 格式的网站(百度一下会有不少,也可以下载一个转换软件进行处理)。这里推荐  http://www.bitbug.net//   ,打开该网站后界面很清晰明了,经数秒简单的处理即可转换为我们要的 ico 格式图标文件,文件被自动命名为 favicon.ico。

  这样 ico 图标就制作完成了。

  如何让 ICO 图标在网站上显示?

  先将转换好的 ico 图标文件上传到网站任意目录,一般为根目录。以我的为例,我上传到 /bbs 目录下,也就是说 ico 文件的路径是 /bbs/favicon.ico。

  然后在需要显示该图标的页面模板头部(<head> 与 </head> 之间)插入以下代码:

<link rel="Shortcut Icon" href="/bbs/favicon.ico">

  如果你的模板是 XHTML 规格的,代码应该是:

<link rel="Shortcut Icon" href="/bbs/favicon.ico" />

要在网页标题栏显示网站图标,也就是所谓的 favicon,你需要遵循以下几个步骤: 1. **创建 favicon 文件**:通常推荐使用 .ico 格式,大小一般建议16x16像素、32x32像素和48x48像素的三种尺寸。你可以使用图形编辑软件(如Photoshop或在线工具)设计或找到合适的图标。 2. **上传到服务器**:将 favicon 文件上传到你的网站根目录下,或者是public、assets或其他专门存放静态资源的文件夹中。例如,上面提到的文件名为 `favicon.ico`,你应该将其放置在 `https://www.yourwebsite.com/public/favicon.ico` 的位置。 3. **添加 HTML 元数据**:在网页的 `<head>` 标签内,添加 favicon 的元数据,让浏览器知道这个图标。例如: ```html <link rel="shortcut icon" type="image/x-icon" href="https://www.yourwebsite.com/public/favicon.ico"> ``` 或者使用更现代的 `apple-touch-icon-precomposed` 标签(仅适用于移动设备): ```html <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://www.yourwebsite.com/public/apple-touch-icon-precomposed.png"> ``` 4. **验证图标是否生效**:可以在一些网站工具,如 Favicon Generator (https://realfavicongenerator.net/) 或者 Google 的 Webmaster Tools 中检查图标是否已被浏览器识别并显示。 完成以上步骤后,大部分现代浏览器都会在标题栏或者收藏夹中显示你的网站图标。如果还没有显示,可能是路径错误或者浏览器缓存未更新,尝试清理浏览器缓存看看是否有变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值