オリジナルのファビコンを作る



ファビコンというのはウェブのブックマークなどで表示されるアイコンのことで、いわばウェブページ1つ1つのシンボルマークみたいなものです。GoogleやYahooなどの有名なサイトでは見覚えのあるファビコンが使われていますよね。

 

ファビコン3 ←ファビコン

 

ということで当サイトも実際にファビコンを作ってみました。

まずはペイントで16×16サイズの画像を作成します。下のようなものを作成してみました。以降使用するためにPNG 、GIF 、JPG(JPEG)で作成してください。

 

無題1

 

ここで透過を行いたい方はこちらへ

透過したファビコンを作る

次にファビコンにする画像の形式を.icoに変更します。下のサイトだと簡単に変換できますのでおすすめです。このサイトを使い説明していきます。

こちらから

「ファイルを選択」ボタンから先ほど作った画像ファイルを選択します。

 

無題2

 

次に画面右側の「ダウンロード」ボタンからファイルをダウンロードします。

 

無題3

 

.icoファイルができたらメディア→新規追加でアップロードします。

画像を使用する

次にファビコンの表示方法ですが、左メニューバーの外観→テーマ編集→ヘッダーと行き、<head>〜</head>内に下の緑のプログラムを入力しますと表示されるはずです。

 


<link rel=”shortcut icon” href=”ファビコンのリンク先”>
<link rel=”apple-touch-icon” href=”ファビコンのリンク先”>

 

ファビコンのリンク先は記事作成の「メディアを追加」ボタンからファビコンを選択し、テキスト表示をすればわかると思います。例えば当サイトでは

 


<link rel=”shortcut icon” href=”http://wordpress.quickht.com/wp-content/uploads/2013/12/favicon.ico“>
<link rel=”apple-touch-icon” href=”http://wordpress.quickht.com/wp-content/uploads/2013/12/favicon.ico“>

 

のように緑色の部分を記入しています。

ファビコンが作れました。皆さんもこのようにオリジナルのファビコンが作れたのではないでしょうか?

 

ファビコン4