Webサイトを作るたびに、faviconをサイズ違いで何枚も用意するのは意外と手間がかかりますよね。ブラウザのタブ用、スマートフォンのホーム画面用と、必要なファイルが複数あるのも分かりにくいところです。
faviconは小さなアイコンですが、タブやブックマークの中でサイトを見分ける目印になります。とはいえ、サイズごとに画像を書き出して形式を変換するのは手間がかかるものです。そこで役立つのが、画像1枚から必要なファイル一式をまとめて作れるfavicon生成ツールです。
このたびこのfavicon生成ツールをコーポレートサイト内で新たに公開しましたので、今回はfavicon生成ツールの特徴と使い方についてお伝えします。
画像1枚から3種類のファイルをまとめて生成
faviconは、PCやスマートフォン、Windows・Mac・Androidといった端末や、ブラウザ・ホーム画面などの表示箇所ごとに、さまざまなサイズが使われてきました。しかし現在は、次の3つのファイルがあれば対応できます。
- icon.svg：複数のサイズに対応できるアイコン（SVG画像を選んだ場合のみ、元の画像をそのまま出力）
- apple-touch-icon.png：iPhone・iPadのホーム画面用アイコン（180×180px）
- favicon.ico：古い環境でも表示できるようにするための後方互換用（16・32・48pxの3サイズを1つにまとめたファイル）
favicon生成ツールは、PNG・JPG・SVG形式の画像（推奨は512×512px以上の正方形）を選ぶだけで、これらのファイルをすぐに生成します。
正方形でない画像は中央を正方形に切り抜いて使うため、手元の画像をそのまま選べます。また、画像の処理はすべてブラウザ内で行い、サーバーへは送信しません。会員登録やログインは不要で、無料で利用できます。
背景色を指定して仕上がりを整えられる
favicon生成ツールでは、apple-touch-icon.pngの背景色を色見本またはカラーコード（例：#0f3a66）で指定できます。初期値は白（#ffffff）です。
透過画像から作る場合は、周囲に20pxの余白を設けたうえで、指定した背景色で塗りつぶします。生成したファイルはそれぞれプレビューで確認でき、必要なものだけを個別にダウンロードできます。
使い方は選んで保存して貼り付けるだけ
favicon生成ツールの使い方はシンプルです。「画像ファイルを選択またはドロップ」の欄をクリックして画像を選ぶか、画像をドラッグ＆ドロップします。必要に応じて背景色を指定し、プレビューを確認したら「ダウンロード」ボタンで保存します。
保存したファイルはサイトの公開ディレクトリ直下に置き、「HTML記述例」からコピーした次のコードを、各ページの<head>内に貼り付けます。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">SVG画像を使わない場合は、icon.svgの行は不要です。別の画像で作り直したいときは、「リセット」ボタンで初期状態に戻せます。
まとめ
さて今回は、favicon生成ツールの特徴と使い方についてお伝えしました。
favicon生成ツールは、画像1枚からfavicon.ico・apple-touch-icon.png・icon.svgをまとめて作れるツールです。背景色の指定やHTML記述例のコピーにも対応しており、作成から設置までをひと続きで進められます。画像はブラウザ内だけで処理され、サーバーへ送信されることもありません。
サイズ違いのアイコンを一つずつ用意する手間を減らせるので、サイトの立ち上げやリニューアルの際にも役立ちます。作り直したいときも、リセットしてすぐにやり直せます。
faviconを用意するときは、ぜひfavicon生成ツールを使ってみてください。