[架站]為你的網站加上網址列小圖示ICON，打造專屬品牌

« 2012總統大選，你準備好了嗎??

發表日期:

2012/01/15

其實，這樣的一項功能，或碩這樣的一個動作，為網站來說影響不會太大~~也就是說，這個小圖示至是為你的網站建立一個連結而已，所以你必須將你網站的宗旨、理想，容成一張小，且簡單的圖示，不過這頂多是個裝飾的小撇步，僅此而已~~但大多事的部落格，都會為自己的網站加入Icon，也就是網址列前的小圖示。

這樣的小Icon，其是就是所謂的「favicon」，副檔名為「.ico」，如果你有自己架站，想替自己的網站換個屬於自己風格的網站ICON，可以看看下面的教學，不難，簡單的幾步驟，就讓你的網站用有獨一無二的Icon囉，當然前提是:圖要自己設計~~~

何謂網址列前小圖示，Favicon??

如何在網址列前嵌入favicon.ico??

首先，開啟你的網站，若您是自行架站，非部落格系統的，則請開啟含「<head></head>」html標籤的檔案。另外，若你是使用WordPress架站的，則請開啟您佈景主題的「header.php」，或含有「<head>」html標籤的檔案。

何謂「<head></head>」標籤-基本Html:

在<head>標籤中，最重要的無他是<title>標籤，或含有其他的Java語法、<meta>標籤東西主要都放在<head>標籤中，當你宣告完所有html之後，再用</head>將之包起來。

<head></head>位在網頁的哪裡??
基本的網站結構如下:

<html>
<head>
…
</head>
<body>
…
</body>
</html>

第1步 開啟好，含有<head>標籤的語法後，我們就要把語法遷到這之中，那語法是甚麼呢??

<link rel="Shortcut Icon" type="image/x-icon" href="絕對位址/相對位址" />

將這對語法，放在網頁中，<head>和</head>之間，並不要影響到其搭語法的宣告，如下圖所示。

第2步 接著就是製作圖片了，當然如果你不想自己做，你也可一到網路上下載其他免費手全的圖片，但長提供以下網站，供參考~~

favicon.ico Generator: http://www.favicon.cc/

Iconfinder: http://www.iconfinder.com/

Free Icons Web: http://www.freeiconsweb.com/

又或者，你要自己製作圖片，其是用哪種軟體效果都差不多，不過注意喔~~記得把副檔名設為「.ico」，並在嵌入語法時，潛入正確的位址~~在做圖片時，也請把長*寬=16*16，畢竟用途只是網址列前的小圖示，所以太大有害(無法顯示)，當然也不能太小喔~~

隨機文章:

缺電救星來了！蘋果釋出iOS 5.0.1　免接電腦就能更新

【影片】中肯哥紀錄:照片二三事、聰明過人、無心富貴、戀愛大過天、槓王、廢話世界、宅心仁厚、裸時代…

(Internet Protocol)實體IP、虛擬IP、動態IP、固定IP到底是什麼?

【臉書民調】Facebook 100公斤棉花、100斤鐵哪個重？

高雄柏愛診所『健康熊減肥門診』 (07)-7199313

作者：TWweeb(小編) 一個生活於高雄，對電腦充滿喜愛的國中生，接觸部落格5年，略懂PHP和CSS，喜歡吸收關於電腦的新知。在這成立一個平台，以教學為初衷，以免費為原則，以學習新知為目的，不論你是男女老少，只要你有心向學，本站的教學，或多或少都有一些些幫助的‼「網站狂人資料酷」成立於2010年06月15日，由站長TWweeb親自撰寫與維護，若有不良之處，請至「聯絡通訊」給予建議，謝謝您!!我們不吝指教… Google + | 關於我 | 聯絡我 | 《訂閱我》

網站狂人資料酷