【Cocoon】faviconを設定する方法

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

今日は、faviconを設定する方法についてです。

まずファビコンってなに？って方もいらっしゃると思います。
なので、ファビコンの説明から設定方法までを説明していきたいと思います。

ファビコンってなに？

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。

https://ja.wikipedia.org/wiki/Favicon

faviconは設定されているとChromeのタブに表示されます。
↓こんな感じで小さく表示されます

faviconは設定されていなくても問題ありませんが、ブラウザでタブをたくさん開いた時にアイコンのみの表示になってしまいます。

そういった際に見つけやすくなったりするので、設定しておいて損はないと思います。

Yahooも「Y!」のfaviconが設定されていますね。

では、次からファビコンを設定する流れを説明していきたいと思います。

ファビコンを設定する流れ

STEP1　設定したい画像を用意

まず、ファビコンに設定したい画像を用意しましょう。
Cocoonでは、512×512 pxのPNG画像が推奨されています。

STEP2　管理画面から「外観」→「カスタマイズ」へ移動

STEP3　「サイトの基本情報」をクリック

STEP4　サイトアイコンを設定

「サイトアイコンを選択」をクリックしてファビコンに設定したい画像を選択してください。
画像を選択したら上の「公開」ボタンをクリックして保存してください。

設定ができたらタブを確認してみてください。

まとめ

ファビコンを設定する流れでした。
すごく簡単に設定できたと思います。

ファビコンはなくても問題ないですが、設定されているとオリジナリティがあっていいですよね。
自分のサイトにも愛着が湧くと思います。

画像さえあれば5分くらいで設定ができますので、ぜひやってみてください！
ここまで読んでいただきありがとうございました！

個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する

なお

Webデザイナー

XInstagramContact

ホームページをご覧いただきありがとうございます！ なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。