ファビコンの作成を解説【大きく作ってツールでまとめて一括変換】

ファビコンの作成は大きく作ってツールでまとめて一括変換すればいいって本当?
元ファイルはイラレで作って変換はx-iconのサイトがおすすめって本当?
2019年からファビコンがスマホで検索結果に出るようになったから大事って本当?
こんな疑問に答えます。

僕は自作のiPhoneアプリを2つリリースしています。
そんな僕が解説していきます。

※記事内にプロモーションを含む場合があります

ファビコンの作成を解説【大きく作ってからツールで一括変換】

シンプルなアルファベット1文字のデザインを例として作っていきます。

ファビコンの元ファイルをイラレで作成する

まずは元のデザインをイラストレーターなどのベクター系ソフトで作るのがおすすめです。
フォトショップと違いサイズによって細部が乱れることはありません。

1000px四方程度のファイルを新規で作ります。
フォントはAppleの標準フォントSF Pro DisplayのSemiboldの850ptを使いました。
数値をいじって真ん中にピッタリ合わせます。
色はサイトのキーカラーにしました。

1000px四方のPNG形式で出力しておく

イラレで1000px四方のPNG形式(8bit)で出力しておきます。
透明なデザインがある場合はPNGなので透過されます。

256px四方・512px四方のPNGも書き出しておく

apple-touch-iconやサイトアイコンに使えるので一気に作っちゃいましょう。

ファビコンの無料ツールでicoファイルを作成する

便利なwebツールx-iconを使用します。
» http://www.xiconeditor.com

importを押します。

アップロードを押して、先ほどの1000px四方のPNGをアップロードします。
作成するアイコンのサイズにチェックを入れます。
全部入れておけばいいと思います。
OKを押します。

エクスポートを押せばicoファイルがゲットできます。

ファビコンの作成をもっと徹底的にやる方法【他のアイコンも一気にまとめて登録】

ファビコンをWordPressでブログに設定していく

おすすめのサイズ・ファイル形式 AFFINGER5での設定場所 用途
ファビコン 16px四方・32px四方
を含むicoファイル
AFFINGER5管理>アイコン・ファビコン等>ファビコン画像 ブラウザのタイトル部分など
apple-touch-icon 256px四方
PNGファイル
AFFINGER5管理>アイコン・ファビコン等>ファビコン画像 iPhoneのホーム画面
サイトアイコン 512px四方
PNGファイル
外観>カスタマイズ>サイト基本情報>サイトアイコン ブラウザのお気に入りなど

ファビコンなど各種アイコンのおすすめサイズと設定場所をまとめました。

AFFINGER5を使用していれば設定画面でアップロードするだけ

AFFINGER5なら上記の管理画面でここで先ほどの該当ファイルをアップロードするだけです。
簡単ですね。

それ以外の場合

それ以外でテーマでもアップロードする機能が備わっていることが多いと思います。
そういう機能がない場合は自分で該当箇所にアップしたURLを書く必要があります。

ファビコンのデザインは丸型や企業ロゴも多いです

丸型のデザイン

縁を透明にしている丸型はわりとよく見かけます。
中身の位置バランスが綺麗に合っていないと不自然に見えがちなので注意です。

企業ロゴのまま

企業ロゴも多く見かけます。
16pxでもうまく表現できるデザインなら映えると思います。

ファビコンはGoogleのiPhoneの検索結果画面に出るようになったので大事です

2019年の春頃からファビコンが表示され目立つようになりました。
ユーザーはパッと見でファビコンも見ていると思います。
デフォルトの地球マークのままだとアピールが弱いと思うので何かしら設定した方がいいと思います。

AFFINGER5ならファビコンも簡単に設定できるのでおすすめです。
詳しくはこちらから。
» AFFINGERを購入する

というわけで今回は以上です。
細部のデザインで信頼感が変わってくるから不思議ですね。

関連記事AFFINGERでフォントサイズを変更する方法【本文見出し参照リンク】

関連記事WordPress有料テーマのAFFINGER4(アフィンガー)を僕が選んだ理由10

-WordPress