WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Favicon

Faviconとは

ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
スマートフォン等でお気に入りした時やホーム画面に追加した時もFaviconの画像が表示される。

ページを開くとファビコンを読み込みに行くので、設定しておいた方が読み込みが早くなる。


pngやgifでも表示できるが、IEでは.icoファイルでないと表示されないのでジェネレーター等で変換して設定しておく。
icoファイルを作成してくれるWEBアプリ
Bradicon
http://ico.bradleygill.com/index.php

サイズは基本的にPCでは16px×16pxだがretinaディスプレイ用とスマートフォン用に別に画像を用意する。
今回は
PC用のサイズ  16px×16px
retinaディスプレイ用  32px×32px
スマートフォン用 144px×144px
としておく。

作り方

144px×144pxでFaviconを作成し、touch-icon.pngという名前で保存する。(スマートフォン用)
32px×32pxのサイズにし、pngで保存する。
先ほどのBradiconで.icoファイルに変換する。(この時小さいサイズも一緒に作られるので16px×16pxのファイルは作らなくて良い)

記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>favicon</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="touch-icon.png">
</head>

Faviconはindexと同じ階層に置く。(imgフォルダと一緒にしない)
スマートフォンでホーム画面に追加すると角丸になっているので角丸にしない方が良い。文字も四隅に置かないようにする。
Basic認証がかかっているとIEiOSで表示されないことがある。

rootディレクトリにapple-touch-icon.pngという画像を置いておくと特に指定しなくてもiOSで反映される。

参考サイト

itexp.hateblo.jp