[WordPress]サイトアイコン(ファビコン)を設定する方法
公開:2019.09.28 更新:2019.10.02

こんにちは、木彫り猫です。

唐突ですが、このサイトにはファビコンが設定されていません。

ファビコンというのはブラウザ上でページを開いたときに表示されるあれです。絶対に必要!という訳ではないですが、あった方が見つけやすかったりイメージが湧いたりしますし、ぜひとも付けておきたいものですよね。

WordPressでは簡単?

いろいろ調べていると、やはりlinkタグとかmetaタグで設定する感じなようです。

それぞれの表示環境に対応しなきゃだから、画像サイズは複数必要なのか?とも思いましたが、.ico拡張子ファイルを作ると勝手に画像サイズを用途に合わせて伸び縮みしてくれる模様です。

これはWEB上のツールを使えばPNGなどの標準ファイルから.ico形式に変換してくれるっぽいです。

例.「アイコンコンバータ」など

ん?でもWordpressの場合って…….

なんとデフォルトで機能が付いていました。(ボケ

WordPressなら1画像のみ!

[カスタマイズ]から[サイトアイコン]の欄で編集が出来ます。

metaタグとか複数サイズとか気にしてたのは時間の無駄でした…….。ちなみに現在のファビコンサイズは700px×700pxが主流のようです。

ぜひ、Wordpressをお使いの方はこちらの方法でやってみてください。

HTMLでの設定方法

ここからは調べてついた予備知識でmetaタグやlinkタグを使うファビコンの設定方法について記述していきます。

使用するコードは以下の通り

<!-- ファビコン -->
<link rel="icon" href="(ico形式ファイル)">
 
<!-- スマホ -->
<link rel="apple-touch-icon" sizes="180x180" href="指定サイズのPNG,JPGなど">

Windows向けアイコンを無視する場合は、上記のコードのみで大丈夫です。

Windows向けアイコンを作成したい場合、下記のコードを追記しましょう。

<!-- Windows用 -->
<meta name="application-name" content="{サイト名}"/>
<meta name="msapplication-square70x70logo" content="指定サイズのjpgなど"/>
<meta name="msapplication-square150x150logo" content="指定サイズのjpgなど"/>
<meta name="msapplication-wide310x150logo" content="指定サイズのjpgなど"/>
<meta name="msapplication-square310x310logo" content="指定サイズのjpgなど"/>
<meta name="msapplication-TileColor" content="色"/>

まだWindowsのファビコンには障害も多いようで、複数のサイズを作成しなければならないようです。

結果的に、WordPressを利用する方がいろんなことが楽になっているように感じますね。

参考記事

おすすめ商品

[基本を学ぶにはこれ]
参考にしているWordpress教本

[テーマ作成のお供に!]
WordPressデザインレシピ集

コメント

内容をご確認の上、送信してください。