更換 Weebly 網頁的 favicon

本文摘自 <Weebly in 3 Min>



Favicon 是每個網頁都應該具備的基本配備,它在 safari 是出現在 address bar 的最左邊 (如下圖左所示),在 Chrome 則是出現在 tab 的左邊 (如下圖右所示)。有 favicon 的網頁看起來更專業,而且也讓使用者更容易辨識網頁的品牌。


weebly's favicon on Safari
weebly's favicon on Chrome


不過 Weebly 的免費版並沒有給使用者選擇客製 favicon 的自由,而是必須使用 Weebly 的 logo 作為 favicon。當然,再一次的,本篇文章將要教你如何在 Weebly 免費版上 hack 出你自己的 favicon。


1. 首先,讓我們先製作你網頁專屬的 favicon。準備好你網站 logo 的圖檔 (jpg, png 都行),然後把圖片上傳到 http://www.favicon-generator.org (你也可以使用其他製作 favicon 的網站)。這些網站將會幫你做好 favicon 專用的 (16px * 16px)  ico 圖檔。將下載下來的 ico 檔案上傳到 Weebly 的 theme page (下圖 1, 圖 2, 圖 3)。

Weebly's HTML editing page
圖 1
進入 theme page 後,透過左下方的 assets 上傳你的 ico 圖檔。

Weebly's Assests upload page in Theme
圖 2
上傳後的 ico 圖檔可能就長得像這樣:

圖 3

2. 上傳後,我們接著要找到 Weebly 在網站上儲存這張 ico 圖片的位置。輸入以下的網址,並將網址末端換上你 ico 圖片的名字,就找得到你的 favicon 了。

http:// (Your Site Name).weebly.com/files/theme/(Image Name).ico




最後到你的 Settings >> SEO >> Header Code,把以下的 code 貼上去再按 save (記得將下面 ico 圖檔的連結置換成你的連結)。


<!-- Override Weebly's Pre-installed Favicon -->
<link rel="shortcut icon" href="Your Favicon Link"/>




更新你的 Weebly 網站後,就大功告成啦!







comments powered by Disqus