【全網最全的博客美化系列教程】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種的地址路徑替換成你本身的就行了~

保存設置後，刷新頁面，就會看到地址欄的圖標變了：