アイコン

みなさんこんにちは。takatoです!皆さんはファビコンというのをご存知ですか?webデザインの仕事をしているとファビコンのデザインやweb上での設置業務を行うことがあります。今回はファビコンについてとワードプレスやコーディングでの設置方法を紹介したいと思います。皆さんの参考になれば幸いです。

ファビコンとは?

ファビコンとはwebサイトのシンボルマークのことで、タブに丸い形のしたアイコンデザインがあるかと思います。


グーグルの場合、Gのカラフルなデザインがファビコンとして採用されています。このようにタブの左側にあるアイコンデザインのことをファビコンというのです。

ファビコンが設定されていると、利用者がどのサイトを見ているのか瞬時にわかります。さらにそのファビコンがサイトのシンボルデザインとなるため、ブランディングにも繋がります。もしファビコンを設定していない方は、設定をおすすめします。


ファビコンの設定方法(ワードプレス)

ワードプレスでのファビコン設定方法を紹介します。やり方はとても簡単なので皆さん是非やってみてください。

まずワードプレスの管理画面に入ります。メニューバーにある「カスタマイズ」を選択してください。次に「サイト基本情報」を選択して、「サイトアイコン」の部分に画像を挿入すると、ワードプレスでのファビコン設定が完了します。その際512ピクセル以上の正方形の画像を選択するように気をつけてくださいね!


ファビコンの設定方法(コーディング)

続いてコーディングでのファビコン設定方法を紹介します。imageファイルの直下にファビコンにしたい画像を入れます。拡張子はpngやjpegで構いません。そしてhtmlファイルにファビコン設定のコードを書いていきます。

headタグの中にlinkタグを作成し、rel属性は”icon”、type属性は”image/x-icon”、href=”image/画像のファイル名”としてコーディングします。画像ファイル名をicon.pngにした場合、下記のコーディングになります。


<head>
<link rel=”icon” type=”image/x-icon” href=”image/icon.png”>
</head>


このようにコードを記入することで、コーデイングでのファビコン設定を行うことができます。


最後に

今回はファビコンに関する説明とワードプレス・コーディングでの設置方法を紹介しました。ファビコンがあることで、タブ上でのブランディングを行うことが出来ます。自分のサイトにファビコンを設定していない方がいましたら、是非設定を行ってみてください。最後まで見て頂きありがとうございました。

僕はweb制作に関する勉強をテックキャンプで行いました。テックキャンプはプログラミングとデザインに関して学ぶことが出来、質問回数が無制限となっております。今無料体験レッスンを行っているそうです。もし興味がある方は、下記から申し込みをしてみてください!

テックキャンプの無料カウンセリングに申し込む!



投稿者

takato

大学卒業後大手マーケティングリサーチ企業に就職。その後未経験でWEBデザイナーに転職。デザインとプログラミングとマーケティングの領域で個人のスキル向上を目指して頑張っています!