ブラウザで表示されるアイコン(Favicon)を変更

X-Icon Editor

更新日

投稿日

ブラウザでウェブページを見た時にタブやURLのところに表示されるアイコン(Faviconと呼ぶそう)がああるのだけれどそれを変更した。

ここのブログはGoogleのBloggerを使っているのだけどデフォルトではオレンジの中にBの白い文字が書いてあるもの。

Bloggerのファビコン
Bloggerのファビコン

これを自分のものに変更。
まずはアイコンを作らないといけないので無料で使えるWebサービスがあったのでそれを使った。

X-Icon Editor

ここでえっちらおっちらアイコンを作成。
最初はトランプのマークなんかにしようかなとも思ったけど難しいのでシンプルに「H」に。
最初はもう少しおしゃれな筆記体のHにしようとしたけど曲線が難しいのでこちらも諦めて直線のゴシック体とした。

表示されるサイズによって4種類ほど作れるのだけどそれぞれを作成してみた。

バックの色は

WEB用カラー見本 ソート機能付き

で探した。

X-Icon Editorの画面
X-Icon Editorで作成している画面。
とてもシンプルな操作で簡単だった。

これを「Export」して.icoをダウンロードします。

ここからはBloggerの設定で

ダッシュボード→レイアウト→左上のファビコンの編集をクリック。

ポップアップで「お気に入りアイコン(ファビコン)を設定」という画面が出るので「ファイルを選択」ボタンをクリックして先ほどダウンロードした.icoファイルを選択して「保存」ボタンをクリック。
以上で完了。
キャッシュのせいですぐには変わらないかもしれないけどしばらくすると変わります。
以下のようになった。
いかがでしょうか?
マジシャンひろしつちやの新しいファビコン
新しいファビコンになったブラウザ(Chrome)のタブ。