https://wwa.lanzouu.com/b011ld8iva 密码:2025
完整的代码在蓝奏云里面 想自己搭建运营的可以看看，版权自己修改、ICP备案、公安备案已经注释掉了 使用国内的服务器需要完成ICP备案 香港服务器就不需要 看个人。长期运营就选择国内的服务器，所有代码没有任何病毒 可以直接在电脑本地测试 或者在服务器里面部署访问就可以使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="在线工具,在线生成ICO图标,制作ico图标,在线ico图标转换工具" />
<meta name="description" content="在线制作ico图标,可以将jpg、jpeg、gif、png等图像转换成ico图像,方便浏览器制作并生成favicon.ico图标" />
<title>在线生成ICO图标_制作ico图标_在线ico图标转换工具</title>
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform">
<script src="../index/index/index.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#007BFF',
secondary: '#0056b3',
accent: '#34D399',
neutral: '#F9FAFB',
dark: '#1F2937',
'icon-bg': '#F0F9FF',
},
fontFamily: {
inter: ['Inter','system-ui','sans-serif'],
},
boxShadow: {
'soft': '0 4px 20px rgba(0, 0, 0, 0.08)',
'hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
'result': '0 2px 12px rgba(0, 0, 0, 0.04)',
},
borderRadius: {
'lg-rounded': '1.25rem',
},
scale: {
'radio-sm': '0.8',
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.bg-gradient-blue {
background: linear-gradient(135deg, #007BFF 0%, #0056b3 100%);
}
.transition-custom {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-hover {
transition: transform 0.2s ease;
}
.scale-hover:hover {
transform: scale(1.02);
}
.text-shadow {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex flex-col items-center font-inter text-dark">
<div id="app" class="w-full max-w-md mx-auto flex-grow flex flex-col justify-center">
<div class="bg-white rounded-2xl shadow-soft overflow-hidden transition-custom scale-hover">
<div class="bg-gradient-blue text-white p-4">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-shadow text-center">在线生成ICO图标</h2>
</div>
<div class="p-4 space-y-6">
<form id="ico-generator-form" class="space-y-6">
<div class="flex flex-col space-y-3">
<label for="image" class="block text-sm font-medium text-gray-700 mb-1">
选择图片文件
</label>
<div id="file-drop-area" class="border-2 border-dashed border-gray-200 rounded-lg p-4 flex items-center justify-center cursor-pointer transition-custom hover:border-primary hover:bg-icon-bg relative">
<input type="file" id="image" name="image" accept="*" required class="hidden">
<div class="space-y-1 text-center" id="upload-instructions">
<h3 class="font-medium text-gray-700 text-base">拖放图片或点击上传</h3>
<p class="text-xs text-gray-500">支持格式 png，jpg，gif</p>
</div>
<div class="text-center text-gray-600 mt-2 hidden" id="file-name">
选择的文件：<span id="filename-text"></span>
</div>
</div>
</div>
<div class="flex flex-col space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">
目标尺寸
</label>
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-1">
<input type="radio" id="size16" name="size" value="16x16" class="form-radio text-primary border-gray-300 focus:ring-primary" checked>
<label for="size16" class="text-sm font-medium text-gray-700">16*16</label>
</div>
<div class="flex items-center space-x-1">
<input type="radio" id="size20" name="size" value="20x20" class="form-radio text-primary border-gray-300 focus:ring-primary">
<label for="size20" class="text-sm font-medium text-gray-700">20*20</label>
</div>
<div class="flex items-center space-x-1">
<input type="radio" id="size32" name="size" value="32x32" class="form-radio text-primary border-gray-300 focus:ring-primary">
<label for="size32" class="text-sm font-medium text-gray-700">32*32</label>
</div>
<div class="flex items-center space-x-1">
<input type="radio" id="size48" name="size" value="48x48" class="form-radio text-primary border-gray-300 focus:ring-primary">
<label for="size48" class="text-sm font-medium text-gray-700">48*48</label>
</div>
<div class="flex items-center space-x-1">
<input type="radio" id="custom-size" name="size" value="custom" class="form-radio text-primary border-gray-300 focus:ring-primary">
<label for="custom-size" class="text-sm font-medium text-gray-700 flex items-center">
<input
type="text"
id="custom-size-input"
min="1"
max="512"
placeholder="20×22 小 x"
class="ml-1 text-xs border border-gray-300 rounded px-1 py-0.5 focus:outline-none focus:ring-primary"
disabled
style="width: 7em;">
</label>
</div>
</div>
</div>
<a href="javascript:;" class="w-full bg-gradient-blue text-white font-medium py-3 px-6 rounded-lg shadow-lg transition-custom hover:shadow-hover active:scale-98 flex items-center justify-center space-x-3" id="generateButton">
<span class="text-base">生 成</span>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</form>
</div>
</div>
<div id="result-area" class="mt-8 hidden">
<div class="bg-white rounded-lg shadow-result p-6 flex items-center space-x-6">
<div class="w-20 h-20 bg-icon-bg rounded-lg flex items-center justify-center">
<img id="result-image" src="" alt="生成的ICO" class="max-w-full max-h-full">
</div>
<div class="flex-1">
<p class="text-gray-600 mb-4">您的ICO图标生成完成，下载即可使用。</p>
<a id="download-link" href="#" download="favicon.ico" class="inline-flex items-center px-5 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-secondary transition-custom">
<span>下载</span>
</a>
</div>
</div>
</div>
</div>
<footer class="w-full text-center text-neutral-500 text-xs fixed bottom-0">
<!-- <p style="margin-bottom: 4px;">© 2025 XXX 版权所有</p> -->
<div class="text-xs text-gray-500 mb-4">
<div class="flex flex-row items-center justify-center">
<!-- <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="text-gray-500 hover:text-primary transition-colors">浙ICP备0000000000号-1</a>
<img src="data:image/png;base64,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" alt="" width="13" height="13" class="img">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000" target="_blank" class="text-gray-500 hover:text-primary transition-colors">浙公网安备 00000000000000号</a> -->
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
const fileInput = document.getElementById('image');
const uploadInstructions = document.getElementById('upload-instructions');
const fileNameDisplay = document.getElementById('file-name');
const customSizeRadio = document.getElementById('custom-size');
const customSizeInput = document.getElementById('custom-size-input');
customSizeInput.disabled = true;
document.querySelectorAll('input[name="size"]').forEach(radio => {
radio.addEventListener('change', () => {
customSizeInput.disabled = radio.id !== 'custom-size';
if (!customSizeInput.disabled) customSizeInput.focus();
});
});
document.getElementById('file-drop-area').addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
fileNameDisplay.classList.remove('hidden');
uploadInstructions.classList.add('hidden');
fileNameDisplay.textContent = `选择的文件：${file.name}`;
} else {
fileNameDisplay.classList.add('hidden');
uploadInstructions.classList.remove('hidden');
}
});
document.getElementById('generateButton').addEventListener('click', (e) => {
e.preventDefault();
const file = fileInput.files[0];
if (!file) return alert('请先上传图片');
let width, height;
const selectedRadio = document.querySelector('input[name="size"]:checked');
const selectedValue = selectedRadio.value;
if (selectedValue !== 'custom') {
const [w, h] = selectedValue.split('x').map(Number);
width = w || 1;
height = h || 1;
}
else {
const inputValue = customSizeInput.value.trim();
if (!inputValue) return alert('请输入自定义尺寸');
const [w, h] = inputValue.replace('×', 'x').split('x').map(Number);
width = w || 1;
height = h || width;
if (width < 1 || width > 512 || height < 1 || height > 512) {
return alert('尺寸范围应为1-512像素');
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
const imgRatio = img.width / img.height;
const canvasRatio = width / height;
let srcX = 0, srcY = 0, srcW = img.width, srcH = img.height;
if (imgRatio > canvasRatio) {
srcW = img.height * canvasRatio;
srcX = (img.width - srcW) / 2;
} else {
srcH = img.width / canvasRatio;
srcY = (img.height - srcH) / 2;
}
ctx.clearRect(0, 0, width, height);
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, width, height);
const icoData = canvas.toDataURL('image/x-icon');
document.getElementById('result-image').src = icoData;
document.getElementById('download-link').href = icoData;
document.getElementById('result-area').classList.remove('hidden');
};
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
