設計自己blog的瀏覽器網址icon圖示

設計自己的瀏覽器網址icon圖示
你有沒有發現在很多人的網站或部落格的網址前都有這個小icon，非常具有個人特色的網頁美化小圖示，現在我們也動手來做一個吧！
icon的圖示顯示在網址列前的是16×16 pixel，要做大一點也是可以，像32×32 pixel，但個人還是建議做剛剛好1:1就好，圖片格式可用 ico、png、gif、jpg 等格式均可。
Ricky個人是建議用png或png做好後轉成ico為佳，做透明背景才好看，因為png是全彩的，而不建議用gif是因為gif是256色，如果不是很會處理gif圖，容易邊緣會有鋸齒，或去背不乾淨等，當然如果你是圖像高手就例外。
做好了icon後，將它上傳至網頁空間，並將以下語法貼至網頁原始碼 <head> 與 </head> 之間，圖片名稱以favicon暫稱。
.ico語法1：

.ico語法2：

.png語法：

.gif語法：

.jpg語法：

目前測試在Firefox3、Opera9、Netscape8、Maxthon2 (IE核心)均可正常顯示，唯獨IE7一直顯示不出來，可是同樣是用IE核心的Maxthon卻可以，真怪！不知道是不是我電腦的問題，如果有人知道也麻煩跟我說一下原因，感恩！
Go～！趕快也來做一個專屬於自己的網站icon吧！
F2blog的使用者(F2cont)，請將語法貼在”常規管理” ＞ “主體欄設置”裡的 “<head>區域額外代碼” 欄位裡即可。

2 則留言

    1. 小光大大
      我後台主體欄是設
      <link rel="shortcut icon" href="attachments/favicon.ico" />
      沒錯啊
      可是在前台看原始碼確是
      <link rel="icon" href="attachments/" type="image/x-icon" />
      <link rel="shortcut icon" href="attachments/" type="image/x-icon" />
      可是我怎麼改, 都不會變咧, 真是奇怪!!

      我去看了小光您的前台原始碼是
      <link rel="icon" href="./favicon.ico" type="image/x-icon" />
      <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

留言功能已關閉。