きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

カスタマイズ

これは簡単!Favicon(ファビコン)の作り方、設定方法

投稿日:2012.06.20 更新日:

favicon_firefox

favicon_top

Faviconとは…Favorite icon(フェイバリット・アイコン)という英語の語句を縮約したもので、ウェブサイトやウェブページに関連付けられたアイコンになります。
ウェブブラウザのお気に入り(ブックマーク)リストや、アドレス表示欄に表示されるアイコンですね。

Firefoxでは、

favicon_firefox

safariでは、

favicon_safari

と、こんな感じに表示されます。

ちょっと、自分のサイトって感じになりますね。
また、お気に入り(ブックマーク)に入れた際も、わかり易く何かと便利だと思います。

 作成方法

1.画像作成ソフトで画像を作成します。
まず、正方形であれば問題ありませんが、最終的には16×16pxの大きさになりますのであまり細かすぎる画像は好ましくないかと思います。(…といいつつ細かい画像を選択w)
保存形式は、「PNG」、「GIF」形式がいいかと思います。

favicon

2.作成した画像を「ICO」形式に変換が必要になりますので、ここでは「FavIcon from Pics」(変換サイト)を利用しました。

favicon_from_pics

そして、変換されたものをダウンロードします。ダウンロードしたフォルダの中に「favicon.ico」がありますので、それを使用します。

favicon_download

こんな感じです。

3.「favicon.ico」をサーバーにアップロードします。

4.<head>〜</head>内に、リンクタグを設定します。

<link rel="shortcut icon" href="ファビコンをアップロードした場所/favicon.ico" />

ファビコンをアップロードした場所は、"http://〜" で指定するか、WordPressでしたら"<?php bloginfo('template_url'); ?>/〜"で指定もできます。

【参考にさせていただいたサイト】
ホームページ作成ガイド/お気に入りアイコン(ファビコン)の作り方 - TAG index Webサイト

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-カスタマイズ
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.