フリー素材取り放題!役立つブログ!

フリー素材「取り放題.com」ブログ > サイト制作の小技 > あっという間!favicon(ファビコン)の作り方

あっという間!favicon(ファビコン)の作り方

まずファビコンってなによ?

その名前を聞いたことなくても普段よく目にしてるとおもいます。

favicon(ファビコン)とは ツールバーのアドレス欄に表示されているアイコン画像のコト。

コレのことです↓
favicon(ファビコン ちまたではお気に入りアイコンとも言われてますね。

今回はファビコンの作り方です。

ファビコンをつくろう!

お気に入りに登録したときも出現しますね。
簡単につくれるのでまだ作成していない方は、 ぜひつくってみましょう。

まず、画像を用意。

16×16ピクセルの画像を用意します。

小さいのであまりごちゃごちゃしない シンプルなものがよいかも。
色々試してみてね。

ペイントやphotoshopなどで作成しGIF形式で保存。
ファビコンは画像をicon形式に変換するだけでOKです。

出来た画像を.icoに変換!

gif形式でもよいらしいですが、.icoファイルに変換したほうがよさそうなので、 変換します。
※画像名は「favicon.ico」にしとくとしたのhtmlソースコピーでいいので楽かも

■.icoに変換してくれるサイト

favikon.com
favikon.com>>
(英語ですがシンプルで使いやすい)

Favicon Japan
Favicon Japan>>
(日本語なのでわかりやすくて安心)

それではいよいよ設置です

favicon(ファビコン)設置方法

まずはできたてホヤホヤの完成画像を アップロード。
場所はルートでOK。

そしてページの <head>~ </head>内に
<link rel="shortcut icon" href="/favicon.ico">
を付け加えるだけ。

これで、出来上がり!


ファビコンがあるとブックマークから サイトに行きやすい気がします。
タブブラウザで閲覧してるときも、わかりやすい。

なので、そのサイトの特徴がわかるような ファビコンにしておくとわかりやすくていいですね。

意外とカンタンなんで、設定オススメします。


TVキャプチャ情報満載の本はコチラ↓
いちばんやさしいIllustratorアイコン作成練習帳 (自分で選べるパソコン到達点)
いちばんやさしいIllustratorアイコン作成練習帳 (自分で選べるパソコン到達点)
おすすめ平均
stars楽しくてあっと言う間に読み終える

Amazonで詳しく見る

↓この記事が役に立った!思った方は
下のバナークリック1票おねがいします!!↓


にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

フリー素材「取り放題.com」ブログ > サイト制作の小技 > あっという間!favicon(ファビコン)の作り方

更新情報配信中!
スポンサードリンク

おすすめWEBサイトリンク
スポンサーサイト

ページトップに戻る