ポテト油のうぇ～ブログ [オンライン]ファビコンの設定

趣味、リアル、ネット上とかの何かを載せるクソブログ

[PR]

2024/05/03 (Fri)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

｜

2010/02/04 (Thu)

ホームページ、サイトのアイコンをオリジナルにする方法（ファビコンの設定）を紹介します。
また、ブログへの設定は、各ブログのヘルプで紹介されてるはずですので
そちらをご覧ください。

まず、サイトがある事とFTPが使える事を前提に進めます。

①アイコンの作り方
windows付属のペイントで
『１６×１６』　と　『３１×３１』のアイコンを作っておく
保存は、GIFかPNGで保存する。
GIFは、画質が劣化してしまうが
PNGは、さほど劣化しないらしく　保存はPNGが良い。
保存名は判りやすいように『16×16』と『31×31』にすると良いです。

アイコンを二つ作ったら
『＠icon変換』というフリーソフトをダウンロードして使います。
（『＠icon変換』はこちらからダウンロード出来ます。リンク切れの場合は、検索してみてください。）

＠icon変換ソフトを起動したら
さきほど作ったアイコン（１６×１６と３１×３１）を＠icon変換ソフトにドラッグ＆ドロップするか
『素材ファイルを開く』から選択する。
次に　シフトを押しながら　二つのアイコンを選択して
『マルチアイコンに保存』
この時に保存名は　『favicon』（半角英数字）にする　拡張子は.icoになる。

これでアイコンは完成。

②設置の仕方
トップページがフレーム未使用の場合
index.htmlのページのソースを開き
<HEAD>
</HEAD>
の間に<link rel="shortcut icon"href="favicon.ico">を追記する。

トップページがフレーム構成の場合
index.htmlのフレームページのソースを開き
<HEAD>
</HEAD>
の間に<link rel="shortcut icon"href="favicon.ico">を追記する。

例
「<HEAD>

<link rel="shortcut icon"href="favicon.ico">
</HEAD>」

例のように</HEAD>の上に追記すれば問題なくアイコンが表示されます。

同じフォルダに『index.html』と『favicon.ico』があるようにする。

FTPで『index.html』と『favicon.ico』をアップロードすれば
以下のようにアイコンが表示される。

（画像は、ポテト油のサイトのファビコンです。）

ただ、反映されるまで時間がかかるようです。
数時間経っても反映されない場合、原因は、いくつかあるようですが
ブラウザによっては、『ファビコンを取得する』にチェックが入ってない場合、表示されません。
それでも表示されない時は、もう一度やり直すのが良いかもしれないです。
インターネット一時ファイルを削除してからやると良いとか、あったんですが
ちゃんとした解決策が見つからなかったので、なんとも言えないですが
上記の手順通りなら表示されるはずです。

追記：
ただし、以前のブックマーク、リンクなどでサイトに飛んできた際に
アドレスの最後に『index.html』の表記がなければ、ファビコンは表示されないようです。
アドレスの語尾に『index.html』を追記して飛ぶと、ファビコンが表示されると思います。

以上。