2020-04-25

製作網站的 Favicon

favicon-justry

  1. 在電腦先做好原檔，我尺寸設 256px * 256px，檔案存成 png
  2. 到專門轉檔 Favicon 的網站去產生 ico 及適合手機尺寸的檔案
  3. 將上個步驟下載的檔案傳到網站的根目錄
  4. 把以下程式碼貼上之間 <head> 之間
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

結果：

favicon_web
網頁版 Favicon
favicon_ios
iOS 上的書籤縮圖
請我喝杯咖啡吧 ^^
PeiYing Tsai
author
愛藝術，喜歡以科技解決問題的數位產品設計師。 堅持信念，任何困難事，必有搞定的一天，Just try it! 隨手紀錄日常學習到的知識心得，希望對妳/你有幫助。
coffee-cup linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram