全網最全的博客美化系列教程相關文章目錄
【全網最全的博客美化系列教程】01.添加Github項目鏈接
【全網最全的博客美化系列教程】03.給博客添加一只萌萌噠的小倉鼠
【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現
【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現
【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕
【全網最全的博客美化系列教程】10.小火箭置頂特效的實現
【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現
【全網最全的博客美化系列教程】12.修改鼠標圖案
【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現
【全網最全的博客美化系列教程】14.代碼高亮設置的實現
【全網最全的博客美化系列教程】15.動畫幻燈效果的實現
【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現
【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現
【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現
【全網最全的博客美化系列教程】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種的地址路徑替換成你自己的就好了~
保存設置后,刷新頁面,就會看到地址欄的圖標變了: