![見出し画像](https://assets.st-note.com/production/uploads/images/149623324/rectangle_large_type_2_529ef7932581502115716c7ac5e99814.jpeg?width=1200)
ファビコンの作り方
ファビコン(favicon)とは、「favorites icon」の略で、ウェブサイトのアイコンを指します。主にウェブブラウザのタブやアドレスバー、ブックマークリストなどに表示されます。ファビコンは小さいながらも視覚的なブランド認識を高める重要な要素です。
ファビコンの主な特徴と役割
視覚的識別: ファビコンはウェブサイトを簡単に識別するためのアイコンです。例えば、ユーザーが複数のタブを開いている場合、ファビコンを見るだけでどのタブがどのウェブサイトかをすぐに判断できます。
ブランド強化: 企業やブランドのロゴをファビコンとして使用することで、ブランド認知を強化します。ユーザーがブックマークリストや履歴でファビコンを見るたびに、そのブランドを思い出す助けとなります。
1. デザイン作成
まず、ファビコン用のデザインを作成します。通常、ファビコンは正方形で、サイズは16x16ピクセルまたは32x32ピクセルが一般的です。以下のツールを使用してデザインを作成できます。
2,ファビコンをウェブサイトに追加する
生成されたファビコンをウェブサイトに追加します。以下の手順に従います。
a. ファビコンファイルをアップロード
ファビコンファイル(通常はfavicon.ico)をウェブサイトのルートディレクトリ(ホームディレクトリ)にアップロードします。
b. HTMLにリンクタグを追加
次に、HTMLファイルの <head> セクションに以下のコードを追加します。
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
例 コード
東武トップツアーズのサイトであれば、下記のようにコードを付けます。
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://tobutoptours.ai/web3/favicon.ico" type="image/x-icon">
いいなと思ったら応援しよう!
![村井宗明(ITエンジニア・元文部科学大臣政務官)](https://assets.st-note.com/production/uploads/images/32139066/profile_a9448236118a76cd05d256fbfc991af6.jpg?width=600&crop=1:1,smart)