Info kplace.plala.jpから移設しました

faviconの設置

作成日: 2019/04/09
■目的
Webサイトのシンボルとなる(favicon:favorite icon)を作成/設置します。
使用したツールはphotoshopとfavicongeneratorです。

■画像
png.jpgなどの画像をfaviconに使用でき、サイズはブラウザやOSにより異なります。
IE タブ                                        ;16 x16pix
IE9 ピン留め                           ;24 x24pix
Chrome、Firefox、Safari    ;  32 x32pix
WindowsのWeb ページアイコン    ;48 x48pix
高解像度 WindowsWeb ページアイコン    ;64 x64pix
apple-touch-icon                ;180 x180pix
以下はphotoshopで作成した64ｘ64のpngサンプル画像です。
favicon image
■favicon.ico
複数faviconファイルを格納できるフォーマットで一般にこのファイルが利用されます。
favicon.ico.ファイルを作成するには作成した画像をICOに変換するツールを使用します。
以下は今回使用したツールfavicongeneratorで変換出力は32x32の画像です。
favicon generator
ファイル名をfavicon.icoにしてWebサーバーのDocumentRootに設置します。
必要ならWebページの<head> セクションに以下を追加します。
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
■apple-touch-icon.png
iOSやAndroid OSのスマホでサイトをホーム画面に追加した時に表示されるアイコンです。
180x180のサイズで作成したファイルをWebサーバーのDocumentRootに設置します。

■確認
ChromeでキャッシュをクリアしてGoogleメイン画面にアクセスして結果を確認できます。
IE11/Edge/Firefox/Safariなども同様です。
favicon
■関連サイト
「favicongenerator」 のサイトはこちら

■結果
Photoshopで作成した64x64のpngアイコン画像をICO変換してWebサイトに設置しました。
なお今回はWebページの<head>セクションへのコード追加は行っていません。
　 blog 　　 MovableType