ファビコンの作成は大きく作ってツールでまとめて一括変換すればいいって本当？
元ファイルはイラレで作って変換はx-iconのサイトがおすすめって本当？
2019年からファビコンがスマホで検索結果に出るようになったから大事って本当？
こんな疑問に答えます。
僕は自作のiPhoneアプリを２つリリースしています。
そんな僕が解説していきます。
※記事内にプロモーションを含む場合があります
ファビコンの作成を解説【大きく作ってからツールで一括変換】
シンプルなアルファベット１文字のデザインを例として作っていきます。
ファビコンの元ファイルをイラレで作成する
まずは元のデザインをイラストレーターなどのベクター系ソフトで作るのがおすすめです。
フォトショップと違いサイズによって細部が乱れることはありません。
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を購入する
というわけで今回は以上です。
細部のデザインで信頼感が変わってくるから不思議ですね。