---
# System prepended metadata

title: "\U0001F3C5 Day 13 - 用三行語法做個網頁快捷 App 吧！"
tags: [2025 VibeCoding 體驗營]

---

# 🏅 Day 13 - 用三行語法做個網頁快捷 App 吧！



還記得前面我們把妙麗的生日記錄在 localStorage 裡嗎？

今天要來做一件 超有成就感的事：

讓你的作品，出現在手機主畫面上，
像一個真的 App 一樣可以被點開！📱✨

也就是說，之後你可以跟朋友說：

「這是我做的『妙麗歲數計算機網頁 App』，來，我手機上有～」😆

⸻

今天的任務概念：什麼是「網頁快捷 App」？

嚴格來說它不是真正的原生 App，
但可以做到這幾件事：
	•	在手機主畫面有一顆 獨立的圖示 icon
	•	點下去會直接開啟你的網頁（GitHub Pages）
	•	使用體驗非常接近「自己寫了一個 App」

而我們今天要做的，就是用 三行 <link>
加上一張 icon.png，就完成一個「可以釘在桌面的作品」。

⸻

## 第一步：準備一個 icon.png

1. 請在你的專案資料夾中，準備一張圖檔：icon.png
2. 建議是 正方形（例如 512×512 或 1024×1024）
	
若沒時間作圖，也可以下載[我的版本](https://drive.google.com/file/d/185sTcrp0A7NF8tt18HOMN13H6oYXO2TO/view?usp=sharing)，或右鍵另存
![icon](https://hackmd.io/_uploads/r10xgVflZe.png)




## 第二步：在 <head> 放上三行關鍵語法

打開你的 index.html，找到 <head>...</head>，
在裡面加入這三行：
```
<head>
    
<!--  放入這三行開始 -->
<link rel="icon" type="image/png" href="./icon.png">
<link rel="apple-touch-icon" href="./icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="./icon.png">
<!--  放入這三行結束 -->
    
</head>
```
效果說明：
 • rel="icon"：一般瀏覽器的頁籤小 icon（favicon）、Android Chrome 也會用
 • apple-touch-icon：讓 iOS / iPadOS 在「加入主畫面」時，知道要用哪張圖
 • sizes="180x180"：告訴裝置這張圖的尺寸（給某些裝置參考用）

儲存後，把程式碼 push 到 GitHub，確認 GitHub Pages 網址可以正常開啟。

⸻

## 第三步：在 iOS Safari 上加到主畫面（iPhone / iPad）

拿出你的手機或平板，打開手機原生瀏覽器 (Safari)，依序操作：
    
 1.	在 Safari 開啟你的 GitHub Pages 網址
 2.	確認網頁載入完成後，點擊下方的 「分享」按鈕（一個方框＋上箭頭）
 3.	在選單中往下滑，找到 「加入主畫面」（Add to Home Screen）
 4.	可以修改名稱（例如改成「妙麗計算機」）
 5.	按右上角的 「加入」

回到主畫面，你應該會看到一顆新的 icon
點一下，就會直接開啟你的網頁。
    
![IMG_7578](https://hackmd.io/_uploads/rkI7W4fe-g.jpg)

    
PS：android chrome 瀏覽器流程，請觀看此 [Google 文件](https://support.google.com/chrome/answer/15085120?hl=zh-au&co=GENIE.Platform%3DAndroid)


## 題目：讓你的妙麗計算機變成「快捷網頁 App」

請你完成以下目標：
1. 在你的妙麗歲數計算機專案中：
2. 準備一張 icon.png，放在 index.html 同一層
3. 在 <head> 中加入今天教的三行 <link> 語法
4. 部署到 GitHub Pages（延續前幾天的成果）
5. 在你的 手機主畫面 上建立這個網頁的快捷 App：
	• iOS：用 Safari「加入主畫面」
	• Android：用 Chrome「加入主畫面」或「安裝應用程式」
6. 點擊主畫面上的 icon，確認：
7. 可以打開你的網頁
8. 妙麗計算機可以正常運作，也會直接顯示妙麗的歲數

## 附上校長拍攝的情境影片 😆
{%youtube AWakB2sK0LU %}


## 回報格式：
1. 你的 GitHub Pages 網址
2. 你手機上有 icon 的截圖
3. 分享過程中有沒有遇到一些困難，並嘗試 Vibe 獲研究解決？



PS：會這一招後，你就不只是「做了一個網頁」，
而是「手機桌面上有自己作品的開發者」了 ✨