超簡単!Webで出来るファビコン(favicon)の作成方法

自身でWebサイトを運営しているなら、準備したいものの一つに『ファビコン(favicon)』があります。(以下、favicon)

faviconとは、いわゆるブラウザにお気に入り登録をした時や、ブラウザのでWebサイトを開いた時に、タイトルタブの端っこに表示されている画像の事を指すのが一般的です。

10年以上前になりますが、Yahoo!のトップページをお気に入り登録した時に、独自のアイコンが表示されていたのがカッコいいなと思ったのがfaviconを知ることになったキッカケです。

このfaviconですが、自力でも作れなくは無いのですが、適応させるサイズが複数あったり、当然ながら画像編集ソフトが必要だったりと、慣れていない人からすると少し敷居が高いのも事実です。

今回は、faviconについての簡単なまとめと、私が当サイトfaviconを作る時に使用したオススメのWebサービスの紹介をお届けします。

ファビコン(favicon)とは

冒頭でも軽く触れましたが、favorite icon の略です。デザイナーの方とお話したりする場合、faviconと言えば100%伝わります。

faviconとは名前の通り、お気に入り登録した時や、ブラウザにWebサイトを表示している時、目印としてタイトルの左側に表示される小さな画像アイコンの事を指します。

昔はブラウジングする端末と言えば、ほぼパソコンと言っても過言ではありませんでしたが、スマートフォンの普及が進んでからは、iPhoneやAndoroid端末、Windowsタブレットなど、色々なデバイスに合わせてfaviconを用意する必要が出てきました。

正直、ファイル名、画像解像度、拡張子、用意するファイルだけ考えても、面倒な位に多いです。

iOS/Safari用

  • apple-touch-icon-[解像度]-precomposed.png
  • apple-touch-icon-[解像度].png

iOS/Safariで使うfaviconは2種類用意する必要があります。それぞれ解像度ごとに作成する必要があるので、ファイル数で見るとかなり多くなります。

precomposed.pngというファイルを用意している理由は、Webサーバー上に「404 Not Found」のエラーログが大量に吐かれてしまう為の対策です。

iOSでホーム画面にアイコンを追加すると、アイコンの角が丸く落ちますので、使う画像のデザインには気をつけましょう。

Android/Chrome用

  • android-chrome[解像度].png
  • manifest.json

Android/Chromeで使うfaviconは2種類のファイルを用意する必要があります。

1つは画像ファイルで、もう一つはmanifest.jsonという設定ファイルです。

manifest.jsonについては、私も大して理解している訳ではありませんので、認識相違があるかも知れませんが、ブラウザでWebサイトを開いた時に最初に読み込まれるファイルで、主に「ホーム画面に追加」をした際に、端末の解像度に合わせて最適な画像を割当てくれるjson形式のファイルです。

Windows8/10用

  • mstile-[解像度].png
  • browserconfig.xml

Windows8から登場のパネルにピン留めした時のタイル用の画像ファイルと、その設定ファイルを用意する必要があります。

browserconfig.xmlには、タイルに使用する画像の設定とパネル背景の情報が記載されています。

デスクトップブラウザ用(PC等)

  • favicon.ico

icoという拡張子のファイルは1つのファイルの中に複数の解像度の画像を入れて作る事が出来ることから、それらはマルチアイコンと呼ばれます。

icoを作るには、Photoshopのような画像編集ソフトを使ったり、アイコン作成専用のフリーソフトで作る事が出来ますが、ソフトの使い方に慣れが必要だったり、どの解像度の画像を用意すれば良いのか分からなかったら調べたりと、知識が無いと作るのに時間が掛かるのが難点です。

Mac OS(OS X El Capitan以降)

  • safari-pinned-tab.svg

OS X El Capitan以降のSafariでは、ブラウザのピン留めアイコンに単色のアイコンを用意する必要が出てきました。これまでのfaviconはフルカラーで良かったですが、こればかりは仕様に基づくものの為、単色のアイコンである必要があります。

また、拡張子がsvgですので、専用のソフトウェアで作成する必要があるなど、一手間掛かります。

ファビコン(favicon)を簡単に作成したい

前述したとおり、faviconと一言で言っても、用意すべきファイルや設定する内容がそこそこあるので、全部を自前で作成するのは現実的じゃありません。

出来ることなら、一括で自動生成したい!!という非常に怠惰な発想から調べたところ、2つのサービスがありました。

『favicon generator』を使う方法

日本企業であるエーオーシステム様が提供している、フリーのfavicon一括生成サイトです。

サイトは全て日本語で構成されている為、操作方法含めて何の抵抗もなく使うことが出来ます。

  1. https://ao-system.net/favicongenerator/にアクセスします。
  2. 画面左上の「画像ファイルを選択」を押下すると、画像ファイルをアップロード出来ます。
    アップロード前の画面には260×260以上と書かれていますが、上限は700×700なので、注意が必要です。
    ※私は調子に乗ってデザイナーさんから納品されたファイルサイズでアップロードしたら、見事にエラーチェックに引っかかりました。。。

  3. 適正なファイルをアップロードしたら、「ファビコン一括生成」を押下します。
  4. favicon.icoに格納される画像ファイルおよび、各サイズのファビコンが画面上にプレビューされますのでイメージを確認します。
    ※透過の画像を読み込みした場合でも。このプレビュー画面上で、背景色を自由に変更しながらファビコンがどのように見えるのかを確認する事が出来るので便利です。
  5. faviconのプレビューが完了し、問題なければ「ファビコンダウンロード」を押下して、favicons.zipをダウンロードします。
    ※favicons.zipは圧縮されたファイルになりますので、OS標準の解凍機能もしくは、解凍ソフトを用いてファイルを展開する必要があります。
  6. 解凍したフォルダの中には、favicon関係のドキュメントが一式詰まっています。後はこれをブログなどに設定するだけです。

これだけのファイルを一括で生成してくれるのは非常に助かります。

何より、マルチアイコンであるicoファイルだけでなく、そもそも0から作るとなるとどうやって作ったら良いのかわからないmanifest.jsonとbrowserconfig.xmlについても、機械的に作成してくれるので、後はアレンジを加えるだけの状態。

このサイトで唯一作成されないのが、Mac OS向けの「safari-pinned-tab.svg」です。Mac OSの事も考慮したfavicon設定にしたい場合は、次のサービスを併用するのがオススメです。

『Favicon Generator. For real.』を使う方法

先に紹介した『favicon generator』とウリふたつの名前ですが、提供元は異なっており、こちらは海外のサイトです。

このサイトでは、簡単な操作でWindowsのピン留めタイルの色設定や、Mac OS用の「safari-pinned-tab.svg」も作成出来ます。簡単な操作で、5分でfaviconが作れる!と言うのがポイントです

  1. https://realfavicongenerator.net/にアクセスします。
  2. 画面右側の「Select your Favicon picture」を押下すると、画像ファイルをアップロード出来ます。
    画面上の注記に小さく最小サイズは70×70であり、推奨は260×260以上と書かれています。上限サイズの確認はしませんでしたが、デザイナーさんから納品された3000×3000の画像もアップロード出来ましたので、余程のことがない限り大丈夫では無いかと思います。
  3. 画像をアップロードすると、細い設定をする画面に遷移します。
    設定について順番に確認していきます。
    ※私は透過処理をした画像ファイルを使っていますので、その一例になります。
  4. iOS向けの設定をします。
    「Add a solid, plain background to fill the transparent regions.」を選択して、背景色を設定します。(私はベーシックな白を設定しています)
    カラーコードが分からない場合でも、カラーピッカーの機能が付いていますので安心です。
  5. Android向けの設定をします。
    iOSの時と同様に、背景色を設定しておきたいので、「Add a solid, plain background to fill the transparent regions.」を選択して背景色を設定します。
    iOSと違うのは、ホーム画面へ追加した際の名前を指定する必要があります。ブログの名前などを設定するのが良いでしょう。
  6. Windows8/10向けの設定をします。
    ここで設定するのは、主にピン留めした時のタイルの色です。白だと味気ないので、カラーピッカーを使って色を選んでみました。
  7. Mac OS 向けの設定をします。
    「Turn your picture into a monochrom icon. Play with the threshold to get the best result.」を選択すると、元のカラー画像をモノクロ画像へ変換してくれます。
    ※細い微調整はバーを左右に動かして調整出来ます。
    テーマカラーも設定します。ここでもカラーピッカーを使って選択してみました。
  8. favicon生成時のオプションを設定します。
    サイトのルートにファイルを配置できる場合は「I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site. Recommended.」選択。
    もし権限が無い場合や、ルートにファイルを置きたくない場合等は下記の場所にルートからのパスもしくはURL(フォルダ)を入力します。
    全ての設定画完了したら、「Generate your Favicons and HTML code」を押下します。
  9. 次に、faviconのインストール方法が解説されたページへ遷移します。
    ここでは、色々な技術に合わせたfaviconの設定方法が細かく解説されています。
  10. faviconファイルをダウンロードする必要がありますので、「Favicon package」を押下して、favicons.zipをダウンロードします。
    ※favicons.zipは圧縮されたファイルになりますので、OS標準の解凍機能もしくは、解凍ソフトを用いてファイルを展開する必要があります。
  11. 解凍したフォルダの中には、favicon関係のドキュメントが一式詰まっています。後はこれをブログなどに設定するだけです。
    ※先に紹介した『favicon generator』と比べるとファイルの数が極端に少なくなっていますが、これはこれで問題ありません。
    『favicon generator』同様に沢山の画像ファイルを用意するスタイルを取りたい場合、画面右上にある「Get the old package」を押下することで入手可能です。
  12. Webサイトにfaviconを設定する方法は、Install your faviconの手順通り進めることで設定出来ます。

faviconの設定方法は、Webサイト自体がWordpressなのか、無料のブログなのか等、環境にによっても変わってきます。当ブログはWordpressで作られていますので、実際にWordpressでfaviconを設定する方法については、別の記事にてご説明したいと思います。

まとめ

faviconがあるのと無いのとでは、ホーム画面に追加した時や、ブックマークの中での存在感が違ってきます。少なくとも何も設定をしていないサイトよりは、faviconが設定してあるサイトの方が好印象に映る傾向にあります。

今回紹介したサービスはどちらも無料なので、何回でも作り直しをする事が出来ます。特に2つ目の『Favicon Generator. For real.』に至っては、自分で細かい設定をする事が出来るので、よりオリジナリティのあるfaviconに出来ますので、他サイトとの差別化も出来ますね。

運営しているWebサイトに『ロゴ』があるなら、その『ロゴ』を元に、faviconを作ってみては如何でしょうか。

↓ロゴを作成した記事はこちら

スキルのフリーマーケット!ココナラでロゴ作成を依頼してみた

2017.09.17

今回も最後までお読みいただき有難うございました。

もし宜しければ、Twitterのフォロー/facebookページのいいねを宜しくお願い致します。

関連商品





ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。