Blogger Favicon設定 | 網頁設計:Blogger教學2

1.7.16

Favicon教學
承接上一篇,這篇教你設定網站Icon。


第2步:建立網誌Logo及Favicon

為了增加自己網誌的辨識度,你需要一個適合的Logo和Favicon(Favourite Icon)。

Logo會放在頁首(Header),而Favicon則會顯示於網址列。

現在有很多免費圖像工具都很好用,例如線上設計工具 Canva線上相片編輯工具 Pixlr製作向量圖 - Inkscape 自由軟件編輯相片- Photoscape 自由軟件等。這都是AC常用的工具,免費而且有強大功能,值得推薦!

Blogger內建可上載圖片作Favicon:

Blogger的版面配置中,可以輕易修改網站小圖示(Favicon)
圖1 - Blogger的版面配置中,可以輕易修改網站小圖示(Favicon)
Favicon前台效果
圖2 - Favicon前台效果


以下是更詳盡有關Favicon的說明。

如果你的Logo是1:1的比例,可以直接改為Favicon。我喜歡用Favicon & App Icon Generator,除了Favicon外,還能同時建立App Icon,一石二鳥。

溫馨提示:由於Favicon的大小只有16 × 16 px,建議使用簡單的幾何組合會較美觀。

上載圖片
圖3 - 上載圖片
除了能下載Icons,還附上一段HTML編碼
圖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設定。
編輯HTML
圖5 - 編輯HTML
你或者想問:既然Blogger可以直接設定,為什麼還要做這麼多步驟?請看以下在手機瀏覽的效果:
App Icon 效果
圖6 - App Icon 效果


如今用智能電話的機會比電腦多,當然要考慮在移動裝置的效果。

Favicon只有16 × 16 px那麼小,是不能直接放大使用的。因此,需要在不同裝置要顯示不同大小的Icon。

在圖2.6中,網站的Icon清晰可見,而另一個A網站就沒有設定App Icon,因此Chrome自動抽取名字字頭作縮圖,毫無特色。

把網頁加到桌面捷徑
圖7 - 把網頁加到桌面捷徑
就算不是App,也可以為你的網站加上App Icon。這樣既漂亮又專業!

您或許喜歡

0 意見

精選文章

釋放C Drive空間:更改iTunes備份位置 | 電腦技巧 (2018.10.17更新)

最近電腦常警告我儲存空間不足!自問沒有安裝新程式,文件又全都儲存在 D Drive,到底容量都去哪了?終於發現因妹妹備份iPhone的緣故。於是找了解決方法,希望幫到遇上同樣問的的朋友。

Facebook