Skip to content

Commit a25340a

Browse files
jedisct1jedisct1
committed
Add favicon generator and proper favicon configuration
1 parent 0ba3639 commit a25340a

File tree

4 files changed

+276
-2
lines changed

4 files changed

+276
-2
lines changed

‎www/_layouts/default.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,14 @@
2626
<meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}/assets/images/twitter-card.png">
2727
<meta name="twitter:site" content="@ipcrypt">
2828
<!-- Favicon -->
29-
<link rel="icon" href="{{ site.baseurl }}/assets/images/favicon.ico">
29+
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/images/apple-touch-icon.png">
3030
<link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/images/favicon-32x32.png">
3131
<link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/images/favicon-16x16.png">
32-
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/images/apple-touch-icon.png">
32+
<link rel="icon" href="{{ site.baseurl }}/assets/images/favicon.ico">
33+
<link rel="manifest" href="{{ site.baseurl }}/site.webmanifest">
34+
<meta name="msapplication-TileColor" content="#2563eb">
35+
<meta name="msapplication-config" content="{{ site.baseurl }}/browserconfig.xml">
36+
<meta name="theme-color" content="#2563eb">
3337
<!-- CSS -->
3438
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/variables.css">
3539
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">

‎www/browserconfig.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/assets/images/mstile-150x150.png"/>
6+
<TileColor>#2563eb</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎www/favicon-generator.html‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>IPCrypt Favicon Generator</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
margin: 0;
15+
background-color: #f0f4f8;
16+
padding: 20px;
17+
}
18+
19+
.logo-container {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
width: 100%;
24+
max-width: 1200px;
25+
}
26+
27+
.logos-grid {
28+
display: grid;
29+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
30+
gap: 20px;
31+
width: 100%;
32+
margin-bottom: 40px;
33+
}
34+
35+
.logo-wrapper {
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
background-color: white;
40+
padding: 20px;
41+
border-radius: 8px;
42+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
43+
}
44+
45+
.logo-title {
46+
margin-bottom: 10px;
47+
font-weight: bold;
48+
color: #2563eb;
49+
}
50+
51+
.logo {
52+
background: linear-gradient(135deg, #2563eb, #1d4ed8);
53+
position: relative;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
overflow: hidden;
58+
}
59+
60+
.logo-512 {
61+
width: 512px;
62+
height: 512px;
63+
border-radius: 80px;
64+
}
65+
66+
.logo-192 {
67+
width: 192px;
68+
height: 192px;
69+
border-radius: 30px;
70+
}
71+
72+
.logo-180 {
73+
width: 180px;
74+
height: 180px;
75+
border-radius: 28px;
76+
}
77+
78+
.logo-32 {
79+
width: 32px;
80+
height: 32px;
81+
border-radius: 6px;
82+
}
83+
84+
.logo-16 {
85+
width: 16px;
86+
height: 16px;
87+
border-radius: 3px;
88+
}
89+
90+
.grid-pattern {
91+
position: absolute;
92+
top: 0;
93+
left: 0;
94+
width: 100%;
95+
height: 100%;
96+
display: grid;
97+
grid-template-columns: repeat(8, 1fr);
98+
grid-template-rows: repeat(8, 1fr);
99+
opacity: 0.15;
100+
}
101+
102+
.grid-cell {
103+
margin: 8px;
104+
background-color: white;
105+
border-radius: 4px;
106+
}
107+
108+
.lock {
109+
position: absolute;
110+
top: 160px;
111+
right: 96px;
112+
width: 128px;
113+
height: 160px;
114+
background-color: white;
115+
border-radius: 16px;
116+
}
117+
118+
.lock::before {
119+
content: '';
120+
position: absolute;
121+
top: -64px;
122+
left: 24px;
123+
width: 80px;
124+
height: 80px;
125+
border: 24px solid white;
126+
border-bottom: none;
127+
border-radius: 40px 40px 0 0;
128+
}
129+
130+
.lock-keyhole {
131+
position: absolute;
132+
top: 40px;
133+
left: 24px;
134+
width: 80px;
135+
height: 80px;
136+
background: linear-gradient(135deg, #2563eb, #1d4ed8);
137+
border-radius: 8px;
138+
}
139+
140+
.text {
141+
position: absolute;
142+
bottom: 160px;
143+
left: 112px;
144+
color: white;
145+
font-size: 120px;
146+
font-weight: bold;
147+
}
148+
149+
.instructions {
150+
margin-top: 40px;
151+
background-color: white;
152+
padding: 20px;
153+
border-radius: 8px;
154+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
155+
max-width: 600px;
156+
}
157+
158+
h1 {
159+
margin-top: 0;
160+
color: #2563eb;
161+
}
162+
163+
ol {
164+
padding-left: 20px;
165+
}
166+
167+
li {
168+
margin-bottom: 10px;
169+
}
170+
</style>
171+
</head>
172+
<body>
173+
<div class="logo-container">
174+
<h1>IPCrypt Favicon Generator</h1>
175+
<p>This page displays the IPCrypt logo in various sizes for favicon generation. Take screenshots of each size as needed.</p>
176+
<div class="logos-grid">
177+
<div class="logo-wrapper">
178+
<div class="logo-title">android-chrome-512x512.png</div>
179+
<div class="logo logo-512" id="logo-512">
180+
<div class="grid-pattern grid-512">
181+
<!-- Grid cells will be added via JavaScript -->
182+
</div>
183+
<div class="lock">
184+
<div class="lock-keyhole"></div>
185+
</div>
186+
<div class="text">IP</div>
187+
</div>
188+
</div>
189+
<div class="logo-wrapper">
190+
<div class="logo-title">android-chrome-192x192.png</div>
191+
<div class="logo logo-192" id="logo-192">
192+
<div class="text" style="font-size: 48px; bottom: 60px; left: 44px;">IP</div>
193+
</div>
194+
</div>
195+
<div class="logo-wrapper">
196+
<div class="logo-title">apple-touch-icon.png (180x180)</div>
197+
<div class="logo logo-180" id="logo-180">
198+
<div class="text" style="font-size: 45px; bottom: 56px; left: 42px;">IP</div>
199+
</div>
200+
</div>
201+
<div class="logo-wrapper">
202+
<div class="logo-title">favicon-32x32.png</div>
203+
<div class="logo logo-32" id="logo-32">
204+
<div class="text" style="font-size: 8px; bottom: 10px; left: 8px;">IP</div>
205+
</div>
206+
</div>
207+
<div class="logo-wrapper">
208+
<div class="logo-title">favicon-16x16.png</div>
209+
<div class="logo logo-16" id="logo-16">
210+
<div class="text" style="font-size: 4px; bottom: 5px; left: 4px;">IP</div>
211+
</div>
212+
</div>
213+
</div>
214+
<div class="instructions">
215+
<h2>Instructions</h2>
216+
<ol>
217+
<li>Take screenshots of each logo size above</li>
218+
<li>Save each screenshot with the appropriate filename in the
219+
<code>www/assets/images</code>
220+
directory</li>
221+
<li>For favicon.ico, use a tool like
222+
<a href="https://realfavicongenerator.net/" target="_blank">RealFaviconGenerator.net</a>
223+
to convert the 32x32 image</li>
224+
<li>Update the HTML head section in
225+
<code>_layouts/default.html</code>
226+
to reference these files</li>
227+
</ol>
228+
</div>
229+
</div>
230+
<script>
231+
// Add grid cells to the 512px logo
232+
const gridPattern = document.querySelector('.grid-512');
233+
if (gridPattern) {
234+
for (let i = 0; i < 16; i++) {
235+
const cell = document.createElement('div');
236+
cell.className = 'grid-cell';
237+
gridPattern.appendChild(cell);
238+
}
239+
}
240+
</script>
241+
</body>
242+
</html>

‎www/site.webmanifest‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "IPCrypt",
3+
"short_name": "IPCrypt",
4+
"icons": [
5+
{
6+
"src": "/assets/images/android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "/assets/images/android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"theme_color": "#2563eb",
17+
"background_color": "#ffffff",
18+
"display": "standalone"
19+
}

0 commit comments

Comments
 (0)