スマホでの検索が増え、目立つところに表示されるファビコンはとても重要となりました。
ワードプレスで構築されたサイトでは、ファビコンにワードプレスのデフォルトの「W」のロゴマークが表示されてしまいます。
これでは手がかかってないように思われてしまいますし、ブランディングにも響きます。なるべくオリジナルのものに変更するようにオススメします。
スマホでのファビコン表示
検索一覧
ブックマーク一覧
ブックマークにも大きくファビコンが表示されます。
パソコンでのファビコン表示
タブ
画面上部の「タブ」と呼ばれるところに表示されます。
お気に入り一覧
ブックマークバーやお気に入り登録をすると、ホームページ名の前にファビコンが表示されます。
パソコンの検索一覧にもしっかりと表示されます
ファビコンを表示させるプラグイン「Favicon by RealFaviconGenerator」
WordPressサイトでファビコンを設置するにはプラグインを使用すると便利です。
WordPressはインストールしているけどほとんど動かしてないサイトや、TOPページだけのLPにもきちんと反映されました。
テンプレートによってはファビコンを設置する項目がデフォルトで装備されている場合もありますので確認してみてください。
Favicon by RealFaviconGenerator
プラグインをインストールし、有効にすると、外観のところに「Favicon」という項目が表示されますので用意したpng画像を適応してください。
htmlページには適応されません
当然ながら、htmlページには適応されません。
htmlページとWordpressを混合でサイトを構築している場合、htmlページには手動でソースを追加しなければなりません。
metaタグとしてhead内に記述します。
<link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png">
まとめ
- ワードプレスで構築したサイトのファビコンはプラグイン「Favicon by RealFaviconGenerator」を利用すると便利です
- htmlで構築したサイトは手動でファビコンを設置しましょう。サイズもそれぞれのデバイスに合わせて用意する必要があります。
