ブログ運営も9か月目に差し掛かったので、faviconを設定してブランドイメージを高めていこうという試みです。

 

faviconとは？

サイトのトレードマーク、シンボルマークとしてサイトに設置するアイコンのこと。

favorite ＋ icon

の造語です。

なぜfavoriteかというと、ブラウザのブックマーク、いわゆる「お気に入り」に表示されるアイコンだからです。

サイトブランディングにおける初歩の初歩として広く使われているこのfavicon、僕のブログにも設置してみました。

こんなブログをブランディングするということ自体がむなしさすら漂うというのは置いておくとして。

 

faviconは「お気に入り」で表示されるほか、ブラウザウインドウのサイト名にも表示されます。

Yahoo!だとこんな感じ。

 

このfaviconが設定されていないと

なんとも味気ないドキュメントアイコンになってしまう。

 

とりあえずロゴを作ろう

ブランディングするにもまずはサイトロゴくらいは用意したほうがいいですね。

おもむろに作ります。

どこかで見たような配色・・・

気にしない！

パクリじゃぁございませんよ。オマージュってやつですよ。

手間ヒマかけても何の得もないので適当に10分で作りました。
飽きたらまた別なの作ります。

僕は飽きっぽいので、記事も見飽きたら書き直したり消したりすることがあります。
人気記事が固定されてきて順位変動が無くなってくると「消してやろうか」とか思ったりするくらい。

 

faviconのサイズは？

faviconはアイコン画像ですが、サイズが規定されています。

16 x 16

32 x 32

48 x 48

64 x 64

などが一般的です。（単位はピクセル）

小さいですね。文字なんか入れると小さすぎて潰れてしまいます。

一般的によく使われるサイズをすべて用意しておくのがセオリーですが、めんどうなので最も利用されている 32 x 32 だけ作りました。

これはchromeが利用しているサイズ、だったかな。ブラウザによって異なります。
いろんなサイズを用意しておくと最適なものをブラウザが勝手にチョイスして表示してくれる。

ちなみにfaviconの拡張子は .ico というもので、複数の画像を格納できるフォーマットになっています。

上記4種類の画像をひとつの.icoファイルに収めることができます。

 

faviconを作ろう

サイトロゴを作ったら、そこから 32 x 32 ピクセルへ縮小してアイコン画像の元を作ります。

作った画像はpng形式で保存しておきます。

.icoファイルはプラグインなどを入れてあるとPhotoshopで直接保存したり、.icoを編集保存できるツールもありますが、オンラインで生成してくれるサイトが便利なので今回はこれを使います。

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

用意した画像を、それぞれのサイズ毎に選択していきます。
今回は不精して1枚しか用意していませんが。

画像を選択したら

「favicon.ico作成」というボタンをクリック。

「ダウンロード」ボタンが表示されるのでこれをクリックすると出来上がった.icoファイルがダウンロードされます。

 

サイトにfaviconを設置する

ダウンロードした.icoファイルをサイトに設置します。

やり方は、ftpでサイトに接続し、サイトのルートディレクトリにfavicon.icoという名前でアップロードするだけです。

ルートディレクトリは多くのレンタルサーバが

public_html

という名前になっていることが多いですね。

htmlやhome、wwwという名前になっているサーバも見たことがありますが少数です。

残念ながら無料のブログサービスなどではfaviconが有効にならないものが多いです。

faviconを設置しても表示されない場合はブログのhead内に

<link rel="shortcut icon" href="favicon.icoのURL">

と記述してみてください。
無料のブログサービスでも上記のように直接指定してやれば表示されることがあります。

ルートディレクトリに複数のブログやサイトを設置していてドメインを割り当てずにディレクトリで運用している場合は、各ディレクトリにfavicon.icoを設置して上記のように直接指定するといいですね。

はい、表示されました。

 

favicon作成のお助けサイト

Favicon Icon Gallery

faviconのギャラリーサイト。
いろんなfaviconが見れるので参考にするといいですね。
パク・・・オマージュですから！

 

Free Logo Maker

クリックしていくだけでロゴが作れるサイト。
サイトのロゴをデザインするときなど参考になります。

 

favicon.cc

フリーのオンラインfavicon制作ツール。
会員登録もアプリのダウンロードも必要なくfaviconが作れます。

ぶっちゃけPhotoshopやillustratorのほうが遥かに使い勝手がいいですがまぁ無料のツールということで。

 

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

上記ですでに紹介している、png画像をfavicon.ico形式に変換してくれるサイト。
オンラインツールでアプリのダウンロードも会員登録も要りません。便利。

 

 

ということでこのブログにもfaviconを設置し、サイトロゴなども置いてみました。

 

あとサイトの表示名を短縮してみました。
サイト名が長いと検索に不利になる可能性があるので、それを検証してみるために表示サイト名を極短の2文字にしてみました。

記事タイトルが長いと検索でこんな風に短縮されてしまうんですよ。
よりによってそこ短縮すんの？！って感じですね。
検索の記事タイトルからサイト名表示を消すという手もありますが。

有名ブログじゃあるまいしサイト名で検索してくる人なんて皆無なので、今後も実験でサイト名をいろいろ変えていくかもしれません。
僕はアフィリエイターでもブロガーでもないのでこのブログはこれからも色々な実験に使っていくことでしょう。