『教學』怎麼自訂網站、部落格的Favicon小圖示？設定語法分享(Html)

Html要設定部落格和網頁書籤的Favicon Logo讓它們顯示在網址列旁邊，卻不知道怎麼放置嗎？這邊提供自訂網址列圖示教學，並解決各種瀏覽器Chrome、Safari、IE、Edge無法出現Favicon的問題，讓你的書籤圖案和我的最愛旁邊能出現厲害的Website icon，增加網站的專業度與形象，打造出專屬品牌！

設定網站、部落格、Wordpress專屬Favicon圖示教學

Step 1

將你的favicon.ico & png檔案上傳至網站伺服器的後台

Step 2

到網站或是Blogger的 header進入編輯，Wordpress則可以到外觀 ->佈景主題設定 -> header.php修改

Step 3

複製下方語法程式碼，將有「xxx/favicon.ico」與「xxx/xxx.png」更改為存放圖示檔案的位置或是鏈結網址，並且放入< head>和< /head>之間，就能夠在Chrome、Safari、IE、Edge看到專屬於網站的icon logo


< head>
...

<!-- Favicon and touch icons -->
<link type="image/x-icon" href="/xxx/favicon.ico" rel="icon" />
<link type="image/x-icon" href="/xxx/favicon.ico" rel="shortcut icon" />
<link type="image/x-icon" href="/xxx/favicon.ico" rel="bookmark" />

<!-- Favicon for Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/xxx/xxx.png" />

<!-- Favicon for Safari Web Clips-->
<link rel="apple-touch-icon-precomposed" href="/xxx/xxx.png" />
<link rel='apple-touch-icon-precomposed' sizes="76x76" href="/xxx/xxx.png" />
<link rel='apple-touch-icon-precomposed' sizes="114x114" href="/xxx/xxx.png" />
<link rel='apple-touch-icon-precomposed' sizes="120x120" href="/xxx/xxx.png" />
<link rel='apple-touch-icon-precomposed' sizes="144x144" href="/xxx/xxx.png" />
<link rel='apple-touch-icon-precomposed' sizes="152x152" href="/xxx/xxx.png" />

<!-- Favicon for Win10 Edge -->
<meta name="msapplication-TileImage" content="/xxx/xxx.png">
<meta name="msapplication-TileColor" content="#226533">

...


< /head>

各種色碼表，顏色代碼一覽：顏色代碼查詢

延伸閱讀：免費Favicon ico線上製作工具

相關文章: