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

Favicon-touch-icons-for-ChromeSafariIEEdge
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線上製作工具