ファビコンは、アドレスバーの地球のアイコンを置き換えます。
画像クレジット： r0mu / iStock /ゲッティイメージズ
ファビコンは、Webサイトの存在感に微妙な視覚的センスを加えるための創造的で実用的な方法です。 ファビコンは、Webブラウザがページタブとアドレスバーで使用する小さな画像です。 タイトルまたはURLの横に視覚的なブランド識別子として機能するWebサイトに関連付けられたロゴまたは画像を表示します。 ファビコンは、ユーザーがさらにタブを開くと、ページタイトルに使用できるテキストスペースがほとんどなくなるため、タブブラウジングで特に便利なサイト識別子です。
ステップ1
写真またはグラフィック編集プログラムで使用するアイコンをデザインします。 サイトまたはブランドに関連付けられている既存のロゴまたは画像を取得して、ファビコン標準に準拠するように調整できます。 ファビコンは常に正方形のサイズを使用し、サポートされる最大サイズは256 x256ピクセルです。 アイコンパッカーを使用して複数のサイズをサポートする場合は、256 x256ピクセルの正方形に収まるように画像を切り抜いてサイズを調整します。 1つのバージョンを実行する場合は、16 x16ピクセルのサイズを使用してください。
今日のビデオ
ステップ2
グラフィックデザインプログラムからアイコングラフィックをPNG画像ファイルとしてエクスポートします。 PNGは、ファビコンのW3C標準画像形式です。 一部のブラウザはJPGファイルをファビコンとして表示する場合がありますが、この標準は公式にはサポートされていません。 さらに、アイコンパッカープログラムは他の形式の画像では機能しない場合があります。 ファビコンはGIFおよびICOファイルもサポートします。
ステップ3
エクスポートしたPNGファイルをICOコンバータープログラムを使用してICOファイルにパックします。 アイコンコンバータプログラムは、PNGファビコンを処理し、広くサポートされているいくつかの異なるファビコンサイズにフォーマットして、単一のファイルに埋め込みます。 ICOファイルは、それらをサポートするデバイスに16 x16ピクセルよりも高い解像度のファビコンを提供します。
ステップ4
ウェブサイトホスティングサービスにログインし、PNGまたはICOファイルをウェブサイトのメディアサーバーにアップロードします。 アップロードされたファイルのURLをコピーします。 ファビコンをサイトに添付するために必要になります。
ステップ5
サイト編集プログラムを開き、ファビコンファイルのURLで示されているように変更された次のコードをWebサイトのセクションに追加します。
PNGファイルの場合：
ICOファイルの場合：
CMSで管理されているサイトを使用しているか、ファイルベースのセクションを含めていない限り、アイコンを表示する各ページにコードを追加する必要があります。 サイトページを保存して更新すると、ファビコンが表示されます。
ヒント
PhotoshopやCorelDrawなどの写真編集プログラムは、アイコンのデザインとフォーマットに適しています。 または、Paint.netやPixlrなどの無料プログラムを使用することもできます。
警告
一部のブラウザは、/ faviconディレクトリにある画像ファイルをファビコンとして自動的に関連付けます。 ただし、W3C組織は、この方法が広くサポートされている標準ではなく、Webアーキテクチャの原則に反しているため、この方法を推奨していません。 さらに、多くのWebホスティングサービスとCMSシステムでは、ユーザーがメディアコンテンツをメディアファイルディレクトリの外に配置することを許可していないため、この方法は不可能です。
