ファビコンを無料で作成しちゃおう!手順を画像付きで解説するよ!
Posted: Last Update:
ファビコン(サイトアイコン)を作りたいけどどうしたらいいか分からない…。そんなお悩みをさくっと解決!無料でファビコンを作成する方法から、自作サイトの場合には設定方法まで、画像入りで詳しく丁寧に解説します!
この記事の目次
ファビコンを作りたい!
早速ですが、ご自身のサイトに「ファビコン」は設定していますか?サイトを表示したときに、タブに表示される小さなアイコンのことです。
表示されたページの「顔」とも言えるこのアイコン、ユーザーにとってはタブを探すときにとってもお役立ちなパーツです。
もし設定がまだなら、さっそく設定してみましょう。素材を選べば、あとはご紹介する手順でさくっと簡単に作成できちゃいます!
ファビコンの要件
作成に入る前に、ファビコンについてちょっとだけ予備知識を学んでおきましょう。ブラウザのタブにサイトのアイコンを表示してもらうには、2つの条件があります。
- 画像ファイルが「.ico」という拡張ファイルであること(Appleの場合は専用のpng)
- サイトのヘッダーに、ファビコンファイルが指定されていること
もう少しだけ詳しく見てみましょう。
「.ico」とは
ファビコン画像のファイル形式は「.ico」で作成します。「.ico」とは画像ファイルの一形式で、「.jpg」や「.webp」などおなじみの画像ファイルの一種です。
ただし、「.jpg」や「.webp」の拡張子を「.ico」に変更して保存しただけでは表示されません。「.ico」ファイルを別途作成する必要があります。
また、Apple製品(iPhoneなど)向けには、専用のjpgファイルを作成する必要があります。
この「.ico」ファイルとApple製品専用のjpgファイルの作成を、無料でできる作成サイトがあるので、後ほどご紹介します。
サイトのヘッダーでファビコンを指定する
サイトのヘッダーでファビコンを指定する作業。こちらはサイト作成者にはおなじみの「<head>~</head>」に情報を追加していく、例のあの作業です。
通常のブラウザ用、Chrome用、Apple用、3つのコードが必要ですが、コピペで簡単にできちゃいます!こちらも後ほど詳しく解説します。
ファビコンの「.ico」ファイルは「Banner Koubou」と「iconifier.net」で作ろう!
では、早速ファビコンの作成に進みましょう!
ファビコンにする画像を選ぼう!
最初にファビコンにする画像を選びましょう。画像ファイルの形式はJPG、PNG、GIFがおすすめです。
ファビコンは縦横比が同じ画像が好まれます。今から画像を準備する方は、縦横比が「180×180ピクセル」の画像を準備することをおすすめします。「180×180ピクセル」の大きさがあれば、編集中に画像が荒くなるなどの問題を回避できます。
また、今から画像を作る方は、あらかじめ背景を透過させた状態で作成しましょう。次の手順を省くことができます。
画像を透過させよう!
※背景が透過した画像を作成した方や、四角いアイコンを使う方は、この作業は必要ありません。次の「画像を「.ico」ファイルにしよう!」まで進んでください。
アイコンの多くは円形だったり、デザインの形そのままだったりしますが、画像は四角形で保存されていることが多いです。ここで問題になってくるのが、白い背景。できればファビコンには表示したくないですね。
そこで役立つのが背景の透明化。四角い背景の除去にはBanner Koubouを使いましょう。
- 最初にBanner Koubouに接続し、作成した画像を選択します。
- 次の画面で、「背景透明」をクリックし、透過する背景部分(白い部分)をクリックしてくたせさい。
- 背景が透明になりました(画面では格子状に表示されます)。この画像をダウンロードしましょう。
- iconifier.netを開いたら、ファビコンにするファイルを開いて、「iconify」をクリックします。
- ファビコンが作成されました。必要なファイルは「apple-touch-icon.png」と「favicon.ico」の2つです。右クリックして「画像を保存」して下さい。※zipファイル解凍の方法が分かる方はzipファイルをダウンロードしてもかまいません。
- ファビコンにする画像を選ぶ
- 「Banner Koubou」を使って画像を透過させる
- 「iconifier.net」で画像を「.ico」形式に変更する
- ファビコンをサイトのヘッド部分に設定する
- 動作確認を忘れずに!
画像を「.ico」ファイルにしよう!
では、現在は「.jpg」「.png」「.gif」の画像ファイルを、「.ico」形式にしていきましょう。※拡張子が「.jpeg」のファイルはあらかじめ「.jpg」にしてください。
今回使うのはiconifier.netです。このサイトの良いところは、アイコンを最小化(16x16ピクセル)せずに、「48×48ピクセル」で作成してくれること!最小化(16x16ピクセル)されてしまうと、ファビコンを表示できないブラウザがあります。また、iconifier.netは、iPhone端末向けのアイコンも同時に作ってくれます。
では、作成手順を見ていきましょう。
ファビコンをサイトに設定しよう!
では、サイトにファビコンを設定していきましょう!
サイトのhead部分に時用法を入れる
まずは、適当な場所に先ほどダウンロードした「apple-touch-icon.png」と「favicon.ico」の2つのファイルを保存してください。
次に、ファビコンを反映したいページの「<head>~</head>」に以下のようにリンクを入れていきます。1行目は通常のブラウザ用、2行目はGoogle Chrome用、3行目はiPhone向けのコードです。
<link rel="shortcut icon" href="ICOファイルのパス" type="image/x-icon" />
<link rel="apple-touch-icon" href="アップル用のアイコンバス(PNG)" />
具体的な例を見ると以下のようになります。ファビコンを「icon」というフォルダに保存し、ダウンロードしたままのファイル名で使用する場合には、次のコードのようになります。
<link rel="shortcut icon" href="/icon/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/icon/apple-touch-icon.png" />
動作確認を忘れずに!
さて、本番環境に揚げる前に必ずテストをしてください。Google Chromeとそれ以外のブラウザで表示されているかの確認も忘れずに!
まとめ
ファビコンを設定するには「.ico」ファイルの作成と、サイトへの設定が必要でした。簡単にまとめると手順は以下の通り。
詳しい手順は上述の各手順を参考にしてみてください。