ページアイコンのCSSスタイル設定方法

2024-02-08 12:40 CSS ページアイコン ブログ投稿
  1. ファビコン（Favicon）: 最も一般的な方法は、ファビコンを使用することです。ファビコンは、ウェブサイトのルートディレクトリに保存された.ico形式の画像ファイルです。以下のコードをHTMLのheadセクションに追加すると、ファビコンが表示されます。
<link rel="icon" href="favicon.ico" type="image/x-icon">
  1. インラインCSS: もし、ファビコンを使用せずに直接CSSでページアイコンを設定したい場合は、以下のようなコードを使用します。
<link rel="icon" href="data:image/png;base64,iVBORw0KG...（Base64エンコードされたアイコン画像のデータ）">
  1. CSSスタイルシート: CSSスタイルシートを使用してページアイコンを設定する方法もあります。まず、アイコン画像をサーバーにアップロードし、次にCSSファイルに以下のコードを追加します。
<link rel="stylesheet" href="styles.css">
/* styles.css */
body {
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: top right;
}
  1. JavaScriptを使用した動的なアイコン変更: JavaScriptを使用してページアイコンを動的に変更することもできます。以下は、JavaScriptを使用してアイコンを変更する例です。
var icon = document.querySelector("link[rel~='icon']");
icon.href = "new_icon.png";

以上がページアイコンの設定方法のいくつかです。ご参考までにお使いください。