ファビコンがフリーで作れる!変換サイトでの作り方と設置方法

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

  • LINEで送る

favicon000

ファビコン(favicon)は、結構軽視されがちですが、
面倒くさくもないし、難しくもないので最初に設置しましょう。

ファビコンを設定すると、他のサイトよりも目立つこともできますし、
なにより、リピート率があがる可能性もあります。

ファビコンの表示場所

ファビコンは簡単に設定できるのに、結構色んな所に表示してくれます。

ファビコン表示場所

1つ目は、ブラウザのタブ部分です。ここが1番目にすると思います。
ファビコンを設定していないと、Chromeの場合は左のように、白い紙が折り曲がったような画像になります。

ファビコン表示場所

2つ目はお気に入りです。
お気に入りに入れてもらえるほどなので、素晴らしいサイトだと思います。
しかし、人は意外とサイト名を覚えていません。よほど好きか、インパクトがないと。

そんな時、視覚的効果のあるファビコンが一緒に表示されるだけで、覚えてもらえやすいですし、他のライバルサイトを出し抜けます。

ファビコン表示場所

3つ目は、私が1番お世話になっている場所です。ブラウザの履歴です。

よくタブを開きすぎて、一気に閉じます。
その時に必要なサイトまで消してしまうことありませんか?私はあります。

慌てて履歴から復活させようとしますが、かなり前に開いたページだと
サイト名もページタイトルも覚えておらず、再訪問できないことがあります。

それに比べて、ファビコンが設定されているサイトだと
結構な確率で履歴に埋もれていても見つけることができます。
やはり、文字だけでなく視覚で覚えていることも多いと痛感します。

ファビコン表示場所

最後はおまけ程度ですが、デスクトップにサイトのショートカットを作るとファビコンが表示されます。
ブラウザでショートカットを作ることはあまり無いと思いますが、念のため紹介しました。

変換サイトを使ってファビコンをサクッと作って設置する

ファビコンの作り方は非常に簡単です。画像ファイルが1枚あれば、
Webサービスの変換サイトを利用してすぐに作成できます。

どんな画像でも無理やりファビコンに設定できますが、
しっかりファビコン(アイコン)の拡張子である「.ico」で作成しましょう。

フリーで使えるfavicon変換サイト

favicon.icoを作ろうさんを使わせてもらいます。
http://ao-system.net/favicon/index.php

指定できる画像サイズは3種類あり、

  • 小画像:16px × 16px
  • 中画像:32px × 32px
  • 大画像:48px × 48px

いずれのサイズで作成しても構いませんが、
一番大きく表示されるのが、IEのショートカットです。

これは大画像(48px × 48px)で表示されるので、
できれば大画像で作成しましょう、私は大画像です。

準備するものは画像ファイルのみです。
拡張子は、「.png、.gif、.jpg(jpeg)」です。

画像ファイルは正方形でなくてもいいですが、ファビコンを作成する時に、
強制的に正方形に整えられ画像の縦横比率が変わってしまいます。
見栄えがよくないので、先に正方形に整えておきましょう。

faviconを作ろう使い方

faviconを作ろう使い方

小中大いずれかの「ファイルを選択」を押し、ファイルが読み込まれたら作成します。
あとは、右側に「ダウンロード」ボタンが表示されるので、
ダウンロードすると、指定した画像が「favicon.ico」で作られます。

ファビコン画像を設置する

ファビコン画像の設置は、先ほど作成した「favicon.ico」を
WordPressが置いてあるフォルダにそのまま格納します。

基本的には、「index.html」や「index.php」が置いてあるのと同じ階層にファビコンファイルを設置しましょう。
そして、htmlのヘッダ部分に以下の記述を追加すれば設置完了です。

<link rel="shortcut icon"  type="image/x-icon" href="http://www.keni-customize.net/favicon.ico" />

ただし、賢威の場合は既にファビコンが設置されていて、
html内の記述も既に完了しているので、「favicon.ico」を入れ替えれば終了です。

賢威初期ファビコン

初期状態だと、このアイコンが出てきます。
これだけでも設定していないよりはマシです

そして、ヘッダの記述はこうなっています。

<link rel="shortcut icon"  type="image/x-icon" href="http://www.keni-customize.net/wp-content/themes/keni61_wp_cool_131113/favicon.ico" />

ですので、このファイルを作ったファイルと入れ替えれば終了です。

賢威ファビコン入れ替え

「/wp-content/themes/keni61_wp_cool_131113/」に「favicon.ico」があるので、
FTPソフトで「favicon.ico」を入れ替えます。

※フォルダ名の最後に付加されている「keni61_wp_cool_131113」は
賢威のバージョンやダウンロード日付なので、異なる場合があります。

ファビコン表示確認

画像を入れ替えたあとは、ブラウザを更新してファビコンが表示されるか確認してください。

  • LINEで送る

コメントを残す

このページの先頭へ