faviconをつけてみよう! | 黒い仕立て屋

黒い仕立て屋

はんぺんが黒い町の人間が綴ってます。

faviconを設定したとき、探し方が悪かったのか現在のアメブロでFaviconを設定する方法が載った丁度いいサイトが見つからなかったのでココにやり方をメモ。


手順1.

アイコンにしたい画像を選びましょう!自分の場合は(面倒だかr)前に作ったニャバターのドット絵を使うことにしました。

手順2.
用意した画像を.ico形式の16×16サイズに加工してくれるサイトがあるのでそちらにアクセス!
.ico形式のfavicon用画像作成サイト 「favikon」


favikon 手順3.
「参照」をクリックし用意した画像を選択。そしてLoad Imageをクリックすれば右側に選んだ画像が表示されます。

手順4.
画像の中からアイコンにする範囲を指定。灰色のエリア内がアイコンとなります。
範囲を決定したら「Capture & Preview」をクリック。アイコンサイズになった画像が表示されるので良ければ「Download Favicon」をクリックし保存します。

<アイコンをアップロードしよう>
保存したアイコンはアップロードする必要があるのですがアメブロでは.ico形式の画像はアップロードできません。なので別のアップローダーを使用する必要があります。(自分はfc2 のアカウントがあるのでそちらでアップロードしました。)
保持期限付きアップローダーを利用すると期限が切れた後はアイコンが表示されなくなるので注意。


favicon 手順5.

アメブロのトップページからカテゴリ「ブログ」→「サイドバーの設定」→「フリースペースの編集」と進みます。
そうしたら編集スペースに、
<link rel="shortcut icon" type="image/x-icon" href="アップロードした画像のアドレス" />
を貼り付け「保存」を押せば完成です。



しっかりfaviconが表示されるか確認しましょう。(一度キャッシュを削除してからブログを確認してください。)





ちょっとの手間でも大分イメージは変わります。
オリジナルのアイコンを使用して個性を出していきましょう!(`・ω・´)