ブログのあれこれ

【備忘録】ブログにアイコン(ファビコン)を10分で設置する方法

WordPressで作成したブログをブックマークした時や、ページを開いた時タブに表示されるアイコン(=通称:ファビコン)の設置方法を解説します。

デフォルトのままだと寂しいなと思いつつ、ずっとそのままにしていたのですが、調べてみたところ結構簡単な作業でさくっと設定できたので参考にしてみてください。

※因みに記事投稿時はSimplicityのテーマを使用していましたが、2020年4月16日時点の現在ではJINに変更しています。

アイコン(ファビコン)の設置方法

①設置画像を用意

お好みのデザインで、ファビコン用の画像を作成します。

実際に表示されるとかなり小さいものになるので、縮小されてもある程度分かり易いシンプルなデザインがおすすめです。

また作成する際は正方形(512×512~700×700)で作成しましょう。

作成したら、デスクトップ等にファイルサイズを400KB以下で、フォーマットはpng、gif、jpg(jpeg)、bmpいずれかの形式で保存するようにしてください。

②ファイル形式を変換

ファビコンのファイル形式は『.ico』というフォーマットになるので、①で作成した画像を下記サイトで変換します。

ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/

ファビコンはOSやデバイスによってサイズが違ってくるようなので、下記に代表的なサイズを記載しておきます。

16×16 IE(Internet Explorer)のタブ
32×32 Chrome、Safari、Firefox
48×48 Windows

私は48×48で作成しています。

ただ、どのOSから見ても、どのデバイスから見ても、全部きれいに表示させたい!って方は全てのサイズを作成しマルチアイコンとして設定することも可能です。

当ブログでは、一旦上記サイズのいずれかで作成した場合と仮定して解説を進めていきます。

③ブログに画像をアップロード

メディア>新規追加 より画像をアップロードしましょう。

アップロードしたら画像のURLを控えておきます。

④テーマヘッダー(header.php)を編集

外観>テーマエディター からheader.phpを選択して、<head>~</head>の間に下記のコードを追記します。場所はhead間であればどこでもOKですが、心配な方は</head>の直前とかに挿入しておきましょう。

<link rel="shortcut icon" 作成画像のURLを入れる">

画像があれば10分で設置可能

画像さえあれば10分足らずでさくっと設置が出来ちゃうファビコン。

設置するとしないとじゃ、結構サイトの印象が変わってきませんか?

ファビコンがあるだけでなんかちょっとプロ感というかこなれた感というか。ブログのアイコン=シンボルマークとしてブランディングにもなります。

画像の作成に関しては、私はiphoneのアプリでさくっと作成しました。

便利な時代ですね!

ABOUT ME
いもり
ただの映画好きなアラサー。主に映画のことを発信しています。一番好きなのは悪趣味胸糞映画。その他ブログのこと、動画編集のこと、いろいろ書いてます。あとイカれた激辛料理が大好きです。詳しいプロフィールはこちら