Shiny

一分鐘學前端(6):加入網頁 icon

October 13, 2019 #HTML#一分鐘學前端

上一篇介紹了可以修改頁籤上顯示文字的方式,接著這篇就要介紹如何修改網頁的 icon ,有了 icon 就可以做出識別化,讓別人不需要看到名稱也可以知道是什麼網站,因此好的 icon 設計是非常重要的。

CleanShot 2019 10 13 at 16 29 39 2x

上面這張圖有認得幾個 icon 呢?是不是有些不需要文字就知道是什麼了呢?這就是 icon 好用的地方!

首先下載 HTML,接著可以下載下面這張圖片:

並且存到跟 index.html 同一個目錄下緊接著打開 index.html 就可以看到左邊的 icon 變成剛剛下載的圖片了,結果如下圖:

CleanShot 2019 10 13 at 16 41 33 2x

最後附上完整的程式碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>我是標題</title>
    <link rel="shortcut icon" href="icon-48x48.png" />
  </head>
  <body>
    <h1>中文</h1>
  </body>
</html>

主要是在 head 裡面加上了 <link rel="shortcut icon" href="icon-48x48.png" /> 來跟瀏覽器說明 icon 要用哪個路徑,不一定要 48x48 的大小,現代瀏覽器會自動幫你縮小,方便很多!


Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email