webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

favicon

  • faviconはpcサイトを作るうえで必須。
  • faviconがないと、ブラウザの表示が遅くなる。
  • faviconには専用の拡張子「.ico」を使う。
  • .ico ファイルには複数のサイズのデータを格納できる。
  • photoshop CCだと、プラグインを使って「.ico」に変換できる。
  • cc以外では、変換用のツールを使う。
  • http://ico.bradleygill.com/index.php
  • 「browse」ボタンで変換したいファイルを選ぶ。
  • 完成したアイコンをクリックして、ダウンロードする。
  • ファイル名を書き換える。通常は「favicon.ico」。
  • 「include large icon」にチェックすると48px*48pxのアイコンが作れる。

f:id:ohta-felica:20160629173553p:plain

  • 32px*32pxのサイズを用意しておけば、必要十分。
  • 形は自由。不要な部分は透過にする。
  • 小さいサイズの表示は、ブラウザが変換して対応する。
  • 現在、一般的には16px*16pxで表示されることを念頭に、デザインを考える。
  • コントラストを上げる、細かな線を使わない、など。
  •  faviconはindexと同じ、最上位の階層に保存する。ブラウザは、とにかくfaviconを探すので、すぐに見つかるところに置いておく。決して、imgフォルダに入れない。
  • 同じサーバーにある他のフォルダにもfaviconを用意しておかないと、ひとつのファイルを勝手に共用されてしまうので注意。
  • <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
  • 記述の後半は「IE」対応ということでした。

f:id:ohta-felica:20160629174122p:plain

f:id:ohta-felica:20160629180017p:plain