一、網站圖標favicon.ico
1.首先把favicon.ico 這個圖標放到根目錄下。
2.再html里面， head 之間 引入 代碼。
> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：對ico文件的大小有一定的要求，一般情況下設置成32*32即可，如果設置過大，可能會無法顯示
如果有了一張過大的ico文件，將其轉換為較小尺寸即可
下面的網站即可實現這種轉化：
https://www.aconvert.com/cn/image/ico-to-png/
二、網站優化三大標簽
2.1 網頁title標題
建議：
首頁標題：網站名（產品名）- 網站的介紹
例如：
品優購-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
2.2 Description 網站說明
<meta name="description" content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
注意點：
1. 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引用戶點擊。
2. 同樣遵循簡短原則，字符數含空格在內不要超過 120 個漢字。
3. 補充在 title 和 keywords 中未能充分表述的說明.
4. 用英文逗號 關鍵詞1,關鍵詞2
2.3 Keywords 關鍵字
Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多 少許。
2.4 總結
1. 我們的網頁要做的優秀，符合搜索引擎的要求，才可以讓搜索引擎優先顯示我們的網頁。
所以我們的網站要做很多的優化， 其中就有這三大標簽。
2. 一般情況下，三大標簽里面的優化詞，都是專門的優化人員寫的，我們大概了解一下規范就可以了。
3. 我們的主要任務是，能寫出這三大標簽， 然后把優化人員給我們的內容，添加到里面。
三、字體圖標
圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。 我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。 這就是字體圖標（iconfont).
3.1 字體圖標優點
- 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..
- 但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
- 本身體積更小，但攜帶的信息並沒有削減。
- 幾乎支持所有的瀏覽器
- 移動端設備必備良葯...
3.2 字體圖標使用流程
3.2.1 設計字體圖標
假如圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創建 icon圖標， 比如下圖：
之后保存為svg格式，然后給我們前端人員就好了。
其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。
3.2.2 上傳生成字體包
當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。
推薦網站： http://icomoon.io
* icomoon字庫
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。
* 阿里icon font字庫
http://www.iconfont.cn/
這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI制作圖標上傳生成。 一個字，免費，免費！！
3.2.3 下載兼容字體包
剛才上傳完畢， 網站會給我們把UI做的svg圖片轉換為我們的字體格式， 然后下載下來就好了
當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了， 直接到剛才的網站上找喜歡的下載使用吧。
<img src="media/fontt1.png" />
<img src="media/fontt2.png" />
3.2.4 字體引入到HTML
得到壓縮包之后，我們得知字體圖標 本質就是 字體文件。 注意這個壓縮包不要刪掉，我們后面還有用的。
最后一步，是最重要的一步了， 就是字體文件已經有了，我們需要引入到我們頁面中。
3.2.4.1 首先把 fonts文件夾放入我們 根目錄下
3.2.4.2 html標簽內里面添加結構
<span></span>
3.2.4.3 在樣式里面聲明字體： 告訴別人我們自己定義的字體(一定注意字體文件路徑的問題)
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }
3.2.4.4 給盒子使用字體
span { font-family: "icomoon"; }
3.2.5 追加字體圖標
如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做
把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。
