ファビコンを導入してみた

ブログカスタマイズのお勉強中です。

今回はファビコンを導入してみました。

ファビコンとはこういったものです。
favicon.jpg

ブラウザ(InternetExplorerやFireFox)のタブに表示されていると思います。

簡単に導入できてオリジナリティが出せるので、お勧めです。

ファビコン用画像の準備

  1. ファビコンは「Favorite Icon」の略称だそうで、つまりはアイコンです。

  2. ファビコンに使える画像は解像度[16x16pix]で拡張子が[.ico]のICOフォーマットです。

  3. Wikipedia
    ICO(ファイルフォーマット)
    ⇒http://ja.wikipedia.org/wiki/ICO_%28%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%29

  4. 色深度の制限があるので、写真のようなフルカラーではなく、イラストのような色数を減らしたものを用意します。

  5. 写真を減色するようなソフトもあるので、そういったソフトを利用するのも一つの方法です。

  6. そして今回は簡単に画像をファビコンに変換してくれるサイトを利用しました。

  7. Favicon Converter
    favicon (ファビコン) 画像変換サービス - Favicon Converter ⇒http://favicon.qfor.info/

  8. 上記サイトにアクセスし、上部にある[ 画像 → アイコン変換ツール]をクリックします。

    Favicon Converter
  9. 変換する画像を選択し、設定で[16pxにリサイズ]を選択します。写真を選択した場合には[256色に減色]します。

  10. [アイコン作成]をクリックすると出来上がったものをダウンロードする形となるので、任意の場所に保存します。

テンプレートの編集

  1. まずは画像をアップロードするように、アイコンをアップロードします。その際に分かり易いように[favicon.ico]などと名前を付けておきます。

  2. [テンプレートの設定]から使用するテンプレートのHTMLを編集します。

  3. ヘッド部分(<head>~</head>)に下記を付け加えます。

    <link rel="shortcut icon" href="[アップロード先]/favicon.ico">
    
  4. href="[アップロード先]/favicon.ico" の部分は各自の用意したファビコンの場所(URL)を入力します。

  5. ヘッド部分がよく分からないなら、</head>がある行の直前に付け加えておけばOKです。

  6. これを保存・更新して終了です。ねっ!簡単でしょ!

  7. ブラウザにファビコンのキャッシュ(記録)が残っている場合、すぐに反映されないこともあります。

  8. その場合はブラウザの設定からキャッシュを削除すると反映されると思います。

応用編 GIFアニメ

  1. ブラウザによっては、[.ico]だけでなく[.gif]でも同様の方法で対応できます。

  2. 下記サイトでは画像をGIFアニメに変換してくれます。

  3. FavIcon from Pics
    ⇒http://favicon.htmlkit.com/favicon/

  4. こんな感じのファビコン用GIFアニメを作成してくれました。

    favicon_anime.gif
  5. ひとまず[favicon.gif]とファイル名を変更しておきます。

  6. この後、アップロードしてHTMLを編集するのですが、下記2行目のコードを追加します。

    <link rel="shortcut icon" href="[アップロード先]/favicon.ico" />
    <link rel="icon" type="image/gif" href="[アップロード先]/favicon.gif" />
    
  7. アップロード先のURLは該当するものにしてください。

  8. これでGIF対応のブラウザ(FireFox)ではGIFのファビコンが表示されます。

  9. 対応していないブラウザ(InternetExplorer)ではICOのファビコンが表示されます。

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

No title
こんにちは!
ファビコンってちょっと個性をだすのにいいですよね。
わたしもいつかやってみたいなぁと思いつつ、どんなイラストにするか考えるのが面倒でやってません(笑)
Deka-EさんはおなじみのMiiですか。rssリーダーでいつも見てるブログさんを一気に開いたとき、ぱっとわかっていい感じです♪
拍手もお礼絵を設定したんですね~。何気に役立つコミPo!
宵乃 さんへ
すごい簡単なカスタマイズで、差別化できるのがいいです。
ファビコンを導入している人は意外と少ないので目立てますww

16×16pix だとMiiが誰だか分からないですね(笑)
候補としては頭文字の『D』または『E』をイラストに起こそうかと考えてました。

拍手絵は前から用意はあったのですが、FC2拍手とブログ拍手がごっちゃになって面倒になったのでやってませんでした(笑)

コミPo!は漫画だけでなくイラスト作成で大いに役立ってくれてます。
No title
ファビコン確認しました(^^)
(上記コメント) さんへ
お役に立てたのなら幸いです。

コメントの投稿

非公開コメント


トラックバック


この記事にトラックバックする(FC2ブログユーザー)

ブログテンプレート必須編集項目3 ファビコン
ブログにオリジナリティーを出すのに有効なのが『ファビコン』です。 ファビコンについては元祖エボリアヌーメにて記事にしていますので、導入方法はそちらを参照してください。 元祖エボリアヌーメ「ファビコンを導入してみた」 表示させるアイコンを用意して、&lt;/head&gt; の直前あたりに &lt;link rel=&quot;shortcut icon&quot; hre...
ページ下部までご覧いただきありがとうございました。