webど素人でも10分で出来るファビコンの作成・設置方法

Pocket

title

あなたのサイトにはファビコン(favicon)を設定しているだろうか。

ご存知の方も多いと思うが、ファビコンとはブラウザのタイトル部分やお気に入り(ブックマーク)のリストに表示される小さなアイコンのことだ。

設置することで他のサイトと区別しやすくなるため、個性をアピールしたい場合は必ず設置したほうが良いだろう。

さて、この記事ではそのファビコンを簡単に作成する方法や設置方法をご紹介する。

表示されない場合の対処方法も書いたのでぜひ参考にしてみてほしい。

<目次>
1:作成する上での注意点
2:ファビコンの作成手順
3:ファビコンの設置方法
4:表示されない場合の対処法

1:作成する上での注意点

ファビコンを作成する上でいくつか注意することがある。

・シンプルなデザインにする

表示されるファビコンはとても小さいため、あまり細かい画像は向いていない。

複雑なデザインにしてしまうとよく分からないものになってしまうので、シンプルではっきりしたデザインをおすすめする。

・ファイルは「ico」で作成する

最近は、gifやpngでも表示されるブラウザが多くなったが、IE(Internet Explorer)ではico形式にのみ対応しているため、ico形式での作成が一般的。

アイコンには単一アイコンのみ格納している「シングルアイコン」と、複数アイコンを格納できる「マルチアイコン(複数アイコンを格納)」の2種類がある。

マルチアイコンは、サイズ別の複数のアイコンを一つのファイルにまとめて、環境に合わせて適切なサイズを表示することができる。

・ファビコンのサイズ

表示される場所やブラウザなどによってサイズが異なる。スマホ等、デバイスの多様化によりファビコンのサイズも多種多様だ。

主要サイズは以下となる。

サイズ(px) 表示場所
16×16 ブラウザのアドレス欄・タブ・ブックマーク(IE)
32×32 chrome、firefox、safari他主要ブラウザのタブ・ブックマーク
48×48 Windowsのサイトアイコン
64×64 高解像度のWindowsのサイトアイコン

 

 

他にも57×57、72×72、96×96、114×114、128×128、195×195、258×258といったサイズがあるが、あまり大きなサイズを格納すると容量が大きくなってしまう。

したがって、最低限必要な上記4種類のサイズのマルチアイコンを作成すると良いだろう。

以上の点を注意して次章から画像を作成していく。

2:ファビコンの作成手順

手順1:ファビコンに設定する画像を作成

画像編集ソフトで作成する。色々な方法はあるが今回はPhotoshopを使用して作成する。もちろんフリーソフト等、自分が使いやすいツールで構わない。

favicon01

64pxで作成した画像を各サイズ分書き出す。ファイル形式は背景を透過できるPNGファイルがおすすめ。

favicon06

手順2:書き出した画像でマルチアイコンを作成

複数の画像をマルチアイコンとして作成する方法はいくつかあるが、今回は下記の無料Webサービスを使って作成する。

フリーソフト等をダウンロードしなくても、サイト上で簡単に作成できるのでおすすめだ。

favicon02

http://ao-system.net/alphaicon/index.php

 ①「画像ファイルを選択する」で作成した画像を選択し、下部の「アイコン作成」をクリックする。

favicon03

②プレビューが表示されるので、問題がなければアイコンダウンロードをクリックする。

favicon04

③複数の画像が格納されているマルチアイコン「favicon.ico」が完成。

favicon05

上記のように簡単に作成することが出来た。
それではサイト上に設置しよう。

3:ファビコンの設置方法

作成したfavicon.ico を設置するにはサーバーにアップロードする必要がある。

アップロードする場所はサーバーのルートディレクトリ(一番上の階層)だ。

ルートディレクトリに設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合はhead内に下記のコードを記述する。

<link rel=”shortcut icon” href=”http://ファイルのパス/favicon.ico” />

※赤字の部分はicoファイルの置き場所によって異なるので変更を忘れずに。

サーバーにアップしたらブラウザ等で確認してみよう。

favicon07

上記のように表示したら完了だ。

4:表示されない場合の対処法

ファビコンが表示されるまで時間がかかる場合があるため、何度かブラウザの更新や再起動をする。

また、IEではキャッシュや閲覧履歴が残っているとファビコンが表示されないことがある。過去にサイトを見た際、「ファビコンが無い」という情報が残ってしまうためだ。
そのため、キャッシュや閲覧履歴を削除して確認する。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*