ロゴがまだないときのロゴ作成
始まったばかりのプロジェクトには、まだビジュアルアイデンティティがないことがほとんどです。それでも公開時にはファビコンが必要です。ロゴ作成ツールは、すでにある「名前」から始めます。1〜2文字とGoogle Fontsのフォント、背景色を選ぶだけで、16ピクセルでも512ピクセルでも読み取れるモノグラムが作れます。
ロゴ・ファビコン作成ツール
テキストから無料でロゴを作成。パレット、Google Fonts、グラデーション、縁取りを設定して、SVGをダウンロードするか、そのままファビコンを生成できます。
パレットから始める
パレットをクリックして色を設定します。後から自由に調整できます。
プレビュー
モノグラムが効果的な理由
タブの大きさでは、細かいロゴはつぶれてしまいます。頭文字なら判別しやすいため、多くのブランドが1文字をアプリアイコンに使っています。文字数は3文字以内、フォントは太めにして、文字と背景のコントラストを十分に確保してください。
文字をアウトライン化したシンプルなSVG
ロゴは文字をベクターの輪郭線に変換したSVGとして書き出します。ファビコンとして読み込む際、ブラウザは外部リソースを取得しないため、外部フォントを参照するSVGでは文字が正しく表示されません。生成されるファイルは単体で完結し、軽量で、パッケージ内のどのサイズにも画質を落とさず拡縮できます。
ロゴからファビコン一式へ
ロゴができたら生成ボタンを押すと、透明度と色を保ったままファビコン生成ツールに送られます。iOSアイコンの背景、ダーク用アイコン、アプリ名を設定して、パッケージ一式をダウンロードできます。画像がサーバーを経由することはありません。
ロゴ作成についてよくある質問
次に読むガイド・試すツール
LFFaviconのその他のツールと、よくある疑問に答えるガイドをご紹介します。
ツール
ガイド
- ファビコンのサイズ：形式と用途ICO、SVG、iOS、Android、検索結果に必要なファビコンのサイズを、実用的な一覧表で解説します。
- PNGをICOに無料変換PNGを複数サイズのfavicon.icoに無料変換。すべてブラウザ内で処理し、画像をサーバーへアップロードしません。
- apple-touch-icon：サイズ・形式・コードApple Touchアイコンの180×180サイズ、透明度の注意点、貼り付けるタグ、iOSで黒くなる原因を解説します。
- SVGでファビコンをダークモードに対応ダークテーマのタブで黒いロゴが消える問題を解決。SVGとprefers-color-schemeで明るいアイコンに自動切り替えします。
- HTMLにファビコンを追加正しいlink要素、ICOの代替、Apple Touchアイコン、WebアプリマニフェストでHTMLサイトにファビコンを設定します。
- ファビコンが表示・更新されないときファビコンがない、古いまま更新されない場合に、URL、形式、HTML、キャッシュ、クロール可否、検索結果の条件を確認します。
- Next.js App Routerのファビコンicon・apple-icon規約、メタデータ、マニフェストを使ったNext.js App Routerのファビコン設定と確認方法を解説します。
- SVGファビコンガイド単体で完結する読みやすい正方形のSVGファビコンを作成し、HTMLへの指定、ICOの代替、明暗テーマでの確認まで解説します。