Loading...

在手機上如何建立網址到手機桌面中並且使用圖示

Temperature: 0 °C

ChungChung
author_tools

上回做專案時,客戶說了手機桌面上的網站捷徑太醜,想要美化。

這回索性也幫Innstory美化一下,順便寫下美化的方式。

在手機上如何建立網址到手機桌面中並且使用圖示
首先,們都知道,當使用手機開啟網站時,右上角會出現直立的(...)按鈕,如上方左邊圖示。

點擊後則會出現一個隱藏選單,其中有一個選項叫做(加到主畫面),如上面右邊圖示。

這時只要點選後,便可將網站連結建立捷徑於手機桌面上。

只是,尚未指定圖示的情況,手機桌面上都會出現手機自訂的icon,例如Innstory的圖示就會出現藍色底一個字母I的字樣。

但要怎麼做,才能建立像手機上的APP一樣特色又專業的圖示?

首先,並須先準備好三張圖,分別是57×57px、72×72px、114×114px。

檔名的部分可以自行命名或依據APP切圖的檔案命名格式,就是「圖片類型_分類_用途_狀態.png」這種方式命名。

如下圖~

在手機上如何建立網址到手機桌面中並且使用圖示
接著,請服用以下語法,並包在head之間。

<link rel="apple-touch-icon" href="images/icon-innstory-web.png">
<link rel="apple-touch-icon" sizes="72×72" href="images/icon-innstory-web-72.png">
<link rel="apple-touch-icon" sizes="114×114" href="images/icon-innstory-web-@2.png">


完成之後,再把網址加到桌面時,就會變成剛所設定的圖示,如下圖。

在手機上如何建立網址到手機桌面中並且使用圖示
左方圖是服用前,右方圖為服用後。

另外,有時瀏覽器的暫存檔清不掉時會無法顯示剛剛設計好的圖示。

這時可以使用無痕視窗瀏覽。

又或者將引入的圖示後方加上參數。

例如~

images/icon-innstory-web.png?2018037


以上紀錄。

台北市內湖區江南街71巷75弄 Go

https://innstory.com/story-在手機上如何建立網址到手機桌面中並且使用圖示-1514
Innstory 資訊科技新知

Prev
 兒子幹的好啊

Next
javascript_底下使用_htmlspecialchars 

Nearby Attractions

台北市內湖區江南街71巷75弄-Nearby Attractions

  • 草山水道系統 Go
  • 清真寺 Go
  • 王義德墓 Go
  • 臺北水道水源地 Go
  • 帝國生命保險株式會社臺北支店... Go
  • 歸綏街文萌樓 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

Responsive Web...

智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。 所以現在,在開發系統時客戶都會詢問是否支...

RewriteRule仿靜態連結

RewriteRule仿靜態...

前幾天寫了關於頁面導向位置的定義。https://innst...

校外教學(木柵動物園)

校外教學(木柵動物園)

期中考週的校外教學,來到了上回去不成的木柵動物園。 炎熱的天,帶著位小蘿蔔頭,一邊觀察一邊完成老師交...

Recommended reading

Other stories happened at this address

校外教學(木柵動物園)

校外教學(木柵動物園)

期中考週的校外教學,來到了上回去不成的木柵動物園。 炎熱的天,帶著位小蘿蔔頭,一邊觀察一邊完成老師交...

獨自一個人的2個星期,最後幾個小時。

獨自一個人的2個星期,最後幾...

s 終於,獨自一個人的時間~只剩下最後幾個小時.....。 而本該要趕工的案子也差不多完成收尾~在號...

CSS3 box-shadow

CSS3 box-shado...

便利貼~俗稱小黃(對我來說),依據wiki的說法~是M公司的工程師史賓塞·席佛經過年後出現成果。 那...

多桑 - 李鴻欽(漫畫)

多桑 - 李鴻欽(漫畫)

第一次知道李鴻欽學長,是因為當時正在軍中服役.... 聽著軍中長官訴說曾經有位在同單位服役的學長,把...

啟動休假模式

啟動休假模式

s 其實打從月日開始,就一直是呈現休假狀態~( ̄∇ ̄) 只是今天下午還是很認份的去客戶那邊做完教育訓...

就是要一杯美式配上小美手工鳳梨酥...

就是要一杯美式配上小美手工鳳...

繼天然美味好吃的小美冰淇淋....啊不...是手工餅乾後.... 我心中的烘培達人小美,又一力作,小...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format