利用 favicon 讓網址圖示與眾不同
朋友們有沒有發現在瀏覽器書籤功能 (或「我的最愛」) 中,有些網站名稱前面會有自己的圖示?透過在網站根目錄 (或網站佈景主題目錄) 放置名為 "favicon.ico" (圖片格式為 16 x 16,256色的點陣圖檔)圖檔,並且在顯示網站畫面的檔案 (例如:index.html,index.php) 加入 HTML 語法:
{code}<link rel="shortcut icon" href="favicon.ico">{/code}
瀏覽器就會將網址列前的顯示圖示改為顯示 favicon 囉。
以上動作對熟悉 HTML 語法的朋友來說不難達成,不過是否有更輕鬆的方法呢?有的,就是 "Phoca Favicon" 元件。
Phoca Favicon 基本資料
- 程式名稱:Phoca Favicon
- JED 網址:http://extensions.joomla.org/extensions/style-a-design/design/3343
- 相關文件:http://www.phoca.cz/documentation/section/4-phoca-favicon (英文)
- 許可證:GPL v2 或其後版本
- 類型:非商業化
- 安裝需求:Joomla!1.5.x 穩定版本,PHP 4.4.1 以後版本 (GD 函數庫已啟動)
Phoca Favicon 元件使用說明
Phoca Favicon 在安裝過程中會建立 "images/phocafavicon" 資料夾,請透過後台「媒體管理」功能或是 FTP 方式將要製作 favicon 的圖片上傳至此資料夾,然後點選「製作 Favicon」開始製作屬於自己的 favicon。
製作 favicon 步驟如下:
- 選擇要指定的背景主題。
- 選擇建立 favicon 要用的原始圖片。
- 點選右上方的「建立」,favicon 建立完成。
favicon 原始圖片使用建議:
- 圖片寬度與高度盡量一致。
- 圖片內容與線條盡量簡單化,讓輸出結果更完整。
注意事項及結語
製作好 favicon 之後,朋友需將瀏覽器的快取資料清除,同時重新開啟瀏覽器 (包含所有分頁) 之後才會看到新的 favicon 顯示,所以如果重新讀取網站內容卻看不到製作好的 favicon 出現,請記得執行上述動作喔。
如果朋友想為不同的佈景主題製作專屬的 favicon,或是有經常更改 favicon 的需求,Phoca Favicon 元件會是個簡單、迅速的解決方案。朋友可透過以下連結下載中文介面的 Phoca Favicon 元件使用,如果覺得此元件好用的話也請別忘記到元件的 JED 網址幫原作者打打氣 ^^。
文後感想
原先阿寶並沒有規劃 Phoca Favicon 元件的中文化動作,只是後來想到:大部分接觸 Joomla! 的朋友其實都不是網站製作方面的專門人員,如果能夠透過元件運作的方式減少修改程式碼 (html, php...) 的機會,那麼就應該多做一些,讓建構網站的人員能把多花點時間在自己能著力的地方。就在這個思維下阿寶開始進行元件的中文化以及介紹文章,希望這些努力能夠對使用 Joomla! 的朋友幫上忙。