OTHERS
Favicon原理與做法

Favicon

某日上班偷懶時跟Web Developer朋友討論到favicon的問題,順便也記錄一下,偷懶也在學習!XD

Favicon是?

favicon

Favicon即是Favourite Icon,會在瀏覽器的網址列、Tab Title等地方顯示。

如果沒指定Favicon的話,IE會顯示IE Logo,Chrome顯示空白頁圖案,FireFox沒有圖案顯示。

在網頁上使用Favicon

<head>中加入
<link rel="icon" type="image/x-icon" href="favicon.ico" />

WordPress的話,將favicon.ico檔案放到wp-content/themes/<Theme名>,然後更改header.php,在<head>中加入
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

除了ICO檔外,PNG、GIF等都可使用,只是IE5或以上已Support ICO檔,但PNG和GIF要IE11才開始Support。

要製作ICO檔可用以下工具

favicon.cc

http://www.favicon.cc/

討論的事緣

朋友在上班時間看YouTube的Tutorial,但她不想被人知道她在看YouTube,所以把頁面上的YouTube Logo都清掉(整個Element刪除或display: none之類啦),但就是Favicon還在,所以引起了這個Favicon討論。

更改頁面的Favicon

朋友的做法是把整個Favicon的 Element刪除,但Favicon在Element刪除後還在,要更改Favicon的話,後來改動了Attribute href的值,轉成其他圖才可。

刪除Favicon link tag也沒反應的原因

平常在Developer Tool中更改內容會即時顯示在頁面上,但要轉換Favicon,卻一定要更改href的值,即使把整個html的內容都刪除,Favicon仍會在頁面上。這是因為在沒有指明Favicon Path的情況下,會首先在網頁所在的Directory找favicon.ico檔案,如果沒有便到Root Directory尋找。所以即使把Favicon的 Tag刪除,只要在網頁所在的目錄中有favicon.ico檔案,頁面上仍會顯示Favicon的。

測試

favicon

favicon

1. a. 普通文件Directory放上favicon.ico
沒有Favicon顯示
1. b. 普通文件Directory放上favicon.ico + link tag
有Favicon顯示
2. a. XAMPP Directory放上favicon.ico
XAMPP Favicon顯示
2. b. XAMPP Directory放上favicon.ico + link tag
指定Favicon顯示
3. a. Heroku Root Directory放上favicon.ico
沒有Favicon顯示
3. a. Heroku Root Directory放上favicon.ico + link tag
指定Favicon顯示

所以要顯示Favicon的話,還是在文件指定吧。

參考

Creating a Favicon
http://codex.wordpress.org/Creating_a_Favicon
网页地址栏小图片的原理-favicon.ico
http://www.blogjava.net/vincent/archive/2009/04/10/264778.html

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">