WordPressでretina対応のファビコンを設定いたしました!

 
キャプチャ

今頃ですが、このブログにはちゃんとしたファビコンがないことに気づきました。

 

ファビコンとは、サイトを開いたときに、タブの隅っこに表示されたりするこんな画像のことなのですが。

4495bed8051fcc9fd4ac4bababda36e31 500x287 Wordpressでretina対応のファビコンを設定いたしました!

 

小さいながらも、やっぱり自分のブログだからしっかりと作っておきたいんです。

ただ、最近は高画質ディスプレイがバンバン登場してるから、それにも対応させないといけないのよね。

 

マルチサイズico画像の作成

今まで、というかretinaディスプレイが登場する前までは、16×16の画像を用意するだけで事足りました。

世界にあったほとんどのディスプレイとブラウザが、それで十分だったのです。

 

しかし、技術の進化によってもはや16×16では汚すぎ、小さすぎで、とうとう新しいファビコンが必要になってきました。

 

そこで、マルチサイズのico画像を作ります。

 

ファビコンは基本的にicoという画像形式を使いますが、なんとこの形式には複数のサイズの画像を含めることができちゃうんですね。

そこで、いろいろなサイズの画像を作成して、それをまとめて一つのファビコンにします。

 

Bradicon!を使う

自分で多くのサイズを作るのは面倒なので、Bradicon!というサイトを使います。

 

正方形の画像を用意して、アップロードすると、自動的にさまざまなサイズの画像を作成してくれます。

 

favicon1 500x364 Wordpressでretina対応のファビコンを設定いたしました!

ファイルを選択し、下のほうのでっかい箱を押すとicoが出来上がるので、真ん中に出てきた画像を押すとダウンロードできます。

 

これで、ファイルの準備は完了です。

 

プラグインでicoを設定

次に、画像をファビコンに設定しないといけません。

 

WordPressのプラグインの検索画面でFavicon Rotatorを検索し、インストールします。

 

するとサイドバーにFaviconのメニューが出るので、クリック。

bar 114x500 Wordpressでretina対応のファビコンを設定いたしました!

 

画像をアイコンに設定します。

seticon Wordpressでretina対応のファビコンを設定いたしました!

 

これで、完了です。

 

66c19942ab4ba346fdb64ccc04cde373 500x319 Wordpressでretina対応のファビコンを設定いたしました!

 

 

この青色がいいね。

 

 

You may also like...