嚴格來說，這並不是一篇關於前端開發的文章，因為涉及到的知識非常淺。這只是一個向設計獅們分享的小經驗，只是其中用到了一些前端內容。
最近接了個私活，了解到一個初創公司正在高價懸賞Logo（主要用於APP圖標），我便投稿試了試，結果真的被選中了，得到了我認為遠超Logo本身價值的獎金（看來跟着拿到投資的初創公司混真的有肉吃啊）。閑話不表，設計完Logo之后我靈機一動，用iOS系統做了一個APP圖標真實效果預覽圖，一起發給了甲方。
我們假設剛做好的Logo是下面這樣的（這是樣例圖標，用我開發的UWP應用《紙書科學計算器》的Logo代替，色調就妥妥地用知乎藍吧）：
本文的最終目標是把它煞有介事地放在iOS的主屏幕上，效果如下：
如果你再拍一個實物圖出來，就可以充當這個圖標的效果圖了（手機拍得丑勿噴）：
總之這是一個讓你告別P圖和套Mockup的簡單方法。不用真的編譯出這個iOS應用，你需要做的，只是用電腦搭建一個本地服務器，再做一張非常簡單的網頁即可。然后在iOS上用Safari打開這張網頁，將網頁快捷方式發送到主屏幕，就達到這個效果啦。
一、搭建本地靜態服務器
本文以Windows系統為例。Mac系統可以用Apache，詳情請百度，並不復雜的。所以Mac用戶可以跳過本節。Windows雖然也可以用Apache，但是用自帶的IIS會更加方便。
我以前發過一篇關於搭建本地IIS服務器的文章，也可以看這里：Web前端頁面的瀏覽器兼容性測試心得（一）搭建測試用本地靜態服務器。其實本文就是在介紹本地靜態服務器的實際用途之一，看看都能有哪些不可思議的操作！
作為.NET全家桶成員，IIS經常和后端的ASP.NET結合起來建站，但在這里我們不需要配置ASP.NET。只用幾個步驟，便可在電腦上開啟IIS服務。
以下步驟以我電腦上的Win10系統為例，和Win8、Win7上的操作都是差不多的：
1.打開控制面板，進入“程序與功能”：
2.點擊“啟用或關閉Windows功能”：
3.參照圖中紅色圈出部分，勾選需要的組件。需注意：不能只勾選最上一級選項，必須從最底層選項開始勾選，直至所選組件全部顯示為“√”，如圖中所示。
4.點擊“確定”按鈕，Windows開始添加IIS功能，這會持續幾分鍾，然后就可以使用IIS功能了。
5.在開始菜單的“Windows管理工具”目錄下，找到並打開“Internet Information Services(IIS)管理器”（建議把該快捷方式固定在開始菜單，以后打開會更方便）。
6.在界面左側列表找到自己的主機那一項，右鍵，選擇“添加網站”：
7.這時會彈出“添加網站”的窗口，我們先不要管它。我們打開命令提示符（cmd），輸入“ipconfig”並回車，即可查看自己本機在當前局域網內的IP地址（注意是IPv4地址，而且以“192.168”開頭）。
8.回到“添加網站”窗口，如下圖所示填寫網站名稱、設置服務器根目錄所在路徑（根目錄選在哪里看你喜好），並填入本機IP地址作為服務器的訪問地址，點擊確定。
9.這時，我們發現網站已經建立並啟動了：
二、新建靜態頁面
有了本地服務器，我們就可以放靜態網頁進去了。只要你的iOS設備和電腦連接着同一個wifi，iOS設備就可以訪問電腦上的服務器。
1.在電腦上，我們進入剛剛設置好的服務器根目錄下（我的是“C:\server-root”），在這里添加一個主頁。新建一個文本文檔，輸入以下代碼並保存，把文件名改為“index.html”。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="apple-touch-icon" href="icon256.png" /> <title>應用名稱</title> </head> <body> <p>OK!</p> </body> </html>
（注：“應用名稱”處應改為你需要填寫的應用名稱）
2.然后再把設計好的Logo做一份尺寸為256px*256px的應用圖標，保存為png格式（尺寸一定要對），放在和index.html同一個目錄下，改名為“icon256.png”：
3.在瀏覽器中輸入你本機的IP地址，看看主頁是否成功顯示：
4.看來我們已經成功了！現在就可以在你的iOS設備上打開Safari，輸入該IP地址，在確認能正常訪問之后，點擊右上方的分享按鈕，再點擊“添加到主屏幕”：
接下來按一下home鍵，就會發現大功告成了：
下面簡單介紹下原理，最關鍵的是HTML里的這一句代碼：
<link rel="apple-touch-icon" href="icon256.png" />
這句聲明了如果Safari將網頁快捷方式發送到主屏幕，就以“icon256.png”作為圖標。但是，在APP如此豐富的現在，好像沒什么人這樣做了。
還好，這句的功能可不止這個。有了這個link元素，如果你收藏該網頁，在個人收藏夾中還會顯示這個圖標，這個應用場景就常見多了：
可能本文對於設計獅來說還是有點極客，不知道接受度如何。不管怎樣，祝設計愉快，甲方爽快~