皆さんはWEBサイトにfavicon(ファビコン)を設置していますか?デバイスの多様化により色々なサイズのファビコンを用意しなければならない..なかなか手間がかかりますよね。手間をかけたのに表示されない!なんて壁にぶつかっている方も多いかと思います。RealFaviconGenerator」をご紹介します!そもそもファビコンって何!?という方もご安心下さい。誰でも簡単にファビコンの設置が出来るので、ぜひ活用して頂きたいです。FaviconGeneratorをインストール3.まずは画像の用意!4.faviconの設定方法5.まとめ1.favcon(ファビコン)とは?Wikipediaでは以下のように説明しています。favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。参考:Favicon-ウィキペディアファビコンとはWEBサイトを開いた時にタブに表示される小さなアイコンのことです。ブックマークをした際にもこのアイコンが表示される為、ユーザーがお気に入り一覧から目当てのページを探す際の目印にもなります。ファビコンはページを判別するための目印になる!リピート率の高いWEBサイトを目指すのであればユーザーの記憶に残りやすいファビコンの設置は必須です。2.RealFaviconGeneratorをインストールプラグインを使わずにファビコンを設置するとなると、ブラウザ上の表示だけでなく、iPhoneやandroid端末でブックマークされた時のアイコン、その他様々なデバイスにむけて対策しなくてはなりません。RealFaviconGenerator」です。RealFaviconGeneratorで検索をしてこちらをインストールして下さい。3.まずは画像の用意!インストールをしたら、まずは画像の用意です。ピクセル以上の正方形を用意しましょう。画像ファイルの拡張子は「png」もしくは「gif」、背景を透過させたものが望ましいです。illustratorやPhotoshopを使用するか、無料で利用できる画像編集・加工ソフトがありますので、画像をpngもしくは、gif形式で保存して下さい。4.faviconの設定方法プラグインをインストールすると、「設定」に「Favicon」が出てきますので、こちらを開いてください。Faviconをクリック。Libraryをクリックするとメディアライブラリが開きますので、ここで先ほどファビコン用に作った画像をアップロードし、選択してください。faviconをクリック。するとファビコンの細かい設定画面に切り替わります。iPhoneやAdroid端末でホーム画面にブックマークを追加したときの表示設定を行いましょう。2で背景の色を設定出来ます。3のつまみでmarginのサイズを調整できます。お好みにカスタマイズしてみて下さい。赤く囲った部分でアイコンの背景色がカスタマイズ出来ますので、こちらも同じように好みのものに設定して下さい。最後にページ下にあるこちらの設定。title.を選択して下さい。Siteに入力したタイトルが、ホーム画面にブックマークを追加した時のタイトルになります。code」をクリックして終了です!ご覧の通り、しっかりファビコンが反映しました。5.まとめWEBサイトを制作する上で躓きがちなファビコンの設置このプラグインを利用すれば簡単に設置することが出来ます。デバイスごとに画像サイズを分けて作る必要もありませんので、手間もかかりません。思い立って畑違いの業界からWEBの世界へ転職。独学でコーディングを学び、現在はWEBデザインを担当。デザインよりもコーディングが好き!カレーと餃子とじゃがりこ(サラダ)のローテーションで生きています。