Read Article

WordPressにファビコン(favicon)を設置する方法とファビコンの作り方

スポンサーリンク

先日の第4回ブログ勉強会「オーケー自習室」でファビコン(favicon)を作成してWordPressに設置しました。その備忘録を兼ねて作り方と設置方法を書いておきます。

【オーケー自習室ってなに?という人はこちらの記事をどうぞ!】
第4回ブログ勉強会「オーケー自習室」は、とてもハードで濃密で美味しかった!? | 冒険者たち

ファビコンとは何か?!

favicon作成用見本
画像にもあるようにブログのマークのようなモノですね。wikiによると以下のように説明してあります。

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

読者の方がお気に入りに登録してくれた際や、ブラウザのタブなどに表示されているアレです。わたしは以前から漠然とファビコンが欲しいなと思ってはいたのですが、作り方がわからず放置していたのです。

誰でもできる簡単!ファビコンの作り方?!

まずはベースとなる画像を用意します。わたしはtwitterのアイコンにもしているお気に入りの画像を用いました。正方形の方が何かと便利かと思います。

その画像をツールを使ってファビコン化するのですが、ググってみると無料で使えるWebベースのファビコン作成サービスがたくさん出てきます。

ファビコン favicon.icoを作ろう!

ファビコン変換サービス

あたりがいろいろなサイトで紹介されており定番なのかと思います。わたしは下の「ファビコン変換サービス」さんを利用させてもらいました。上の「ファビコン favicon.icoを作ろう!」さんでは、なぜかうまくいかなかったのです。

上記のような変換サービスでは、 16 x 16 もしくは 32 x 32 といったサイズに変換する機能が用意されているようですが、わたしは 16 x 16で作成しました。ブラウザのタブで使うサイズがそれだからです。

32 x 32 はWindowsなどのデスクトップに用いられるアイコンサイズのようですね。気になる方は、両方のサイズを用意してマルチアイコンにしておくといいと思います。

作成したファビコンをWordPressに設置する方法

WordPressを使っている方ならば、ファビコンは簡単に設置することができます。まずは、上で作ったファビコンの画像ファイルをWordPress管理画面の左側のメニューにある「メディア」の機能を使ってアップロードします。

この時に、アップロードされた画像をクリックすると「添付ファイルの詳細」という画面が開かれますので、その右側にあるURLという欄をメモしておきましょう。このURLの場所にアップロードしたファビコン画像が格納されています。

次に、テーマのヘッダ部分head〜/headに以下のタグを書き込んでください。WordPress管理画面の左側のメニューにある「外観」ー「テーマ編集」-「ヘッダー(header.php)」にあります。

link rel="shortcut icon" href="http://ドメイン名/wp/favicon.ico”

http://ドメイン名/wp/favicon.icoについては、さきほどメモしたURLを入れる場所となります。アップロードしたファビコンを指定する訳ですね。書き込み後、「更新」して完了。わたしは、最初、この更新を忘れて失敗しました(笑)

以上です。

グッチはこう思う
これだけで、自分のブログ専用のマークを設置できるのです!もしも、見えない場合は、再読み込みすると見える場合もあります。

ぜひ、試してみてください♪

Return Top