Modern Favicon and PWA Icon Setup 日本語ガイド
日本語の modern favicon and pwa icon setup ガイド: Generate favicon, Apple touch icon, and PWA PNG sizes locally, then wire HTML link tags and manifest icons without uploading your logo.
Shipping a site or PWA still means publishing a small set of icon files browsers and home screens expect. You can generate those PNG sizes locally and copy the HTML / manifest snippets that reference them.
What you typically need
| Asset | Common size | Filename |
|---|---|---|
| Favicon | 16 / 32 / 48 | favicon-16x16.png, etc. |
| Apple touch | 180×180 | apple-touch-icon.png |
| PWA | 192 / 512 | icon-192.png, icon-512.png |
Modern browsers accept PNG favicons via <link rel="icon" type="image/png" …>. A single legacy .ico is optional when PNG links are present.
Local workflow
- Start from a square or high-resolution logo PNG.
- Open Favicon Generator.
- Choose Cover for full-bleed square marks, or Contain for wide logos that need padding.
- Enable a background color only when you want padding filled or transparency flattened.
- Click Generate icons and download the zip (includes
manifest.webmanifest). - Copy the HTML link snippet into
<head>and paste manifesticonsinto your PWA manifest.
Cover vs contain
- Cover crops to a square—good when the mark should fill the icon tile.
- Contain keeps the entire logo visible with padding—good for wordmarks and wide logos.
Not for app store listing graphics
App Store and Google Play screenshots use different presets and checklists. Use App Market Image Resizer for store assets; favicon generator is for website / PWA publishing only.
Related tools
- Responsive Image Generator — multi-width page images and
srcsetsnippets. - Image Cropper — adjust logo framing before icon export.