イラストレーターのアトリエノート

イラストレーター城谷俊也のブログ。水彩画イラストで描いた作品や仕事実績をご紹介!

ファビコン(Favicon)の設置方法〜超初級編〜

0   0

■ファビコンとは?
いつまでもweb初心者の私ですが、それでもいろいろ試行錯誤をして
自身のサイトをいじったりしています。

今回は、新サイトを作った勢いで『ファビコン』なるものの
設置を試みました。

『ファビコン(Favicon)』とは

フェイバリット アイコン(Favourite + Icon = Favicon)の略。
ブラウザのタグとかブックマークのサイトタイトルの頭に
付いている小さなマークの事です。

ファビコン画面

オフィシャルなサイトにはほとんど付いているけど
個人サイトだと意外に付いてなかったりして
つまり、これがあるとオフィシャル感やブランド感が
アップするのではないか?というモクロミで今回設置しました。

まあ、ブックマーク一覧などでもガゼン目立ちますし
つけてソンはないかと思いましたので、私のたどった方法を
簡単にご紹介します。

1 ファビコンを作る
Photoshopなど画像ソフトでファビコンをデザインします。
作るときのサイズはそこそこ適当な感じで、正方形であればOK!
最終的に16 ×16 pixの大きさになるので、細かい絵柄は潰れてしまいます。

ファビコッマーク

今回は、こんな感じで作りました。
魚屋のマークではありません。
最近手がけている『キカイ魚』という、機械の魚を描いた作品を
あつめたサイトのマークです。

ミュージアムロゴ

ご覧のように、通常大きく使っているときより
構造を分かりやすくしました。

2 ファビコン用のファイルにする
デザインが出来たら、これを 32 × 32 pix のサイズに縮小します。
実際に表示されるときは16 ×16pix なのですが、このくらいの大きさの方が
画像がつぶれにくいとか…(専門的な解説は、専門的なサイトでご確認下さい)

これを、「JPG」「GIF」「PNG」のファイル形式で保存した後
拡張子を『ico』に変えます。

『 favicon.jpg 』というファイルなら『 favicon.ico 』に
名前を打ち直します。

で、これをwebサイトが保存されているフォルダにいれます。
(初心者っぽい言い回しでスミマセン)

トップページのタイトル頭に表示する場合は、
そのページと同じ階層にファビコンファイルを入れておくと良いです。

3 HTMLにタグを書き込む
以下ののタグを表示するページの~内にペーストします。




   <link rel="shortcut icon" href="●●●" />


●●●の部分は、さっき作ったファビコンのファイル名を入れます。
『 favicon.ico 』なら



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



となります。

で、このページとファビコンファイルをアップロードすればOK!

いかがでしょうか?表示されましたか?
まあ、詳しくは『ファビコン 設置』で検索したら
いくらでもやり方は出てきますが、今回は超初心者的見地から
やり方をご紹介しました。
何かのお役に立てれば幸いです。

ちなみに、今回作ったサイト
『キカイ魚ミュージアム』は、こちら>> kikaigyo.com




 

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://shirotani79.blog76.fc2.com/tb.php/384-5aec79f5
該当の記事は見つかりませんでした。