讓你的網站增加一個行動版書籤圖示

網頁設計的各位應該都知道favicon吧

他是一個16*16的ico,可以在網址列的旁邊出現一個小圖像

近年來行動網頁的興起,這個favicon已經不夠看啦!





手機的瀏覽器通常都會有一個「 加到主畫面」功能


這個功能可以把你的網站加到桌面上,像是APP的樣式

可是弄起來就是醜醜的樣子......


這時候我們就要做個圖示來美化他啦!

可以兩種解析度
192*192、198*128


做好圖示之後在你的<head>標籤內加入

<link rel="icon" sizes="192x192" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

href的內容帶入圖檔所在的位置

前面兩個是google推薦的,後面兩個是apple的格式

當然是都加比較好囉...


參考


沒有留言:

張貼留言