2013年10月25日
ファビコンを設置
おいおい、ファビコンって一体なんだよッ！って声が聞こえてきそうなのでファビコンについて簡単に説明をします。
【Ｆavicon 】（読）ファビコン
FAVorite ICONの略で、ウェブブラウザのブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに現れることのある、ウェブサイト独自のアイコン。
独自のico形式の画像ファイルを用意して、ページのあるディレクトリかその上位のディレクトリに「favicon.ico」というファイル名で置くか、あるいはページのhead要素内に
<link rel="shortcut icon" href="icoファイルのアドレス">
と書くことによって指定することができる。もともとはInternet Explorerの独自拡張として実装されたが、FirefoxやSafari、Operaなど他のブラウザも追従したので、事実上ウェブにおける標準のような扱いになっている。
上記がネット検索して、はてなキーワードの説明文になっています。まぁ簡単に説明するとホームページをお気に入りに入れた時やホームページのアドレスＵＲＬ前にトレードマークみたいなものが付いている、あのマークのことです。
作り方は至って簡単。
ファビコンの素材となる上の基画像を16x16 , 32x32 , 48x48 , 96x96 , 128x128 等の複数のを用意する。これはＰＣだけでなく、スマートフォンやタブレット、さらにブラウザによって表示が変わるため環境表示に合せた複数サイズの画像が必要になります。
そして、無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。 （←直リンク）の様なサイトがありますので、自動でfavicon.icoを作成してくれます。また、基画像をファビコン用画像に縮小してくれるサイトも多数ありますので、ぜひ検索してみてください。
今回サウスリッジホームのマークは自動作成サイトで作るとグラデーション部分が潰れたり、線の細い所のドットが荒く表示されたりしたので、ちょっと手間でしたがFireworksで複数のサイズを作成しました。
出来上がったfavicon.icoをホームページサーバーにＵＰLOADして、ホームページの<HEAD> 〜 </HEAD> に挿入するだけ。ねッ、かんたんでしょ？ 今回ファビコン作成や設置方法について かなり割愛しましたが、本気で設置を考えている方は、ネット上にはもっともっと詳しく書かれているサイトが沢山ありますのでぜひそちらを参考にしてみてください。そして、ファビコンが入るだけで、ちょっとですがホームページのクォリティーが上がった様な、そんな気分になります。
上はスマートフォン用のドルフィンブラウザ（Android用）で表示されたファビコンです。ホームページを作った事がある人ならば、基画像さえ用意すれば15〜30分もあれば簡単に作れます。ぜひトライしてみて！
じゃ！また。
