■ Webデザインを学ぶ【初級/後編】,  ◎ 様々な演出効果,  ● column

favicon(ファビコン)を設定する

ファビコンとは


▶︎ 資料を見る

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

引用先:https://ja.wikipedia.org/

お気に入りアイコン
favicon.ico(ファビコン)とは、ブラウザのアドレスバーやお気に入りのリストに表示される小さなアイコンのことです。

注意点

  • 正方形であること。
  • 最終的には16×16で表示されるため、非常に小さい。
  • 32×32で制作し、縮小させるほうがよい。
  • GIFやPNG形式等で保存し、ファビコン用の形式に変換する。
  • 拡張子は、.ico
  • Photoshopでは、変換できない。(2017年現在)

変換方法

Phtoshopに、変換専用のプラグインを入れる。
ICO ファイルフォーマット・プラグイン
http://www.telegraphics.com.au/sw/product/ICOFormat
変換してくれるサイト上で作成した形式(png)のものを参照し、変換させる。
アイコン コンバーター
PNGからICOへのコンバーター
ファビコン作成専用サイトも用意されている。
favicon.cc

※上記いずれかの方法で、変換する。

設置方法

  • HTMLの内に、ファビコン用のタグの記述をする。
  • ファビコンファイルをHTMLと同様にアップロードする。

ファビコン用のタグの記述

head内に記述する。
[code]<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>[/code]
ブラウザの種類やバージョンによって記述が若干異なりますので、注意しましょう。



本日、こちらのサイトも授業の中でアイコン設定させていただきました^^(2017年11月29日ニクの日)