ナレッジハブ・技術ガイド
ファビコン（Favicon）マルチサイズ一括自動生成
ファビコン（Favicon）マルチサイズ一括自動生成
本ツールは100%クライアントサイド（ブラウザ内）で動作します。写真、動画、音声、PDFファイルが外部サーバーにアップロードされることは一切なく、お使いの端末のメモリ内で安全に処理されます。
コアアーキテクチャ & 計算式
Master Image (512x512) ➔ Canvas Scaling ➔ [16x16, 32x32, 192x192, 512x512]
The algorithm takes a high resolution master file and mathematically interpolates it down to the exact dimensions required by Google Android (192px) and Apple iOS (512px).
ベストプラクティスとガイドライン
- Keep It Simple: A 16x16 pixel square is microscopic. Never use text or complex photographic logos for a favicon. Use a highly simplified, high contrast vector monogram or solid icon.
- Use Transparent PNGs: Always upload a master file with a transparent background. This allows the device OS (like iOS or Android) to apply their own native rounding masks (like squircles) gracefully.
- Don't Forget the Manifest: For Android devices to recognize your app icons, you must include a `site.webmanifest` JSON file in your root directory that points to the exact paths of the 192x192 and 512x512 PNGs.
よくある質問 (FAQ)
Do I still need an .ico file?
While historically required by Internet Explorer, modern browsers (Chrome, Safari, Firefox) fully support standard PNG favicons via the `<link rel='icon' type='image/png'>` tag. .ico is mostly obsolete.
Why does my favicon look blurry on Retina displays?
If you only serve a 16x16 icon, a high density Retina screen will stretch it to 32x32. You must always include at least a 32x32 size to ensure crisp rendering on modern monitors.
What is the Apple Touch Icon?
When an iOS user taps 'Add to Home Screen', Safari looks specifically for a `<link rel='apple-touch-icon'>` tag pointing to a high resolution (usually 180x180) icon to use as the app shortcut.