初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML fabicon(ファビコン)を作成する

ファビコンの作成方法を記述します。

favicon(ファビコン)とは:ブラウザのタブに表示されている小さな画像です。
f:id:bellsmarket:20150313215928p:plain:w400
ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称です。
favorite icon(フェイバリット・アイコン:お気に入りアイコン)を略した名称です。

faviconのサイズですが、基本的には16px×16pxですが、OSやデバイスによって様々ですべてに対応させるとなるときりが無くなってしまうので、今回は

PC用のサイズ  16px×16px
MacSafari用  32px×32px
スマートフォン用 144px×144px

の3種類のみに限定します。

まず一番サイズが大きなサイズの144px × 144pxの画像をPhotoshopで作成します。
作成したらWeb用で保存します。

続いてpngデータをicoデータ変換します。
こちらで変換が出来ます。

ico変換サイト

変換したらクリックしてダウンロードします。
f:id:bellsmarket:20150313215932p:plain:w400

続いてファビコンを組み込む為にHTMLを記述します。
IEのVerによって多少変わってきますが、
今のところIE10以下にも対応させるには以下の記述がベターだと思います


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Faviconを表示させる</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
<link rel="apple-touch-icon" href="touch-icon.png" />
</head>

f:id:bellsmarket:20150313215935p:plain:w400


また、icoファイルは他のデータと比べ,キャッシュが強い残る傾向があるので、
新しいfaviconに変えて反映されない場合には、ブラウザーのキャッシュをクリアすると改善するようです

topへ戻る