有沒有發現在很多人的網站或部落格的網址前都有這個小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:
<link rel="shortcut icon" href="圖示網址/favicon.ico" />

.ico語法2:
<link rel="icon" href="圖示網址/favicon.ico" type="image/ico" />

.png語法:
<link rel="icon" href="圖示網址/favicon.png" type="image/ico" />

.gif語法:
<link rel="icon" href="圖示網址/favicon.gif" type="image/ico" />

.jpg語法:
<link rel="icon" href="圖示網址/favicon.jpg" type="image/ico" />

目前測試在Firefox3、Opera9、Netscape8、Maxthon2 (IE核心)均可正常顯示,
唯獨IE7一直顯示不出來,可是同樣是用IE核心的Maxthon卻可以,真怪!
不知道是不是我電腦的問題,如果有人知道也麻煩跟我說一下原因,感恩!

Go~!趕快也來做一個專屬於自己的網站icon吧!

F2blog的使用者(F2cont),請將語法貼在"常規管理" > "主體欄設置"裡的 "<head>區域額外代碼" 欄位裡即可。

(以上文章轉載自沒事找事做 :: WordPress)


※將gif,jpg,png轉ico檔

Favicon Japan!! 可以號稱是日本 Favicon 圖示資料庫,除了介紹 Favicon 的使用、製作方法之外,
還蒐集了許多國內外網站的 Favicon 圖示,儼然成為超大型的圖示收藏地。
除了可以直接下載使用圖示,網站更提供「Favicon自動生成」讓你快速將 GIF, JPG, PNG 轉為 ICO 檔。

FaviconJapan  

arrow
arrow

    慕天雨 發表在 痞客邦 留言(2) 人氣()