Faviconの最適なサイズは？

まずは結論

ショートアンサー：

推奨されるFaviconサイズは 16×16, 32×32, および48×48（ブラウザ用）、180×180（Appleデバイス用）、192×192と512×512（Android・PWAアプリ用）です。

ブラウザ用Faviconサイズ

デスクトップおよびモバイルブラウザでは、複数サイズのPNGアイコンと、複数サイズを内包したICOファイルを用意しておくと高い互換性が期待できます。

Apple Touchアイコンのサイズ

Appleデバイスでサイトをホーム画面に追加した際には、より大きなアイコンサイズが使われます。

Android・PWA向けアイコンサイズ

Progressive Web AppやAndroid Chromeのインストールフローでは、アイコンサイズに関する明確な要件があります。

これらのサイズは、PWAとしてインストール可能かどうかを判断するチェックにおいて必須となります。

SVG Faviconのサイズについて

SVG faviconはベクター形式のため、特定のピクセルサイズを固定する必要はありません。

おすすめの設定：

• 正方形のviewBoxを使用する（例：0 0 100 100）
• 図形を中心に配置する
• 細かすぎるディテールは避ける

SVG Faviconは高DPIディスプレイや拡大表示でも美しくスケーリングされます。

どのFavicon形式を使うべきか？

Best practice: Use PNG + ICO + SVG together.

Recommended HTML Markup

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Common Favicon Mistakes

• Using only one favicon size
• Forgetting Apple Touch Icons
• Missing PWA icons
• Using low-resolution source images

Generate All Favicon Sizes Automatically

Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.

Internal Links

• Favicon Generator (Home)
• SVG Favicon Generator
• PWA Icon Generator
• Favicon Checker
• Favicon Fetcher
• Emoji to Favicon
• Text to Favicon
• What is favicon.ico?

よくある質問