|
図のように「16×16」「24×24」「32×32」「48×48」を含むアイコンを作成してください。
ファイル名 「favicon 」。ファイルの種類 「アイコン(.ico)」で保存します。
[ 解説用A ] ショートカットの画像の変化の為に、あえてサイズごとに画像を変えています。 | [ 解説用B ] | [ 基本形 ] | |
IE 9のピン留め機能は、 「 24×24 」を使います。 必要なら作りましょう。 |
[ 解説用A ] 実際に解説用ホームページのファビコンに使用しています。
[ 解説用B ] ファビコンの置き場所は、どこに置いても構わないことを説明するためのファビコンです。
[ 基本形 ] 各サイズごとに画像を作ります。クッキリとしたアイコン(ファビコン)になります。
ページ先頭 トップページ サイトマップ Greenfish Icon Editor Pro の使い方 応用編
ファビコンの設置 (設定)
|
HTMLソースの<head>の下に、反転している文字列を貼り付けるだけです。
「favicon.ico」を一番上の階に置いている場合。基本の方法。 (コピー&ペースト用) この文字列を全てのページに貼り付ける。 |
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> |
ファビコンの置き場所をURLにすると、 http://emoji16x16.syuriken.jp/favicon.ico になります。 |
転送するファイルは「index.html」「favicon.ico」だけです。
「ヘッダー.png 」は、見栄えを整える為に追加で転送しました。
「使わないファビコン」の中には、「(解説用Bの)ファビコン」が入っています。以下の解説の為だけに置いてます。
「favicon.ico」を「使わないファビコン」の中に置いている場合 (フォルダ名は個々で異なるので、解説のみ) |
ファビコンの置き場所をURLにすると、 http://emoji16x16.syuriken.jp/使わないファビコン/favicon.ico になります。 |
このように「16×16」のサイズが表示されました。ホームページを見る
ファビコンの表示は、「Internet Explorer」「Mozilla Firefox」「Google Chrome」「Opera」にて確認しました。
ページ先頭 トップページ サイトマップ Greenfish Icon Editor Pro の使い方 応用編
ショートカットの画像の変化 |
「お気に入りに追加(ブックマーク)」のショートカットの画像。
「お気に入り」では、「16×16」の画像が表示される。
「デスクトップ」では「32×32」の画像が表示される。
「マイドキュメントの並べて表示」では「48×48」の画像が表示される。
ページ先頭 トップページ サイトマップ Greenfish Icon Editor Pro の使い方 応用編
ファビコンが表示しない場合の問題点 |
★ ローカルでの確認は、ファビコンが表示されない場合もある。インターネットを経由して確認すること。
★ キャッシュに「ファビコンが表示されていない時の状態」が残っていて、それを読み込む場合。
「ブラウザを再起動する」か「キャッシュを消去する」などで最新の状態を読み込んで確認する。
ページ先頭 トップページ サイトマップ Greenfish Icon Editor Pro の使い方 応用編
Copyright © 2024 emoji 16x16 All Rights Reserved. |