1. 程式人生 > >網站的shortcut icon-- favicon.ico

網站的shortcut icon-- favicon.ico

什麼是favicon?
所謂favicon,即Favorites Icon的縮寫,顧名思義,便是其可以讓瀏覽器的收藏夾中除顯示相應的標題外,還以圖示的方式區別不同的網站。當然,這不僅僅是Favicon的全部,根據瀏覽器的不同,Favicon顯示也有所區別:在大多數主流瀏覽器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不僅在收藏夾中顯示,還會同時出現在位址列上,這時使用者可以拖曳favicon到桌面以建立到網站的快捷方式;除此之外,標籤式瀏覽器甚至還有不少擴充套件的功能,如FireFox甚至支援動畫格式的favicon等。
從特定的技術角度看,favicon也並不只是僅僅讓網站給人更專業的觀感,也可以在一定程度上減輕伺服器的流量頻寬佔用:一般為了提高網站的可用性,我們都會為自己的網站建立一個自定義的404錯誤檔案,在這種情況下,如果網站沒有相應的favicon.ico檔案,每當有使用者收藏網站/網頁時, Web伺服器都會呼叫這個自定義的404檔案,並在網站的錯誤日誌中記錄。這顯然是應該予以避免的。

如何製作Favicon.ico
製作Favicon.ico的方法相當簡單,首先,利用圖形工具建立2個反映網站主題的256色的小圖片:1個為32×32畫素,另一個為16 ×16畫素。需要注意的是,調色盤要選用“Windows 預設調色盤”,不然,在最終的效果展示中圖形可能會發生迥異於您初衷的顏色上變化。
需要說明的是,在很多關於Favicon.ico的說明中,常見到要求圖片為16色的說法,應該說這類說法大大過時:在早期如Windows 95時期,16色的Favicon.ico可能是個穩妥的選擇,保證其在大多數情況下正常使用,但現在,完全不存在那類限制,16色只能使圖示的展示效果大大降低。
至於在瀏覽器中使用時16×16畫素的圖片已經足夠,為什麼還要準備32×32畫素的圖片,原因在於,正如上文所言,favicon也顯示在位址列中,使用者可以拖曳favicon到桌面以建立到網站的快捷方式,而桌面圖示則要以32×32顯示的,如果您的Favicon.ico不包括32畫素的圖片,系統就只能使用預設的瀏覽器圖示來標註網站/網頁,如Internet Explorer的藍色“e”,起不到我們意欲通過Favicon.ico打造網站品牌的作用。
圖片製作好後,使用如Image2Ico之類的小程式即可將2張圖片轉換到一個Icon

檔案中。也可以通過可以線上製作Favicon的網站來製作,不過,需要注意的是,這個網站要求圖片原始檔格式為Pic。

在網頁中使用Favicon.ico
瀏覽器呼叫Favicon的原則是首先在網頁所在的目錄下尋找Favicon.ico檔案,如果沒有,便到網站的根目錄下尋找。
因此,在網頁中使用Favicon最簡單的辦法便是將製作好的圖示檔案命名為Favicon.ico,然後將其上傳到網站的根目錄即可。
如果您需要將Favicon.ico放到其他目錄下,或者希望讓不同的網頁顯示不同的Favicon,就需要在網頁Html檔案中做設定了,具體設定也很簡單,在Html中的<head>部分加入如下的程式碼:

程式程式碼:
<link rel="icon" href="http://www.fmben.com/favicon.ico" mce_href="http://www.fmben.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.fmben.com/favicon.ico" mce_href="http://www.fmben.com/favicon.ico" type="image/x-icon">

Firefox還支援GIF動畫格式的Favicon,使用方法如下:
首先製作一個16*16的gif動畫,然後在html程式碼<head></head>中加入如下程式碼:

程式程式碼 <link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

相關推薦

網站shortcut icon-- favicon.ico

什麼是favicon? 所謂favicon,即Favorites Icon的縮寫,顧名思義,便是其可以讓瀏覽器的收藏夾中除顯示相應的標題外,還以圖示的方式區別不同的網站。當然,這不僅僅是Favicon的全部,根據瀏覽器的不同,Favicon顯示也有所區別:在大多數主流瀏覽器如

JSP設定網站favicon.ico

        favicon.ico中文名稱是網站頭像。在我們的網站建設中,為網站打造一個契合網站主題的個性化標誌則是必需的,這直接關係到能否成功地塑造網站的品牌。這從某些角度看仍在網站推廣的範疇之內,而欲取得成功,不僅包括良好的頁面設計、令人印象深刻的

favicon.ico網站圖示不顯示問題

<link rel="Shortcut Icon" href="images/favicon.ico"> 是因為你在本地測試的,而不是在伺服器端測試的。 【1】在伺服器端測試,預設會識別根目錄下favicon.ico的檔案作為網頁的ico。若在個別頁

favicon.ico網站圖示不顯示

<link rel="Shortcut Icon" href="images/favicon.ico">是因為你在本地測試的,而不是在伺服器端測試的。【1】在伺服器端測試,預設會識別根目錄下favicon.ico的檔案作為網頁的ico。若在個別頁面有不同的ico

favicon.ico網站加圖示不顯示問題

給網站加圖示不顯示!!!! 再公共jsp中新增,我的是在global.jsp中加入下面兩句話 <link rel="icon" href="${ctx}/favicon.ico" type="image/x-icon" /> <link rel="

網頁圖示/images/favicon.ico" type="image/x-icon" />

<%@ page language="java" pageEncoding="GBK"%><%String path = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD

chrome瀏覽器更換favicon.ico後不更新緩存解決方案

avi get 什麽 favicon chrome 方案 lan chrome瀏覽器 圖片 chrome瀏覽器更換favicon.ico後不更新緩存 1、按ctrl+F5強制刷新或網頁上右鍵重新載入。2、再不行就刪除緩存。3、但這樣太討厭了,還有個小竅門屢試不爽,那就是直接

Django中favicon.ico文件的配置

python django favic 文件配置 方法 錯誤 默認情況下,瀏覽器訪問一個網站的時候,同時還會向服務器請求“/favicon.ico”這個URL,目的是獲取網站的圖標。默認情況下,Django會返回404錯誤的,只是這個錯誤不會打印出來,並且瀏覽器接收到這個404錯誤後,也無傷大

favicon.ico

Language 大小 data 主目錄 zhang ref type 數據 clas favicon.ico 作為網頁的圖標,被當前的所有瀏覽器都支持。 可直接放在主目錄下,自動加載,也可設置在header中。 <link rel="shortcut icon"

shortcut icon VS bookmark

itl spa HR inf web short get PE VC shortcut icon:特指瀏覽器中地址欄左側顯示的圖標,一般放大小為16x16 或者 32*32(再大是完全沒有必要的!),後綴名為.icon的圖標; bookmark:瀏覽器書簽、收藏用的圖標;

vue-cli 打包後顯示favicon.ico小圖標

cli 文件 技術 vue 相對路徑 alt src 分享 avi 第一步:favicon.ico小圖標放在static裏面 第二步:index.html 文件中引入時需要寫 ./ 相對路徑 第三部:npm run build 打包 打包完成就可以看到

shiro的/favicon.ico問題

ping shiro type sha mage ppi clas -type highlight 登錄成功之後跳轉/favicon.ico問題。 1、spring-shrio.xml裏面配置加上 /favicon.ico = anon 2、web.xml中配置中

html頁面除錯,控制檯提示GET http://localhost:8082/favicon.ico 404 (Not Found)

解決的方法: 1、做個favicon.ico檔案放在根目錄下,在head標籤引入favicon.ico檔案即可 <link href ="favicon.ico" rel="shortcut icon"> 2、直接在head標籤插入以下程式碼也OK <link

【Flask】 Not Found: /favicon.ico 專案logo圖示載入

當瀏覽器訪問我們的伺服器時,瀏覽器會預設請求專案根路徑下的favicon.ico檔案,根目錄下沒有這個檔案,所以就報了這個錯誤。 INFO:werkzeug:127.0.0.1 - -  "GET /favicon.ico HTTP/1.1" 404 - 如何解決: 瀏覽器

關於django2.0的favicon.ico和media的配置

在settings.py中 MEDIA_URL = '/media/' TEMPLATES[0]['OPTIONS']['context_processors'].append('django.tem

idea+springboot+linux+nginx部署專案遇到的問題,403、404、favicon.ico

1,訪問靜態資源403 修改nginx.conf檔案頭為:user root 2,訪問靜態資源404 同樣是在nginx.conf檔案修改 如果location的配置是 location /static ,類似這樣的子路徑,配置如下: root /webroot/s

HTmL設定瀏覽器標題前面的圖示shortcut icon

1、設定標題使用title標籤 2、設定標題前面的圖示 建議包含以下兩行HTML程式碼: 只有第一行是必須的,因為“shortcut icon”字串將被多數遵守標準的瀏覽器識別為列出可能的關鍵詞(“shortcut”將被忽略,而僅適用“icon”); 而In

springboot 的啟動圖案配置 和 favicon.ico 小圖示和yml 檔案使用

springboot的啟動圖案為: 更改springboot的啟動圖案: 在resources下建立banner.txt 預設是這個檔案 把圖案複製到banner.txt中  AnsiColorBLUE設定字型顏色 配置favicon.ico 

favicon.ico請求處理

favicon.ico 圖示用於收藏夾圖示和瀏覽器標籤上的顯示,如果不設定,瀏覽器會請求網站根目錄的這個圖示,如果網站根目錄也沒有這圖示會產生 404。 出於優化的考慮,要麼就有這個圖示,要麼就禁止產生這個請求。 在做 H5 移動端應用的時候,不希望產生 favicon.ico 的請求。 可以在

shortcut iconicon程式碼的區別

關於shortcut icon和icon程式碼的區別介紹 語句一: <link rel="shortcut icon" href="favicon.ico" /> 語句二: <link rel="icon" href="animated_favicon.gif