ファビコン生成
1枚の画像から、favicon.ico(16・32・48pxを内包)とApple Touch Icon・Android用など各サイズのPNG、そして<head>に貼り付けるHTMLタグまでを一括生成します。すべての処理はブラウザ上(Canvas API)で完結し、画像が外部に送信されることはありません。
ファビコン生成について
ファビコンは、ブラウザのタブやブックマーク、スマートフォンのホーム画面に表示される小さなアイコンです。サイトの識別性を高めるだけでなく、検索結果にも表示されるため、Webサイトの第一印象を左右する重要な要素です。近年はタブ用の16・32pxに加え、Appleのホーム画面用(180px)やAndroid用(192・512px)など、用途ごとに複数のサイズを用意するのが一般的になっています。
従来のfavicon.icoは、1つのファイルに複数解像度の画像を内包できるアイコン形式で、ブラウザが表示場所に応じて最適なサイズを選びます。このツールは元画像から必要なサイズを一括生成し、favicon.ico・各PNG・貼り付け用のHTMLタグまでまとめて出力するため、面倒なサイズ調整やタグ記述の手間を省けます。処理はすべてブラウザ内で完結します。
主な使い方
- 1作成したロゴ画像からWebサイト用のファビコン一式を生成する
- 2favicon.icoと各サイズPNG、HTMLタグをまとめて用意する
- 3スマホのホーム画面追加用(Apple Touch Icon)のアイコンを作成する
- 4既存サイトのファビコンを新しいロゴに差し替える
よくある質問
Q. どんな画像を用意すればよいですか?
A. 正方形で、できるだけ大きい(512×512px以上)画像を推奨します。長方形の画像も処理できますが、正方形に縮小されるため縦横比が崩れる場合があります。
Q. 生成したファイルはどこに置けばよいですか?
A. favicon.icoと各PNGをサイトのルート(公開ディレクトリ直下)に置き、生成されたHTMLタグを<head>内に貼り付けてください。
Q. 画像はサーバーにアップロードされますか?
A. いいえ。画像の読み込みからアイコン生成まですべてブラウザ内(Canvas API)で完結し、画像が外部に送信されることはありません。
関連ツール
- 画像リサイズ画像の幅・高さ・倍率を指定してリサイズします。縦横比の維持にも対応し、ブログやSNS、ECサイト用の画像サイズ調整に便利。画像はブラウザ内でのみ処理され、サーバーには送信されません。
- 画像切り抜き画像をドラッグで自由に切り抜きます。1:1・16:9などの比率プリセットに対応し、SNSのアイコンやサムネイル作成に便利。画像はブラウザ内でのみ処理され、サーバーには送信されません。
- 画像形式変換PNG・JPEG・WebPの画像形式を相互に変換します。JPEG・WebPは出力品質を調整でき、Web向けの軽量化やファイル形式の統一に便利。画像はブラウザ内でのみ処理され、サーバーには送信されません。
- JWT エンコード・署名ヘッダー・ペイロード・シークレットキーを入力してJWTトークンを生成します。HS256・HS384・HS512のHMAC署名に対応し、APIのテストや認証の動作確認に便利。ブラウザ内で完結し、鍵は送信されません。
- ハッシュ生成テキストからSHA-1・SHA-256・SHA-384・SHA-512のハッシュ値を生成します。チェックサムの照合や改ざん検知、キャッシュキーの作成などに便利。Web Crypto APIでブラウザ内で計算し、データは送信されません。
- UUID生成UUID v4をワンクリックで生成します。最大20件までの一括生成にも対応し、データベースの主キーやテストデータの作成に便利。暗号学的に安全な乱数(crypto.randomUUID)を使い、ブラウザ内で完結します。