シンプルで簡単!favicon(ファビコン)の設置方法

さて、favicon(ファビコン)ってご存知ですか?
ゲームのファミコンじゃないです。
みなさま必ず見たことがあるこちら。
 
e3c7793b2224ea0e05a09a817e067df1
favicon=Favarite iconの略で、サイトのシンボルマークとして、配置するアイコンの事。
私、いろんなサイトを閲覧する時についついファビコンもチェックしちゃいます。
ファビコンがあるとサイトの完成度も上がって見えますし、
たくさんのサイトを開いているとき、一目でわかるアイコンを設置しているとユーザーにも親切です。
設置方法もとても簡単なので、サイトを制作する時はぜひ設置して頂きたいです。
ということで、ファビコンの設置方法をご紹介します。
自己流な部分もあるので、参考程度にどうぞ。

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

正方形で作成します。
ファビコンサイズはスマートフォンの登場やデバイスの多様化によって、多種多様になってきています。
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で保存しましょう。

2.「.ico」へ変換する

フォーマットがpngだと対応してくれないブラウザもあるので、「.ico」へ変換しましょう。
icoへ変換してくれるサイト▼
Favicon Converter
画像をUPし、サイズ選択で32pxにリサイズを選ぶだけ。
半透過マルチアイコンfavicon.icoを作ろう!
複数のサイズを作る時にオススメ。
各サイズごとにアップロードし、アイコン作成をクリックするだけで複数の画像サイズができます。
他にも検索すれば、たくさんあります。

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

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

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

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

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

表示されない場合は、キャッシュが残っている場合や、ブラウザによって表示に時間がかかり場合もあるので、キャッシュを消すか、再起動をしましょう。
以上、シンプル!超簡単なファビコン設置方法でした。
またの機会に、スマホでのウェブクリップアイコンの設置方法もご紹介したいと思います。
それでは、また(^^)/

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 【2025年版】海外の祝日カレンダーでインバウンドを攻略!

  2. 行動経済学から学ぶ『選ばれるプラン』の作り方

  3. 沖縄の梅雨を正しく理解し賢く旅行しよう!

  4. 【JUNGLIA OKINAWA】ついに公式サイトでのチケット販売開始!開業に備えよう

  5. ホテルの客室名って実は大事!客室名で伝える魅力とサービスクオリティ

月間ランキング Monthly Ranking

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

WEB集客コンサルティング

売上UPに直結するWEBサイト(自社公式サイト)制作

必要なデータを一括管理ねっぱん!++

ファイブスターコーポレーション・クリエイティブサービス|実はいろいろやってます!

ファイブスターコーポレーション・クリエイティブサービス|多言語対応Web制作サービス

ファイブスターコーポレーション・クリエイティブサービス|撮影サービス

TOP