# 介紹 Favicon.ico 重點觀念

應該也是有人不知道什麼是 favicon.ico 吧？ 底下這張圖紅色框線的地方就是網站的小圖示，這就是我要說的 Favicon ( 全名是：Favorite Icon )

> ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5e12cfb0355dcbf5c575-Screenshot-071217-205726.png)

**先介紹幾個好用的網址：**

1.  **favico.js** (2013/9/14新增)  
    [favico.js - Make a use of your favicon](http://lab.ejci.net/favico.js/)
2.  **FavIcon Cheat Sheet** (2013/9/8新增)  
    [https://github.com/audreyr/favicon-cheat-sheet](https://github.com/audreyr/favicon-cheat-sheet)
3.  **Understand the Favicon** (2013/1/24新增)  
    [https://web.archive.org/web/20241123022418/http://www.jonathantneal.com/blog/understand-the-favicon/](https://web.archive.org/web/20241123022418/http://www.jonathantneal.com/blog/understand-the-favicon/ "http://www.jonathantneal.com/blog/understand-the-favicon/")
4.  **Favicon & App Icon Generator** (2018/1/3新增) -- 可以產生多平台的 Icons  
    [https://www.favicon-generator.org](https://www.favicon-generator.org)
5.  favicon.ico Generator  -- 超級好用的啦！極力推薦！  
    [http://www.favicon.cc/](http://www.favicon.cc/)
6.  FAVICON GENERATOR & GALLERY  
    [http://www.favicon.co.uk/](http://www.favicon.co.uk/)
7.  另一個線上轉換 Favicon.ico 的網站  
    [https://web.archive.org/web/20250906032823/http://www.chami.com/html-kit/services/favicon](https://web.archive.org/web/20250906032823/http://www.chami.com/html-kit/services/favicon)
8.  Favicon - Wikipedia, the free encyclopedia  
    [http://en.wikipedia.org/wiki/Favicon](http://en.wikipedia.org/wiki/Favicon)
9.  MSDN - How to Add a Shortcut Icon to a Web Page  
    [http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/howto/ShortcutIcon.asp](http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/howto/ShortcutIcon.asp)
10.  HOWTO: Serving up default favicon.ico and robots.txt files with apache  
     [https://web.archive.org/web/20120408141501/http://laffey.tv:80/favicon\_error\_logs.html](https://web.archive.org/web/20120408141501/http://laffey.tv:80/favicon_error_logs.html)

**Favicon.ico 重點觀念釐清**

-   當 IE Browser 第一次連到該網站時，會先去網站的根目錄下找有沒有 favicon.ico 檔案。例如：[http://www.miniasp.com/favicon.ico](https://stwillblogassets.blob.core.windows.net/files/images/external/www.miniasp.com/cddb7682da212556cb96-favicon.ico)
    
-   否則就需要在頁面中指定   <LINK REL="SHORTCUT ICON" HREF="/myicon.ico">  才可以找到非預設路徑的 Favorite Icon 檔案。
    
-   但是，第一次「無論」找的到或找不到該 Icon，都不會再找第二次！！這點非常重要，所以每次更新 Favorite Icon 檔時，如果要馬上能看到更新，最好換檔名！
    

**將 favicon.ico 圖示檔加入你的網頁的方式：**

```
<HEAD>   <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">   <TITLE>My Title</TITLE> </HEAD>
```