demoshop

demo, trying to be the best_

讓你的Favicon 與眾不同

  • 2008-02-09
  • 10475
  • 0
官方網站
http://www.favicon.jp

Favicon 就是網址前出現的小圖示,像小鋪一樣前面的圖示就不同(IE必需要加入書籤才看的到),你自己的網站也想不同嗎?就來看看以下教學吧

favicon圖示的副檔名是ico,必須用軟體去轉換,但是小鋪這次介紹你Favicon Japan這個網站,可以上傳GIF、JPG、PNG圖檔上去幫我們轉換成ico圖示,相當的方便,如果你想不到要做啥它還提供了許許多多的favicon可以用,所以第一步我們先做出一個ico圖示吧。

進入網站後往下拉看到下方圖示,利用瀏覽選擇你要的圖檔後按下旁邊的按鈕



產生好後會有預覽給您看,不滿意可以繼續上傳測試,滿意後按下Download下載



下載回來的檔名為favicon.ico,千萬不要改檔名啊這是規定的檔名



然後將favicon.ico放到你網頁根目錄下,在<head>以下</head>以上加入下方語法

<link rel="Shortcut Icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />

★注意事項:這樣就可以有效果了,如果沒有就是你貼錯頁,如果你網站有類似主版頁面等功能的話你就要貼在主版頁面那頁


?小鋪廢言:demo最近看到有些網站的favicon.ico會動,所以我也很好奇的去找了製作方法,就一起教吧


會動的圖那就是GIF啦,所以你必須做一個16*16的GIF,接者在網頁的<head>以下</head>以上加入下方語法

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="http://www.favicon.jp/icon/00047.gif" type="image/gif" >

如果覺得太麻煩,那就.....用這網頁吧....線上製作會動的favicon
選擇圖片後看你要不要輸入文字然後把Animate Favicon打勾就是動畫了,再來按下Generate FavIcon.ico


然後會有靜態和動態的範例,按下Download Favicon下載回來



就和上面貼的語法一樣,記得圖檔檔名要對還有圖要丟到根目錄下

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="http://www.favicon.jp/icon/00047.gif" type="image/gif" >


★注意事項:會動的Favicon在opera、IE6不支援,IE7可以跑一次,Firefox才可以正常支援!!!

回應討論