Main » Annex » Weblog » Favicon作成と設置

2010年8月 2日

Favicon作成と設置

CA394174.jpg

レンタルサーバを借り、MovableTypeでwith NEROの運営を開始して10ヶ月。遅ればせながらFaviconを設置完了しました。

Firefoxなど一部ブラウザーユーザーの方はご存知だったと思います、本当は1月中旬に作業をしていたんですけどね。ただブログ訪問者の約7割を占めるInternetExplorer(以下IE)では、キャッシュや一時ファイルを削除しようがブックマークに追加し直そうが一切表示されませんでした。

そもそもFaviconとはFavorite icon(フェイバリット・アイコン)の略で、ブックマーク(お気に入り)リストやアドレス表示欄に表示されるアイコン。絵心の無い私には凝ったことは出来ないので、お気に入りのピアッツァの写真を使うことに(笑

画像編集ソフトで正方形に切り出して、16x16pixelにリサイズ。Faviconは .ico形式で作成する必要があるため、変換サイトで .ico形式に変換しFaviconManager プラグインを導入して設定しました。

WS000255.jpg

Firefoxではリロードするだけで表示したものの、先にお話したようにIEでは何をしようとも一切表示されません。プラグインを使わずに、テンプレートのhead要素にFavicon指定の記述をしても表示されず全くのお手上げ状態。慌しいこともあって、ずっと放置しておりました。

この土日も相変わらず仕事で、ピアッツァを維持る時間も無くブログ更新のネタもないので重い腰を上げてFaviconに再挑戦してみることに。

プラグインを利用してもhead要素に記述してもIEで表示されないので、Favicon画像自体に問題があるのではと思い改めて一から画像を作成し直します。

調べてみると、Faviconのウェブブラウザでの表示では16x16pixelサイズですが、デスクトップにショートカットを置いた場合32x32サイズ、エクスプローラーでアイコン表示にした場合には48x48サイズで表示され、.ICO形式であれば、これら3つのサイズのアイコンを一つのファイルに格納しマルチアイコンを作成することも可能だそうです。

16x16サイズだけでも構わないようですが、どうせならマルチアイコンに挑戦!今回は安易に変換サイトを使わず@icon変換という変換ソフトを使用してみます。使い方は至って簡単、3つのサイズのPNG画像を用意し、「マルチiconとして保存」をクリックするだけです。(読み込みは ICO/BMP/PNG/PSD/ICL/EXE/DLL、書き出しは ICO/BMP/PNG/ICLに対応。 )

作成したアイコンをFaviconManagerプラグインを利用してFavicon画像に設定すると、懸案だったIE環境でも、あっさりFaviconが表示されて一安心。
やはり何ごとも"急がば回れ"、手間を惜しんだのが失敗の始まりでしたね。反省(汗

Recommend

さくらのレンタルサーバ スタンダード   
容量10GB、月額500円、高性能なサーバが日本最大級のバックボーンに直結。
オンラインサインアップですぐに利用でき、2週間のお試し期間付き!

■Movable Type 4.2パーフェクトガイド 著者:荒木勇次郎
Movable Typeの基本的・実用的な情報を豊富なサンプルとともに完全網羅。
これから始めるビギナーから、テンプレートを利用して表現力を極めたいと思っている
ヘビーユーザーまで、すべてのブロガーに役立つ必携の一冊。

BuzzurlにブックマークBuzzurlにブックマーク  このエントリーをはてなブックマークに追加  

コメントする