FC2ブログにファビコンを設定してみた


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

色んなサイトを見ていると、ブラウザタブに画像とサイトタイトルが一緒に入っていて、複数のタブを開いていても一目で目的のサイトが見つかっていいなぁと思う今日この頃。

このブログが開かれたときに、一目で「FC2ブログ 公式チャンネル」と分るようにしたいなと思い、今日はFC2ブログにファビコンを設置してみたいと思います。

ファビコンとは・・・?



favicon_01.png

ファビコン(favicon)とは、Google ChromeやFirefoxなどのブラウザーのタブに表示されるアイコン画像のことで、このアイコン画像はブックマーク時のアイコンとしても使われます。

ファビコン画像を作成する


favicon.png

ファビコンを設定するためには、ブログのシンボルマークとなる画像を用意する必要があります。

画像のファイル形式は「.gif」や「.png」などでも表示させることができるようですが、一般的には「.ico」というファイル形式の画像を使うようなので、今回は上記の画像をファビコン用に縮小(32px×32px)後、「.ico」にファイル形式を変換して設定していきたいと思います。


「.ico」というファイル形式の画像を持っていない方は、インターネット検索にて「.ico 変換」や「.ico 作成」などと検索すると様々な方法が見つかるので、自分に合った方法で用意してみてください。

また、画像ファイルのサイズは「16px×16px」、「32px×32px」、「48px×48px」、「64px×64px」、「128px×128px」のいずれかになりますが、ファビコンを表示させたい端末やブラウザによってサイズが異なるので、こちらに関してもご自身の希望に合わせて画像のご用意をお願いいたします。

※お客様ご自身の責任において行っていただきますようお願いいたします。


ファビコン画像を設定する


ファビコン画像の設定って難しいのかなぁと思っていましたが、意外と簡単。FC2ブログ管理画面の「テンプレートの設定」をクリックし、</head>の直前に下記のソースを記載するだけ!
▼コードの内容
<link rel="icon" href="https://blog-imgs-108.fc2.com/f/c/2/fc2blogstaff/favicon.ico">

※赤い部分にはファビコン画像のファイルURLを記載してください。
※Google Chrome、Firefox、Safari、Opera、Microsoft Edge、Internet Explorer(11以上のバージョン)での閲覧時のみ表示されます。

実際に反映を確認してみると、正常に設置できたようです

▼Google Chrome
favicon_04.png
▼Internet Explorer 11
favicon_02.png
▼Firefox
favicon_03.png


また、FC2アイコンのアイコンはファビコン画像と同じサイズ(16px×16px)でできているので、下のソースの赤文字部分をアイコン画像のURLに変更するだけで、ファビコン画像として設置が出来ます!
▼コードの内容
<link rel="icon" type="image/gif" href="https://blog-imgs-108.fc2.com/f/c/2/fc2blogstaff/favicon.ico">

※赤い部分にはアイコン画像の画像URLを記載してください。
※「.png」を使用する場合は、オレンジの個所を「type="image/png"」と記載します。
※Google Chrome、Firefox、Safari、Opera、Microsoft Edge、Internet Explorer(11以上のバージョン)での閲覧時のみ表示されます。
ただし、FC2アイコンは「.gif」というファイル形式でできているため、コードの内容は「.ico」ファイルの時とは少し異なる記述になります。


ファビコンの設定反映に時間が少し掛かる可能性がございます。
また、ブラウザーにキャッシュが残り、正常に表示されない可能性もございますので、その際はキャッシュの削除をお試しください。

▼クッキー・キャッシュの削除
https://help.fc2.com/requirements/SolutionCheckCk


利用されているブラウザやファビコンとして使う画像によってHTMLの記述が異なりますが、ファビコンを設定して、オリジナリティーのあるブログにしてみてはいかがでしょうか?



FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/



FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028

関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式チャンネルの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

検索フォーム

最新記事

ブログの再登録 2020/01/23
FacebookやTwitterのSNSボタンを記事内に表示させてみよう 2020/01/16
FC2おすすめブログのご紹介♪『ヲトナベントー』 2020/01/09
エラーメッセージ第二弾「認証に失敗しました」 2020/01/02
エラーメッセージ第一弾「アルバムにこれ以上の画像は追加できません」 2019/12/26

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪