【博客美化】04.自定义地址栏logo

前言:

当我们打开我们自己的博客的时候,比如用谷歌浏览器打开:

显示的图标为博客园的默认图标

那么怎么改成自定义的logo呢???

1.首先得准备一个icon类型的文件

方法一:我们可以在线制作一个icon图标

打开这个网站:在线ico图标制作,然后上传自己的图片(jpg,png),就可以download一个icon图标了。

如下图所示:

方法二:在线下载一个icon图标

打开这个网站,图标下载,ICON(PNG/ICO/ICNS)图标搜索下载,搜索想要的图标,然后下载图标。

 2.上传自己的ICON图标

进入自己的博客后台管理->文件->选择文件->上传,然后点击已上传的文件,copy这个文件的网络地址,这个网络地址在第三步会用到。

3.添加脚本文件

进入自己的博客园->设置,将以下JavaScript代码添加到“页脚Html代码”

<script type="text/javascript" language="javascript"> 
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "icon的网络路径";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

  将上面icon的网络路径替换为自己的上传的icon的网络地址。

保存设置后,刷新页面,就会看到地址栏的图标变了:

小伙伴们,新技能get了吗?赶快去试下吧!顺手点个赞哦!点我推荐

还有一件事,直接在页首HTML代码中添加下面这段代码不能成功

<link rel="shortcut icon" href="icon网络地址" />

所以我用了之前的JavaScript,这段JavaScript脚本我是查看头头哥博客的网页源代码copy过来的,在这感谢头头哥。

作  者: Jackson0714 出  处:http://www.cnblogs.com/jackson0714/ 关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教! 版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。 特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我 声援博主:您的鼓励是作者坚持原创和持续写作的最大动力!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏淡定的博客

使用cropper实现图片裁剪功能并保存图片到数据库

64020
来自专栏菩提树下的杨过

silverlight之deeplink学习笔记

所谓的deeplink技术是为了解决silverlight(或flash)之类的RIA Web应用无法被搜索引擎收录而出现的,属于SEO范畴。 就拿最常见的企业...

20750
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK

课程内容 Ø 隔离存储空间 Ø 设置 Ø 设置页面向导 Ø Toggle Switch控件 Ø 使用自定义字体     Alarm Clock模仿的...

21460
来自专栏熊二哥

Sublime快速入门

在当前的互联网时代,任何程序语言和相关技术都只是实现互联网应用的一种手段,这也就造成了大量的互联网工程师长期与不同的语言、技术、系统环境、IDE等打交道。因此一...

20650
来自专栏Google Dart

为Flutter应用程序添加交互性 顶

你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

24020
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

27110
来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

42690
来自专栏祝威廉

React问题三则

这两天在用 Blueprint+React+ServiceFramework+MySQL 为主要组件开发一个小玩具,由衷的喜欢React了。为啥呢?非常后端,其...

9310
来自专栏游戏杂谈

【hta版】获取AppStore上架后的应用版本号

之前写过一篇文章:获取AppStore上架后的应用版本号,那一篇文章使用node.js实现,存在的问题就是如果在没有安装node.js运行环境下是无法运行的,而...

13720
来自专栏TechBox

跟着官方文档学习3D Touch前言(一)app外3D Touch—Home Screen Quick Actions(二)app内的3D Touch - Peek and Pop名词解释

26440

扫码关注云+社区

领取腾讯云代金券