ファビコンを設置しよう　stinger3

スポンサーリンク

ファビコンとは、

一応暗黙の決まり事なので言いますがファミコンじゃないですよ。

ブラウザのタブや（IEの場合アドレス前も）ブックマーク／お気に入りに付けられるブログやホームページのマークのようなものです。（上記画像の赤丸部分）

STINGER3の標準では

こちらのファビコンになっていると思います、

これを自分のサイトだけのオリジナルファビコンに変更しようと思います。

無料でこんなに良いWordPressテーマSTINGERを作成されたENJILOGさんには感謝です、

感謝ですが変えさせてもらおうと思います。^^;

このファビコンの作成・設置方法を説明しますが

毎度の事ながらコードの書き換えは自己責任でお願いします。

ファビコンの作成・設置方法

ファビコンに使われる画像はJPG/GIF/PNG/BMPなども使用できますがブラウザによって表示されないなどもあるのでWindow標準フォーマットのicon形式（.ico）で作成しましょう。

ファビコンに使うicon形式画像の作成

「 favicon.icoを作ろう」などのサイトを使うと簡単に作成できます。

上記サイトで画像を選択して「favicon.ico作成」ボタンを押せば見本が表示されるのであとはダウンロードするだけです。

※画像サイズは全て同じでも縮小してくれます。
※ファビコンは１つのファイルの中に複数の画像サイズが入れれるので大中小とも選択して下さい。（表示される場所によって自動で適したサイズが表示されます）

もっと綺麗なファビコンを作りたい方は「アイコンウィザード」などのフリーソフトを使うとできます。

※対応OSがXPまでしか書かれていませんが私はWin7で問題なく利用できてます。

• 写真など細かい画像を使いたい。
• 角を丸めたり文字だけの切り抜きなど背景を透明にしたい。
• Retinaディスプレイレベルの解像度でも綺麗に表示させたい。

などの場合アイコンウィザードを使ったほうがいいです。

左：「favicon.icoを作ろう」で作成
右：「アイコンウィザード」で作成

綺麗なファビコンを作っておけば大きめに表示されるデスクトップなどのショートカットを置かれても見た目がいいです。

個人のサイトが他人のデスクトップに置かれるような事はあまりないと思いますけど・・・

ファビコンを設置する　stinger3

作成したファビコン画像ファイルをWordPressのメディアに保存する。

保存したファビコン画像URLをコピーしておく。

stingerのimagesフォルダに直接ファビコン画像をアップロードできる方は下のコード38行「?>/images/rogo.ico”/>」の「rogo」部分をアップロードしたファイル名に変更するだけで完了です。

外観→テーマ編集→ヘッダー（header.php）

上記コードの38行の一部を

ファビコン画像URLに書き換える。

完成。

参考：このブログの場合

無料ブログなどにファビコンを設置する

同じ方法で無料ブログなどでもファビコンを設置できます。

HTMLなどが編集できる無料ブログサービスが前提です。

上記のようにheadから/head間に記入すればOKです。

もし最初から別のファビコンが設定してあるようならheadから/head間にあるはずですので探してURL部分のみ変更すれば変えれます。

※画像ファイルは個々のブログへ保存して下さい。

Tweet

Pocket