-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfavicon-generator.html
More file actions
223 lines (216 loc) · 14.8 KB
/
favicon-generator.html
File metadata and controls
223 lines (216 loc) · 14.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favicon Generator — Create Favicons from Text, Emoji, or</title>
<meta name="description" content="Generate favicons from text, emoji, or uploaded images. Download as ICO, PNG, and SVG. Free online favicon generator for websites.">
<link rel="canonical" href="https://www.quicktools.mom/favicon-generator.html">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.quicktools.mom/favicon-generator.html">
<meta name="twitter:card" content="summary">
<link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is a favicon?","acceptedAnswer":{"@type":"Answer","text":"A favicon is the small icon displayed in browser tabs, bookmarks, and history. It's usually 16×16 or 32×32 pixels and helps users identify your website visually."}},{"@type":"Question","name":"What sizes do I need?","acceptedAnswer":{"@type":"Answer","text":"For modern browsers, 32×32 is standard for browser tabs. 192×192 is used for Android home screen icons. Apple devices use 180×180. This tool generates all common sizes."}}]}</script>
</head>
<body>
<div class="page-wrapper">
<header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
<div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
<div class="tool-header">
<div class="tool-badge">🖼️ Design</div>
<h1>Favicon Generator</h1>
<p>Create beautiful favicons from text, emoji, or images. Download in multiple sizes.</p>
</div>
<div class="tool-card">
<div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: start;">
<div style="flex: 1; min-width: 280px;">
<label>Favicon Type</label>
<select id="faviconType" onchange="updateForm()">
<option value="image">Upload Image</option>
<option value="emoji">Emoji</option>
<option value="text">Text / Letters</option>
</select>
<div id="imageForm" class="mt-2">
<label>Upload an Image</label>
<div style="border:2px dashed var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;" onclick="document.getElementById('imgInput').click()">
<div style="font-size:1.5rem;">📸</div>
<p style="font-size:0.85rem;margin:0.3rem 0;">Click to upload image</p>
<p class="text-muted" style="font-size:0.75rem;">PNG, JPG, SVG, WebP</p>
<input type="file" id="imgInput" accept="image/*" onchange="loadFaviconImage(event)" style="display:none;">
</div>
<div id="uploadedPreview" style="margin-top:0.5rem;text-align:center;display:none;">
<img id="uploadedImg" style="max-width:128px;max-height:128px;border-radius:8px;border:1px solid var(--border);">
<p class="text-muted" style="font-size:0.75rem;" id="uploadInfo"></p>
</div>
</div>
<div id="emojiForm" class="mt-2 hidden">
<label>Pick an Emoji</label>
<input type="text" id="emojiInput" value="⚡" style="font-size: 2rem; text-align: center; height: 60px;" oninput="generateFavicon()">
<div style="display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;">
<span class="emoji-btn" onclick="setEmoji('⚡')">⚡</span><span class="emoji-btn" onclick="setEmoji('🚀')">🚀</span><span class="emoji-btn" onclick="setEmoji('🔥')">🔥</span><span class="emoji-btn" onclick="setEmoji('💎')">💎</span><span class="emoji-btn" onclick="setEmoji('🎯')">🎯</span><span class="emoji-btn" onclick="setEmoji('🌟')">🌟</span><span class="emoji-btn" onclick="setEmoji('🎨')">🎨</span><span class="emoji-btn" onclick="setEmoji('📱')">📱</span><span class="emoji-btn" onclick="setEmoji('🔒')">🔒</span><span class="emoji-btn" onclick="setEmoji('💡')">💡</span><span class="emoji-btn" onclick="setEmoji('🎵')">🎵</span><span class="emoji-btn" onclick="setEmoji('☕')">☕</span><span class="emoji-btn" onclick="setEmoji('🌍')">🌍</span><span class="emoji-btn" onclick="setEmoji('🏠')">🏠</span><span class="emoji-btn" onclick="setEmoji('💼')">💼</span><span class="emoji-btn" onclick="setEmoji('🛠️')">🛠️</span>
</div>
</div>
<div id="textForm" class="mt-2 hidden">
<label>Text (1-2 characters)</label>
<input type="text" id="textInput" value="QT" maxlength="3" style="font-size: 1.5rem; text-align: center;" oninput="generateFavicon()">
<label class="mt-1">Font</label>
<select id="fontSelect" onchange="generateFavicon()">
<option value="Inter" selected>Inter</option>
<option value="Georgia">Georgia (Serif)</option>
<option value="Courier New">Courier (Mono)</option>
<option value="Arial Black">Arial Black</option>
</select>
</div>
<div class="controls-row mt-2">
<div class="control-group"><label>Background</label><input type="color" id="bgColor" value="#6366f1" onchange="generateFavicon()" style="width: 50px; height: 36px; border: none; cursor: pointer;"></div>
<div class="control-group"><label>Text Color</label><input type="color" id="fgColor" value="#ffffff" onchange="generateFavicon()" style="width: 50px; height: 36px; border: none; cursor: pointer;"></div>
<div class="control-group"><label>Border Radius</label><select id="borderRadius" onchange="generateFavicon()"><option value="0">None</option><option value="20" selected>Rounded</option><option value="50">Circle</option></select></div>
</div>
</div>
<div style="flex-shrink: 0; text-align: center;">
<p class="text-muted mb-1" style="font-size: 0.75rem;">Preview</p>
<div style="display: flex; gap: 1rem; align-items: end; justify-content: center; flex-wrap: wrap;">
<div><canvas id="canvas64" width="64" height="64" style="border: 1px solid var(--border); border-radius: 4px;"></canvas><p class="text-muted" style="font-size: 0.7rem;">64×64</p></div>
<div><canvas id="canvas32" width="32" height="32" style="border: 1px solid var(--border); border-radius: 4px;"></canvas><p class="text-muted" style="font-size: 0.7rem;">32×32</p></div>
<div><canvas id="canvas16" width="16" height="16" style="border: 1px solid var(--border); border-radius: 4px;"></canvas><p class="text-muted" style="font-size: 0.7rem;">16×16</p></div>
</div>
<canvas id="canvas192" width="192" height="192" style="display: none;"></canvas>
<div class="btn-group mt-3" style="justify-content: center;">
<button class="btn btn-primary" onclick="download(64)">⬇ 64px</button>
<button class="btn btn-secondary" onclick="download(32)">⬇ 32px</button>
<button class="btn btn-secondary" onclick="download(192)">⬇ 192px</button>
</div>
<div class="output-area mt-2">
<span class="output-label">HTML</span>
<pre id="htmlCode" style="font-size: 0.75rem;"></pre>
<button class="copy-btn" onclick="copyCode()">Copy</button>
</div>
</div>
</div>
</div>
<style>
.emoji-btn { font-size: 1.5rem; cursor: pointer; padding: 0.3rem; border-radius: 6px; transition: var(--transition); }
.emoji-btn:hover { background: var(--bg-card-hover); transform: scale(1.2); }
</style>
<div class="ad-zone">Ad Space — 336×280</div>
<div class="faq-section">
<h2> <div class="tool-card" style="max-width:720px;">
<h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Favicon Generator</h2>
<p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Favicon Generator is a free, browser-based tool built for developers, content creators, and marketers. Generate favicons from text, emoji, or uploaded images. Download as ICO, PNG, and SVG. Free online favicon generator for websites. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
<h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
<ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
<li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
<li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
<li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
<li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
</ol>
</div>
Frequently Asked Questions</h2>
<div class="faq-item"><h3>What is a favicon?</h3><p>A favicon is the small icon displayed in browser tabs, bookmarks, and history. It's usually 16×16 or 32×32 pixels and helps users identify your website visually.</p></div>
<div class="faq-item"><h3>What sizes do I need?</h3><p>For modern browsers, 32×32 is standard for browser tabs. 192×192 is used for Android home screen icons. Apple devices use 180×180. This tool generates all common sizes.</p></div>
</div>
<div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
<a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a>
<a href="qr-generator.html"><span class="tool-icon">📱</span> QR Generator</a>
<a href="password-generator.html"><span class="tool-icon">🔐</span> Password Generator</a>
<a href="markdown-preview.html"><span class="tool-icon">📝</span> Markdown Preview</a>
</div></div>
<div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
<footer class="site-footer"><p>© 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
</div>
<script>
function setEmoji(e) { document.getElementById('emojiInput').value = e; generateFavicon(); }
let uploadedImage = null;
function loadFaviconImage(e) {
const file = e.target.files[0]; if(!file) return;
uploadedImage = new Image();
uploadedImage.onload = () => {
document.getElementById('uploadedPreview').style.display = 'block';
document.getElementById('uploadedImg').src = uploadedImage.src;
document.getElementById('uploadInfo').textContent = `${uploadedImage.width}×${uploadedImage.height} · ${(file.size/1024).toFixed(1)}KB`;
generateFavicon();
};
uploadedImage.src = URL.createObjectURL(file);
}
function updateForm() {
const type = document.getElementById('faviconType').value;
document.getElementById('imageForm').classList.toggle('hidden', type !== 'image');
document.getElementById('emojiForm').classList.toggle('hidden', type !== 'emoji');
document.getElementById('textForm').classList.toggle('hidden', type !== 'text');
generateFavicon();
}
function drawFavicon(canvas) {
const ctx = canvas.getContext('2d');
const s = canvas.width;
const bg = document.getElementById('bgColor').value;
const fg = document.getElementById('fgColor').value;
const radius = parseInt(document.getElementById('borderRadius').value) / 100 * s;
const type = document.getElementById('faviconType').value;
ctx.clearRect(0, 0, s, s);
// Rounded rect background
ctx.beginPath();
ctx.roundRect(0, 0, s, s, radius);
ctx.fillStyle = bg;
ctx.fill();
if (type === 'image' && uploadedImage) {
// Crop-to-square and draw with high quality
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
const iw = uploadedImage.width, ih = uploadedImage.height;
const cropSize = Math.min(iw, ih);
const sx = (iw - cropSize) / 2, sy = (ih - cropSize) / 2;
// Apply clipping for rounded corners
ctx.save();
ctx.beginPath();
ctx.roundRect(0, 0, s, s, radius);
ctx.clip();
ctx.drawImage(uploadedImage, sx, sy, cropSize, cropSize, 0, 0, s, s);
ctx.restore();
return; // skip background for image mode
} else if (type === 'emoji') {
const emoji = document.getElementById('emojiInput').value || '⚡';
ctx.font = `${s * 0.65}px serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(emoji, s/2, s/2 + s*0.03);
} else {
const text = document.getElementById('textInput').value || 'QT';
const font = document.getElementById('fontSelect').value;
const fontSize = text.length === 1 ? s * 0.7 : s * 0.45;
ctx.font = `bold ${fontSize}px ${font}`;
ctx.fillStyle = fg;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, s/2, s/2 + s*0.03);
}
}
function generateFavicon() {
[16, 32, 64, 192].forEach(size => {
const canvas = document.getElementById('canvas' + size);
if (canvas) drawFavicon(canvas);
});
document.getElementById('htmlCode').textContent = '<link rel="icon" type="image/png" href="/favicon.png">\n<link rel="apple-touch-icon" href="/apple-touch-icon.png">';
}
function download(size) {
const canvas = document.getElementById('canvas' + size) || document.getElementById('canvas64');
const tempCanvas = document.createElement('canvas');
tempCanvas.width = size; tempCanvas.height = size;
drawFavicon(tempCanvas);
const a = document.createElement('a');
a.download = `favicon-${size}x${size}.png`;
a.href = tempCanvas.toDataURL('image/png');
a.click();
}
function copyCode() {
navigator.clipboard.writeText(document.getElementById('htmlCode').textContent).then(()=>{
const b=document.querySelector('#htmlCode+.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000);
});
}
generateFavicon();
</script>
<script src="ads.js"></script>
</body>
</html>