ファビコン(favicon)の作成方法 

この記事は約3分で読めます。

こんにちはFPヒデです。

皆さん、ファビコンって知っていますか?
ファミコンではないですよ^^。
8

こちらになります。
インターネットをやっている方なら必ず見たことがあるアイコンですよね。

2014-07-05 21-17-59



その他、ブックマーク表示のアイコンにも使用されています。

2014-07-05 21-39-47

わたしは最初このアイコンの存在はわかっていましたが、『ファビコン』という名前がわからなかったので
検索して探すのに一苦労でした。

このファビコンは遊び心あふれた画像を載せることができます。ファビコンの役目は?といいますと、一番は目印役でしょうか。

インターネットをしていると、いくつもタブを開いて、色々なサイトに行ったり戻ったりと、複数のタブを行ったり来たりしながら閲覧する方も多いかと思います。

『ファビコン』はそのようなときの目印になるんですね。

ただファビコンはご覧のとおり、すごく小さい(16ピクセル×16ピクセル)ので、デザインをあまり凝ったもの且つ複雑なものは見づらくなります。ですから、デザインはシンプルで色は原色系の方がよりわかりやすくなります。



実際に『ファビコン』を作ってみる

無料で『ファビコン』が簡単に作成できるサイトがありますのでこちらで作成してみましょう。
『ファビコン』にしたい画像を用意するだけでOKです。下記サイトをクリック!

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。ファビコン無料作成はこちら

基本的には、小画像(16×16)で作成すればOKですが、IEのブラウザを使用している場合に画面のショートカットを作成した際、ファビコン画像と同じものが貼り付けられますので、中画像(32×32)で作成しておいても問題ありません。

画像を選択したら⇒『ファイルを選択』⇒『favicon.ico作成』⇒『ダウンロード』します。

ファビコン作成。

保存形式はicoにしましょう!

ファビコンは、gifやpngでも表示されるのですが、IE(インターネット・エクスプローラー)ではサポートされていないので表示されないようです。

IEを使用の方はたくさんいますのでしっかりとicoで保存してください。

上記の無料サイトを使用した場合であれば、自動的にicoに変換してくれるので大丈夫です。
フォトショップ等を使用してファビコン画像を作成することも可能ですので、その際は忘れずに拡張子をicoにしましょう。



作成した『ファビコン』をサーバーにアップロードする

ダウンロードして保存しましたら、サーバーの一番上の階層にアップロードします。
アップロードしたら実際に反映しているかどうかの確認をブラウザでしてみましょう。

サーバーの一番上の階層に設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合は、内に以下の記述をすればOKです。


WordPress(ワードプレス)で『ファビコン』を出力設定する方法その1

favicon.icoを使用中テーマのメインディレクトリに設置します。

参考例:
「wp-content」⇒「themes」⇒「twentyfourteen」内にアップロード。

そしてheader.phpの<head>~</head>内に以下の記述を追加します。

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />

上記の方法でアイコンが表示されるはずです。


WordPress(ワードプレス)で『ファビコン』を出力設定する方法その2

WordPressプラグイン⇒新規追加⇒「プラグインの検索」より『Favicon Rotator』を検索します。

1234

『外観』⇒『Favicon Rotator』⇒Browser Icon『Add Icon』をクリックして画像をアップロードします。
この場合のアップロードする画像サイズはプラグインが自動調整してくれるため16×16でなくてもOKです。
2014-07-05 23-35-52

※「Touch Icon」はモバイルで表示させる場合です。

コメントを残す

サブコンテンツ

このページの先頭へ