Stax
Tools

ファビコン生成

.icoとマニフェストファイルを一気に生成。

60%

Favicon Generator — 必要なすべてのfaviconサイズをワンクリックで無料作成

faviconはブラウザのタブ、ブックマーク、モバイルホーム画面のショートカットに表示される小さなアイコンです。正しく設定するには、16×16のブラウザタブアイコンから512×512のPWAスプラッシュスクリーン画像まで、同じ画像を8種類の異なるサイズで生成する必要があります。このツールは単一のソース（テキスト、文字、またはアップロードされたロゴ）から8つのサイズすべてを作成し、すぐにサイトに追加するためのHTMLスニペットを提供します。

テキストモードを選択して1〜2文字からfaviconを作成します（StaxのS、GoogleのGなどのブランドイニシャルに最適です）。背景色、テキスト色、角の形（正方形、角丸、円）を選択します。またはアップロードモードに切り替えて既存のロゴファイルをアップロードします。最良の結果を得るには、16ピクセルで判読可能な高コントラストの正方形画像を使用してください。「生成」をクリックして各サイズのPNGファイルを個別にダウンロードするか、HTMLスニペットのコピーアイコンを使用してサイトの<head>セクションに必要なすべての<link>タグを取得します。

最小セットは：16×16（低DPI画面のブラウザタブ）、32×32（高DPIとWindowsタスクバーのブラウザタブ）、180×180（iOSホーム画面とiPad用Apple Touch Icon）、192×192（Android Chromeホーム画面ショートカット）、512×512（Progressive Web Appスプラッシュスクリーンとマスカブルアイコン）です。48×48と64×64サイズはデスクトップアプリケーションと旧ブラウザに対応します。完全なセットを提供することで、ユーザーがサイトをブックマークする可能性のあるすべてのデバイスとOSでブランドアイコンが鮮明に表示されます。

個人開発者やフリーランサーは、Figmaを開き、エクスポートし、画像エディタでリサイズし、8サイズ分繰り返すのではなく、2分で完全なfaviconセットを生成するためにクライアントのWebサイトを立ち上げる際に使います。スタートアップの創業者は、プロフェッショナルに見えるタブアイコンが信頼性に重要な初期MVPのために使います。

すべてのfavicon生成はHTML Canvas APIを使ってブラウザ内で完結します。アップロードされたロゴと生成された画像はデバイスから外に出ることなく、サーバーに送信されることも一切ありません。

よくある質問

What favicon sizes do I need?
The minimum set is: 16×16 (browser tab), 32×32 (high-DPI tab), 180×180 (Apple Touch Icon for iOS), 192×192 (Android Chrome), and 512×512 (PWA splash screen). This generator produces all 8 common sizes including 48×48 and 128×128.
How do I add a favicon to my website?
Download the favicon PNGs and upload them to your website's root or /public folder. Then add the HTML link tags shown in the snippet below the generated icons to your <head>. The 32×32 PNG covers most browsers; add the Apple Touch and 192×192 for mobile.
Can I use my own logo as a favicon?
Yes. Switch to 'Upload image' mode and upload your logo file. For best results use a square image (1:1 aspect ratio) with high contrast that is legible at 16×16 pixels. The generator scales your image to all required sizes.
What shape options are available?
Square (sharp corners), Rounded (20% border-radius, iOS-style), and Circle. All shapes are rendered on canvas so the background colour fills only within the chosen shape, with a transparent outer area.
Do I still need a .ico file?
Modern browsers support PNG favicons directly with the <link rel='icon' type='image/png'> tag. .ico files are only required for very old browsers (Internet Explorer < 11) and some desktop applications. For most websites, PNG favicons are sufficient.

関連ツール