讓你的Favicon 與眾不同
- 2008-02-09
- 13002
- 0
Favicon 就是網址前出現的小圖示，像小鋪一樣前面的圖示就不同(IE必需要加入書籤才看的到)，你自己的網站也想不同嗎?就來看看以下教學吧
C#新語法大作戰 [2024-04-20]開課 共7H
從相依到注入-進階篇 [2024-04-21]開課 共5Hfavicon圖示的副檔名是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才可以正常支援!!!
回應討論