2019/06/04
やはりファビコンは欲しいですよね。
とても簡単に作成・設置できます。
ファビコン用の画像を作成
下のように『16x16』『32x32』『48x48ピクセル』の画像を用意します。先に『48x48』を作成して複製を32と16に縮小する方がキレイです。
ファビコン作成
一緒にやってみましょう。
『ファビコン favicon.icoを作ろう!』さんのサイトへ GO!
下図をクリックして『ファビコン favicon.icoを作ろう!』さんのサイトへ行きます。
画像を選択して favicon.ico 作成
ピンク枠の様に『画像ファイルを選択』をクリックして作成した画像を選びます。他の２つのサイズも同様に選びます。
完了したらfavicon.ico 作成をクリックします。
プレビュー確認後 ダウンロード
画面が少し変わりましたね。広告を省略していますが、少し下にスクロールすると『プレビュー』が確認できます。
「あーーー。これがファビコンかー。」そうです、そうです。＾＾v
確認したらダウンロードをクリックします。
ピョイっとダウンロードフォルダに『favicon.ico』が出現します。
HTMLに記述
ゲットした『favicon.ico』は、使用したいテンプレートの『images』フォルダにアップします。
HTML記述
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
HTML記述の追加位置
極端な話、<title>タイトル</title> より下で、</head> までの間に追加すればいいのですが。
後から追加の場合、入れ忘れたページがないかチェックするのに自分でわかりやすい場所がいいと思います。
わたしは『style.css』の上に統一しました。
『ファビコン favicon.icoを作ろう!』さんで作成したファビコンをやり直したいとか、追加のファビコンを作成したい時、ブラウザの戻るボタンや再読み込みボタンを押して、『フォームの再送信』が出た場合は再送信するとエラーになります。その場合は、タブまたはウィンドーを閉じて、新規に『ファビコン favicon.icoを作ろう!』ページを出せば、OKです。
実際には、あまり必要無いと思いますが、サイト内のページによって違うファビコンを設置したい時は、『images』フォルダではなく、『images2』や『fav2』のような別のフォルダに、ゲットした別の『favicon.ico』を入れれば使えます。その場合は、『HTML記述』の『images』も変更してあげて下さい。