TagsArchives
favicon

まだ設置してないの?サイトの第二の顔、faviconを設置しよう

2019.07.07

クハク

faviconとは?

favicon→favorite iconの事で、webページを見たときにタブに付いてる小さいアイコンや、ブックマークをした時横に付いてるアイコンを見たことがあると思う。
サイトのシンボルマークとして、また、サイトイメージに効果のあるfaviconを設置してみよう。

faviconを制作

まずはじめに、favicon制作をしよう。必ず正方形で、サイズは260*260(px)以上必要だ。最近は推奨サイズが512*512(px)以上になっているようなので 私はサイズを700*700(px)、Illustratorを使用し、ping形式で作成した。
作成するfaviconはとても小さくなるので、シンプルなデザインがオススメ。

一括で画像サイズを自動生成する

以下のサービスを利用し、一括で画像を自動で生成した。
様々なファビコンを一括生成。favicon generator
画像ファイルを選択→任意の画像を選択→ファビコン一括生成の順に、しばらくすると沢山の画像が表示されるので、ファビコンダウンロードボタンをクリック。
faviconz.zipファイルがダウンロード出来たら、展開しよう。

WordPressにfavicon設置

WordPressは非常に簡単に設置が可能。びっくりするくらい簡単だったので、未設置にしておくのは勿体無い。是非設置しよう!
先程一括生成したfaviconから、512*512(px)のサイズを使用する。
WordPress管理画面→外観→サイト基本情報をクリック。”サイトアイコンの画像を選択”または”画像の変更”をクリックし、先程のfaviconの512*512(px)サイズをアップロード。
サイトアイコンのプレビューが表示されれば成功。”保存して公開”をクリックで完了。

favicon設置のまとめ

  • 必ず正方形で作成しよう
  • サイズは推奨サイズより大きめにしよう
  • デザインはシンプルにしよう


参考にしたサイト
【2019年版】Webサイトのファビコンや各種アイコンの正しい設定方法
【2019年版】ホームページのタブ画像(favicon/touch-icon)作成と設定方法まとめ
WordPressでファビコンやアイコンを設定する方法

Category:Web
Tags:,