|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8" /> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | | - <title>Generate Favicon</title> |
| 6 | + <title>Download Favicons</title> |
7 | 7 | <style> |
8 | 8 | body { |
9 | 9 | display: flex; |
10 | 10 | flex-direction: column; |
11 | 11 | align-items: center; |
12 | 12 | justify-content: center; |
13 | 13 | min-height: 100vh; |
14 | | - background: #f3f4f6; |
| 14 | + background: #1a1a2e; |
15 | 15 | font-family: system-ui, -apple-system, sans-serif; |
| 16 | + color: white; |
16 | 17 | } |
17 | | - canvas { |
18 | | - border: 2px solid #ddd; |
19 | | - margin: 10px; |
20 | | - background: white; |
| 18 | + h1 { color: #9333EA; } |
| 19 | + .buttons { |
| 20 | + display: flex; |
| 21 | + gap: 20px; |
| 22 | + margin-top: 30px; |
| 23 | + flex-wrap: wrap; |
| 24 | + justify-content: center; |
| 25 | + } |
| 26 | + button { |
| 27 | + padding: 15px 30px; |
| 28 | + font-size: 16px; |
| 29 | + border: none; |
| 30 | + border-radius: 8px; |
| 31 | + background: linear-gradient(135deg, #2563EB, #9333EA); |
| 32 | + color: white; |
| 33 | + cursor: pointer; |
| 34 | + transition: transform 0.2s, box-shadow 0.2s; |
| 35 | + } |
| 36 | + button:hover { |
| 37 | + transform: scale(1.05); |
| 38 | + box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4); |
| 39 | + } |
| 40 | + .preview { |
| 41 | + display: flex; |
| 42 | + gap: 20px; |
| 43 | + margin: 30px 0; |
| 44 | + align-items: center; |
21 | 45 | } |
22 | | - .info { |
23 | | - margin-top: 20px; |
24 | | - padding: 20px; |
25 | | - background: white; |
| 46 | + canvas { |
| 47 | + border: 2px solid #333; |
26 | 48 | border-radius: 8px; |
27 | | - box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
28 | 49 | } |
| 50 | + .label { font-size: 12px; color: #888; text-align: center; } |
29 | 51 | </style> |
30 | 52 | </head> |
31 | 53 | <body> |
32 | | - <h1>Favicon Generator</h1> |
33 | | - <div> |
34 | | - <canvas id="favicon-16" width="16" height="16"></canvas> |
35 | | - <canvas id="favicon-32" width="32" height="32"></canvas> |
36 | | - <canvas id="favicon-180" width="180" height="180"></canvas> |
| 54 | + <h1>⚡ PostBot Favicon Generator</h1> |
| 55 | + <p>Click a button to download the favicon</p> |
| 56 | + |
| 57 | + <div class="preview"> |
| 58 | + <div> |
| 59 | + <canvas id="favicon-16" width="16" height="16"></canvas> |
| 60 | + <div class="label">16x16</div> |
| 61 | + </div> |
| 62 | + <div> |
| 63 | + <canvas id="favicon-32" width="32" height="32"></canvas> |
| 64 | + <div class="label">32x32</div> |
| 65 | + </div> |
| 66 | + <div> |
| 67 | + <canvas id="favicon-180" width="180" height="180"></canvas> |
| 68 | + <div class="label">180x180</div> |
| 69 | + </div> |
| 70 | + <div> |
| 71 | + <canvas id="favicon-192" width="192" height="192"></canvas> |
| 72 | + <div class="label">192x192</div> |
| 73 | + </div> |
| 74 | + <div> |
| 75 | + <canvas id="favicon-512" width="512" height="512"></canvas> |
| 76 | + <div class="label">512x512</div> |
| 77 | + </div> |
37 | 78 | </div> |
38 | | - <div class="info"> |
39 | | - <p><strong>Instructions:</strong></p> |
40 | | - <ol> |
41 | | - <li>Right-click on each canvas</li> |
42 | | - <li>Select "Save image as..."</li> |
43 | | - <li>Save as: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png</li> |
44 | | - <li>Place files in the /public folder</li> |
45 | | - </ol> |
| 79 | + |
| 80 | + <div class="buttons"> |
| 81 | + <button onclick="download('favicon-16', 'favicon-16x16.png')">📥 favicon-16x16.png</button> |
| 82 | + <button onclick="download('favicon-32', 'favicon-32x32.png')">📥 favicon-32x32.png</button> |
| 83 | + <button onclick="download('favicon-32', 'favicon.ico')">📥 favicon.ico</button> |
| 84 | + <button onclick="download('favicon-180', 'apple-touch-icon.png')">📥 apple-touch-icon.png</button> |
| 85 | + <button onclick="download('favicon-192', 'android-chrome-192x192.png')">📥 android-chrome-192x192.png</button> |
| 86 | + <button onclick="download('favicon-512', 'android-chrome-512x512.png')">📥 android-chrome-512x512.png</button> |
46 | 87 | </div> |
47 | 88 |
|
48 | 89 | <script> |
@@ -89,10 +130,20 @@ <h1>Favicon Generator</h1> |
89 | 130 | ctx.stroke(); |
90 | 131 | } |
91 | 132 |
|
| 133 | + function download(canvasId, filename) { |
| 134 | + const canvas = document.getElementById(canvasId); |
| 135 | + const link = document.createElement('a'); |
| 136 | + link.download = filename; |
| 137 | + link.href = canvas.toDataURL('image/png'); |
| 138 | + link.click(); |
| 139 | + } |
| 140 | + |
92 | 141 | // Draw all sizes |
93 | 142 | drawFavicon('favicon-16', 16); |
94 | 143 | drawFavicon('favicon-32', 32); |
95 | 144 | drawFavicon('favicon-180', 180); |
| 145 | + drawFavicon('favicon-192', 192); |
| 146 | + drawFavicon('favicon-512', 512); |
96 | 147 | </script> |
97 | 148 | </body> |
98 | 149 | </html> |
0 commit comments