【全網最全的博客美化系列教程】08.自定義地址欄Logo


全網最全的博客美化系列教程相關文章目錄

【全網最全的博客美化系列教程】01.添加Github項目鏈接

【全網最全的博客美化系列教程】02.添加QQ交談鏈接

【全網最全的博客美化系列教程】03.給博客添加一只萌萌噠的小倉鼠

【全網最全的博客美化系列教程】04.訪客量統計的實現

【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現

【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現

【全網最全的博客美化系列教程】07.添加一個分享的按鈕吧

【全網最全的博客美化系列教程】08.自定義地址欄Logo

【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕

【全網最全的博客美化系列教程】10.小火箭置頂特效的實現

【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現

【全網最全的博客美化系列教程】12.修改鼠標圖案

【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現

【全網最全的博客美化系列教程】14.代碼高亮設置的實現

【全網最全的博客美化系列教程】15.動畫幻燈效果的實現

【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現

【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現

【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現

【全網最全的博客美化系列教程】19.旋轉立方體的實現

【全網最全的博客美化系列教程】20.給博客添加一個萌萌噠的看板娘

【全網最全的博客美化系列教程】21.給博客添加一個夜間模式吧

【全網最全的博客美化系列教程】22.添加一個文章目錄特效

【全網最全的博客美化系列教程】23.圖片水紋特效的實現

【全網最全的博客美化系列教程】24.給博客增加一個音樂播放器特效

【全網最全的博客美化系列教程】25.給博客增加一個音樂播放器特效

【全網最全的博客美化系列教程】26.評論頭像旋轉的實現

【全網最全的博客美化系列教程】27.IP地址定位及天氣預報的實現

【全網最全的博客美化系列教程】28.3D標簽雲動畫的實現

【全網最全的博客美化系列教程】29.自制HTML源碼運行Javascript特效

【全網最全的博客美化系列教程】30.博客文章實現markdown書寫機制

【全網最全的博客美化系列教程】31.用Canvas和requestAnimFrame做動畫特效

【全網最全的博客美化系列教程】32.公告欄添加自己的頭像

【全網最全的博客美化系列教程】33.添加一只舞動的小知音

【全網最全的博客美化系列教程】34.皮膚背景的選擇與定制

自定義地址欄Logo

效果如上圖所示~

那么我們如何去自定義地址欄logo呢?

首先,我們得准備一個icon類型的文件~

首先你得准備一張png或者jpg/jepg的圖片,這個時候你可能會想要你的博客頭像作為圖片,你只需要這樣子:

然后保存好了圖像之后,上傳到在線生成icon的網站:https://tool.lu/favicon/

上傳成功后點擊下載icon圖標

進入自己的博客后台管理->文件->選擇文件->上傳,然后點擊已上傳的文件,copy這個文件的網絡地址

比如這是我的地址:https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico

然后再進入自己的博客園->設置,將以下JavaScript代碼添加到“頁腳Html代碼”

 

<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

 

將href種的地址路徑替換成你自己的就好了~

保存設置后,刷新頁面,就會看到地址欄的圖標變了:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM