ファビコンは、お気に入りアイコンの短縮形であり、ブックマーク アイコンとも呼ばれ、アドレス バーに通常見られる他の .bmp または .gif ファイルではなく、.ico ファイル拡張子を持つ小さなロゴとして定義できます。頻繁にアクセスする URL のパーソナライズされた画像は、広告、プロモーション、または標準商標として作成されるのに役立ちますが、Google や Facebook などの Web サイトでは重要な役割を果たします。アドレス バーの左側にある小さなロゴに注目すると、プロフェッショナルな外観であるだけでなく、ユーザーのお気に入りのブックマークにも表示され、ファビコン アイコンがなければ、Web サイトは一般的な Web ページ アイコンのままとなり、お気に入りのアイコンからのショートカットとして使用されます。
リアルタイムのサンプル例を以下に示します。ブックマーク内のお気に入りをクリックすると、一般的なアイコンが表示されます。 XML を使用する一部の Web サービスや検索エンジンでも、独自性を高めるためにファビコンを使用します。
構文:
Web ページにリンクするためのプライマリ メタ タグを以下に示します。
<link rel="icon" href="image path" type="image/icon type">
上記の構文では、画像パスを、画像ディレクトリに配置する favicon.ico の実際の場所に置き換えます。最後の値のタイプは MIME 形式のファイルです。ここでは任意のタイプの画像を使用できますが、GIF 形式の方がより高度であると考えられます。
Web デザイナーは、パーソナライズされたアイコンを作成し、それを Web ページに関連付けます。ファビコンをサポートするブラウザは、特定のアドレス バーにファビコンを表示します。これは 2 つの方法で実現されます。次に、次のリンクにタブ付きドキュメント インターフェイスが表示されます。ハード ドライブから選択した場合でも、最も重要なことに、ファビコンは (.ico) ファイル形式を使用する必要があります。画像を変換できる無料のサービスがいくつかあります。
開発者は Web サイトのデザインを完了したら、ファビコンを追加します。単純に、ブラウザー タブ上の空白のドキュメント アイコンを公式 Web ページのアイコンに置き換えます。これにより、ユーザーは Web サイトをよりアクセスしやすくしたり、よりアクセスしやすい Web サイトを検索したりすることができます。最も人気のある検索エンジンである Google は、ロゴのテーマを通じてユーザーに印象を与えたり、アイデンティティを与えたりします。アイコンが小さすぎるため、ユーザーにとって明確に理解できる必要があります。ファビコンを作成するにはさまざまな方法があります。方法 1 – ファイルマネージャーを使用した自動生成、方法 2: 通常の画像をアップロードします。
favicon.ico を作成する手順。これは簡単な着陸プロセスです:
.gif または .png 形式を使用して、背景が透明なファビコンを作成することもできます。なぜファビコンが必要なのかという疑問が生じるかもしれません。答えは非常に簡単です。当社の Web サイトを世界中でブランディングし、マーケティングすることです。小さなアイコンは、Web ページをもう少しプロフェッショナルなものにします。ファビコンは HTML ファイルに追加しますが、このファイルには特定の特性が必要です。ウェブサイト上のファビコンはいつでも追加または変更できます。
ファビコンは
の間に配置されます。要素を使用して画像の場所を置き換えます。ファイルへのリンクを定義するリンク タグを使用します。 rel と href という 2 つの属性を使用します。 Photoshop とプラグインやその他のオンライン ジェネレーターを使用して、画像ファイルを .ico 形式に変換できます。アイコンの場所のパス: これは標準実装です。
<link rel=" icon" ……….../> // It installs variety of icons. <link rel =" Shortcut icon" href=……….../> // here in the link attribute shortcut installs its own address bar icon.
次のコードは IOS ユーザー向けに使用されます:
<link rel =" apple-touch -icon" sizes ="180 x 180 href=……….../>
以下は、HTML コードで使用できるコードの例です。
例:
<!-- HTML code demo to display an icon in an address bar--> <!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> EDUCBA icon </title> <link rel = "icon" href =https://favi.png type = "image/x-icon"> </head> <body> <h1 style = "color:blue;"> EDUCBA Icon </h1> <p> Icon is added to the address bar </p> </body> </html>
出力:
コードの説明: 上記のコードで小さな楕円形のアイコンを作成し、それをファビコンに変換しました。 Internet Explorer ではアイコンが表示されますが、多くのブラウザーではアイコンがサポートされていないことに注意してください。 IE はルート ディレクトリからアイコンを取得します。指定されたパスが存在しない場合、HTML ファイルにはサーバー応答からの 404 エラーが表示されます。 Web ブラウザはキャッシュされたファビコンを永続的に保持するため、ファビコンを更新するには Web サイトのキャッシュを空にする必要がある可能性があります。
참고: 파비콘 생성이 성공적으로 완료되었지만 모든 브라우저 탭에 표시되지는 않습니다. Internet Explorer 5.0+ 및 Netscape 7.0+과의 호환성이 좋습니다. 대부분의 최신 브라우저는 파비콘으로 다양한 그래픽 형식을 지원합니다. 서버가 제대로 구성되지 않은 경우 문제가 발생합니다. 유형= “image/x-icon .ico 형식의 루트를 생성해야 합니다.마지막으로 파비콘 로고는 웹사이트 개발에 있어 매우 중요한 역할을 하며, 또한 파비콘을 만드는 다양한 방법을 살펴보며 크로스 브라우저 호환성을 확보했습니다. 이 아이콘은 도메인 이름으로 시각적 사양을 만드는 데 도움이 됩니다. 사이트 인식 및 브랜딩을 안내하고 웹 디자이너가 전문성을 표시할 수 있도록 지원하므로 웹사이트에 추가하는 것은 쉽습니다.
以上がHTMLファビコン の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
