Blogger Favicon設定 | 網頁設計：Blogger教學2
1.7.16
第2步：建立網誌Logo及Favicon
為了增加自己網誌的辨識度，你需要一個適合的Logo和Favicon（Favourite Icon）。Logo會放在頁首（Header），而Favicon則會顯示於網址列。
現在有很多免費圖像工具都很好用，例如線上設計工具 Canva、線上相片編輯工具 Pixlr、製作向量圖 - Inkscape 自由軟件、編輯相片- Photoscape 自由軟件等。這都是AC常用的工具，免費而且有強大功能，值得推薦！
Blogger內建可上載圖片作Favicon：
 |
| 圖1 - Blogger的版面配置中，可以輕易修改網站小圖示（Favicon） |
 |
| 圖2 - Favicon前台效果 |
以下是更詳盡有關Favicon的說明。
如果你的Logo是1:1的比例，可以直接改為Favicon。我喜歡用Favicon & App Icon Generator，除了Favicon外，還能同時建立App Icon，一石二鳥。
溫馨提示：由於Favicon的大小只有16 × 16 px，建議使用簡單的幾何組合會較美觀。
 |
| 圖3 - 上載圖片 |
 |
| 圖4 - 除了能下載Icons，還附上一段HTML編碼 |
由於Blogger範本格式是較嚴格的XML而非HTML，直接貼上編碼會不能儲存，只需要在「>」前加上「/」便可。
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"/> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"/> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"/> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"/> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"/> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"/> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"/> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"/> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"/> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/> <link rel="manifest" href="/manifest.json"/> <meta name="msapplication-TileColor" content="#ffffff"/> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/> <meta name="theme-color" content="#ffffff"/>
請把Icon上載到圖床，然後把href中的位置換成對應的圖片網址，便完成Icon設定。
 |
| 圖5 - 編輯HTML |
 |
| 圖6 - App Icon 效果 |
如今用智能電話的機會比電腦多，當然要考慮在移動裝置的效果。
Favicon只有16 × 16 px那麼小，是不能直接放大使用的。因此，需要在不同裝置要顯示不同大小的Icon。
在圖2.6中，網站的Icon清晰可見，而另一個A網站就沒有設定App Icon，因此Chrome自動抽取名字字頭作縮圖，毫無特色。
 |
| 圖7 - 把網頁加到桌面捷徑 |
發表文章
0 意見