特にこだわらない場合は favicon.ico というファイルを ico 形式の画像を作ってリンクすればいいだけですが、iPhoneなど様々な機種に対応させたい場合は個別に画像を用意してその全てにリンクなど HTML タグを追加しなければいけません。
そこで紹介するのが「Favicon Generator」です。
このサイトは画像を送信するだけで、様々なサイズのファビコンを作成してくれるというとても便利なサイトです。
また、必要なＨＴＭＬタグも表示してくれるので、それらをコピーするだけで設定も完了します。
では、作り方をひとつひとつ見ていきましょう。
１．画像のアップロード
画像の赤枠にあるボタンをクリックしてファビコンにしたい画像を選択します。
※注： 最低でも 70 x 70 px 以上の画像を選んでください。推奨は260 x 260 px 以上です。
２．ファビコンの設定をする
ここから iPhone など各機種向けの設定をします。
注意が必要なのは iOS です。
iOS のアイコンは透過画像に対応していません。
そのため、もしファビコンに png などの透過画像が利用されている場合、背景が真っ黒になってしまします。
これを防ぐためには以下の赤枠のラジオボタンにチェックを入れ、その下の色の設定を変更する必要があります。
その他 chrome や windows の設定ができますが、同じように設定を変更すると自動でサンプル画像が変更しますのでお好みの設定に変更してみましょう。
なお、もしファビコンをルートフォルダに設置したくない場合は、最後の項目で調整ができます。（ルートでいい場合はに特に設定する場合は必要ありません。）
３．ファビコンの作成
さぁ、それではファビコンを作成しましょう。
一番下にある以下のボタンをクリックすることで実行できます。
４．ファビコンのダウンロードと設置
まず「Download your package.」の横にある「Favicon package」ボタンをクリックするとダウンロードが始まりますので適当な場所に保存してください。
そして、保存した zip ファイルの中にあるファイル全てをサイトのルートフォルダへ展開します。
（つまり、http://example.com/favicon.ico にアクセスできるようになればＯＫです）
次に２個めの赤枠内の HTML コードを <head>〜</head>内に書き込みましょう。
これで設定は完了です。
５．テスト
もしきちんと設置されたかをテストしたい場合はチェックコンテンツも提供されていますので使ってみることをおすすめします。
なお、元になるファビコン画像を作りたいときは font-awesome で画像が作成できる fa2pngが便利です。
今回は以上です。
おつかれさまでした。
0 件のコメント:
コメントを投稿