在html 標籤添加圖標，網頁title左邊顯示網頁的logo圖標

時間 2019-12-12

標籤 html 標籤添加圖標網頁 title 左邊顯示 logo 欄目 HTML 简体版

原文原文鏈接

如圖在黑色所畫圓之中顯示一個圖標：html

步驟一：在圖片中顯示圖標，這裏的圖片只支持ico格式，須要轉換圖片格式.
原始圖像能夠接受: .jpg .jpeg .gif .png等圖像格式
在這個網址http://www.bitbug.net/上傳你的原始圖片而後生成ico格式圖標(百度ico能夠找到製做ico圖標的網站)；
注意：圖標要用 16*16 色的。。。(保證了兼容性，不管在哪一個地方均可以顯示)瀏覽器

步驟二：把圖標放到網站根目錄
在<head></head>引入圖標
網頁標題左側顯示：<link rel="icon" href="圖標地址" type="image/x-icon">
收藏夾顯示圖標：<link rel="shortcut icon" href="圖標地址" type="image/x-icon">工具

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>一個有夢想鹹鴨蛋</title>
            <!--網頁標題左側顯示-->
            <link rel="icon" href="1111.ico" type="image/x-icon">
            <!--收藏夾顯示圖標-->
            <link rel="shortcut icon" href="1111.ico" type="image/x-icon">
        </head>
        <body>
            
        </body>
    </html>

建議把生成的圖標名稱改掉，在引用；如生成後是bitbug_favicon.ico改成你起的名字.ico
若是沒有生效關閉瀏覽器從新打開；
網站

怎麼樣獲取別人的Logospa

在網站首頁打開開發者工具；在Elements裏<head></head>裏找到
<link rel="icon" href="圖標名稱.ico" type="image/x-icon">
.net

點擊右鍵在新標籤頁打開連接；Goolge是Open link in new tab
注意要在href的連接地址右鍵否則沒有Open link in new tab這個選項。code