当我们开发自己的网站的时候,希望给自己的网站设计一个logo,这个logo可以在web页面上显示像下图
那么问题来了如何实现.
- 首先我们需要一张图片而这张图片格式是:favicon.ico,后缀名为ico
- 把图片放到网站的网页上
- 代码怎么实现,小伙伴肯定关心这个.
解决问题
- 图片问题,我们需要一个可以将普通图片格式转化为.ico格式,那么就有在线和离线两种方式去生成.OK我选的是在线生成.地址:图片转换器
先上传图片choose File然后点击generate Favicon.ico(等一会)
然后下载
点击之后会跳到一个我们怎么不理解的页面,不知道网站怎么设计的给你看到一张缩小之后的图片.并不是下载到本地,没关系现在点击右键,save image就可以了.你会发现保存时候的后缀名时.ico
- 图片放在哪里,有过编程经验的都知道.放到你可以访问到的目录下,项目可以引用的地方,我的就放在项目的根目录下面.
- 下面就是代码了
代码
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
</body>
</html>
总结
- 东西不是很难,但是很有成就感,有木有,如果你会ps,你可以做一个漂亮的logo在线PS
- 当你换你的logo的时候可能会发现没有变,不要紧张,清一下cache就可以了
本文介绍了如何为网站设计并设置 favicon.ico 图标。开发者需要将普通图片转换为 ICO 格式，可以通过在线工具实现。完成转换后，将图标存放在可访问的目录，通常为项目根目录，并在代码中进行引用。当更换 logo 未显示时，清理浏览器缓存即可更新。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
