ファビコンとアップルタッチアイコンをまとめて生成してくれるWEBサービス「iconifier.net」

ファビコンとアップルタッチアイコンをまとめて生成してくれるWEBサービス「iconifier.net」

ファビコンとアップルタッチアイコンをまとめて生成してくれるWEBサービス「iconifier.net」

iconifier.netは、1枚の画像からファビコンやアップルタッチアイコン用の画像を、まとめて生成してくれるWEBサービスです。

アップルタッチアイコンというのは、iPhoneやiPad用のアイコン画像で、ホーム画面に追加した時に使用されます。アップルタッチアイコンを指定していないと、WEBサイトのキャプチャがアイコンとして表示されます。

ちゃんとアップルタッチアイコンを指定しておくことで、サイトのロゴなどをアイコンとして表示することができます。ただ、いざアップルタッチアイコンを設定しようと思うと、色んなサイズの画像を用意する必要があり結構面倒です。

iconifier.netを使えば、必要なサイズを一気に生成してくれるので、手間いらずで設定することができます。

iconifier.netの使い方

1. iconifier.netにアクセスします。
2. [ファイルを選択]から画像をアップロードします。
※最大サイズが152px*152pxなので、それよりも大きい画像を用意した方がいいです。

画像の選択

3. [Iconify]をクリックします。

[Iconify]をクリック

4. 画像が生成されるので、ZIPファイルをダウンロードします。

画像の生成

ファビコンとアップルタッチアイコンの設定

まずダウンロードしたZIPファイルを解凍し、画像をサーバーにアップロードします。

続いて、HTMLの<head>内に、以下を追加します。


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

これで設定は完了です。

なお、ダウンロードしたZIPファイルを解凍すると、画像の他にiconifier-readme.txtというテキストファイルが入っています。iconifier-readme.txtでは、ファビコンとアップルタッチアイコンの設定方法が解説されています。

あとがき

ファビコンだけ作成するのであればFavicon Converterがシンプルで使いやすいと思いますが、アップルタッチアイコンまできっちり設定したいという場合はiconifier.netが楽ですね。

何も設定していない場合は、ファビコンだけでも設定しておきましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です