シンプルで簡単！favicon（ファビコン）の設置方法

さて、favicon（ファビコン）ってご存知ですか？
ゲームのファミコンじゃないです。

みなさま必ず見たことがあるこちら。

 
e3c7793b2224ea0e05a09a817e067df1

favicon＝Favarite iconの略で、サイトのシンボルマークとして、配置するアイコンの事。
私、いろんなサイトを閲覧する時についついファビコンもチェックしちゃいます。

ファビコンがあるとサイトの完成度も上がって見えますし、
たくさんのサイトを開いているとき、一目でわかるアイコンを設置しているとユーザーにも親切です。

設置方法もとても簡単なので、サイトを制作する時はぜひ設置して頂きたいです。

ということで、ファビコンの設置方法をご紹介します。
自己流な部分もあるので、参考程度にどうぞ。

１.ファビコン用の画像を作成する。

正方形で作成します。
ファビコンサイズはスマートフォンの登場やデバイスの多様化によって、多種多様になってきています。
16px～256pxまで種類があり、たくさん用意するのは大変です。

サイズ(px)表示場所
16 × 16ブラウザのアドレス欄・タブ・ブックマーク（IE）
32 × 32chrome、firefox、safari他主要ブラウザのタブ・ブックマーク
48 × 48Windowsのサイトアイコン
64 × 64高解像度のWindowsのサイトアイコン
72 × 72iPadのホームアイコン
128 × 128Windowsのサイトアイコン
228 × 228Chrome ウェブストアのアイコン

現在では多くのブラウザで32pxが主流になっており、
今まで制作し、特に困ったことはなかったので、個人的には 32px × 32px だけで充分だと感じました。

ファビコンのデザインは、シンプルでハッキリしたものにし、背景を透過した方がオシャレ( ｀ー´)ノ
フォーマットはpngで保存しましょう。

２.「.ico」へ変換する

フォーマットがpngだと対応してくれないブラウザもあるので、「.ico」へ変換しましょう。

icoへ変換してくれるサイト▼
Favicon Converter
画像をUPし、サイズ選択で32pxにリサイズを選ぶだけ。

半透過マルチアイコンfavicon.icoを作ろう!
複数のサイズを作る時にオススメ。
各サイズごとにアップロードし、アイコン作成をクリックするだけで複数の画像サイズができます。

他にも検索すれば、たくさんあります。

３.favicon.icoをサーバーにアップロード

変換したアイコンをダウンロードしたら、サーバーのルートディレクトリにアップロードします。

４.<head>内にコードを記述する。

<link rel=”shortcut icon” href=”favicon.ico”>

５.サーバーにアップしたら確認してみよう。

表示されない場合は、キャッシュが残っている場合や、ブラウザによって表示に時間がかかり場合もあるので、キャッシュを消すか、再起動をしましょう。

以上、シンプル！超簡単なファビコン設置方法でした。
またの機会に、スマホでのウェブクリップアイコンの設置方法もご紹介したいと思います。

それでは、また(^^)/

この記事を書いた人

鈴木 義浩
鈴木 義浩ゼネラルマネージャー
人に喜んでもらえる仕事。感動してもらえる仕事。
お互いが幸せになれるよう頑張ります。
プロフィールを見る
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら
Copyright 2021 ファイブスターコーポレーション