ブラウザーのURLの前に小さなアイコンを表示させる方法
2022-02-07 09:17:22
多くのウェブサイトを閲覧していると、ブラウザのアドレスバーの前に小さなアイコンがあったり、ブラウザのタブの位置に小さなアイコンがあったりすることがあります。BaiduやTencentなどのウェブサイトには、このようなアイコンの存在があります。あなたのホームページにも小さなアイコンを付けませんか?この小さなアイコンを使えば、あなたのウェブサイトは他の人のウェブサイトよりも目を引き、他の人の注意を引く可能性が高くなります。
PHOTOSHOP、FLASHFXP、メモ帳
小さなアイコンをico形式で作成する必要があります。
ステップ/メソッド
1. PHOTOSHOPで幅と高さが32ピクセルの小さなアイコンを作成し、ico形式で保存します。
2. FLASHFXPでウェブページをローカルにダウンロードし、万が一に備えてバックアップコピーを作成し、メモ帳でウェブページのソースコードを開く。
3. Webページのソースコードのheadセクションを探し、以下のコードを挿入します。hrefのアドレスは、Webサイト上の場所に応じて、icoアイコンを格納するアドレスであることに注意してください。
<link rel="shortcut icon" type="image/x-icon" href="http://www.iswweb.com/images/favicon.ico" media=& quot;screen" />
4. 4. 変更したウェブファイルをウェブホストにアップロードし、完成したicoファイルをウェブホストのimagesディレクトリ内に格納します。
5. 素晴らしい出来栄えです。IEブラウザを開き、URLを入力し、試してみてください。もう小さなアイコンができていますね?
スモールアイコンの形式はico形式、幅と高さは32ピクセルである必要があります。
上記の手順を行ってもスモールアイコンが表示されない場合は、Internet Explorerのキャッシュをクリアしていただくと、スモールアイコンが表示されるようになりますので、そちらをご利用ください。
小さなアイコンの位置は、コード内の位置と同じでなければ表示されません。
PHOTOSHOP、FLASHFXP、メモ帳
小さなアイコンをico形式で作成する必要があります。
ステップ/メソッド
1. PHOTOSHOPで幅と高さが32ピクセルの小さなアイコンを作成し、ico形式で保存します。
2. FLASHFXPでウェブページをローカルにダウンロードし、万が一に備えてバックアップコピーを作成し、メモ帳でウェブページのソースコードを開く。
3. Webページのソースコードのheadセクションを探し、以下のコードを挿入します。hrefのアドレスは、Webサイト上の場所に応じて、icoアイコンを格納するアドレスであることに注意してください。
<link rel="shortcut icon" type="image/x-icon" href="http://www.iswweb.com/images/favicon.ico" media=& quot;screen" />
4. 4. 変更したウェブファイルをウェブホストにアップロードし、完成したicoファイルをウェブホストのimagesディレクトリ内に格納します。
5. 素晴らしい出来栄えです。IEブラウザを開き、URLを入力し、試してみてください。もう小さなアイコンができていますね?
スモールアイコンの形式はico形式、幅と高さは32ピクセルである必要があります。
上記の手順を行ってもスモールアイコンが表示されない場合は、Internet Explorerのキャッシュをクリアしていただくと、スモールアイコンが表示されるようになりますので、そちらをご利用ください。
小さなアイコンの位置は、コード内の位置と同じでなければ表示されません。
関連
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
HTMLコードによる画像断片化読み込み機能
-
HTMLページ適応型テーブル(table)
-
HTMLで2カラムレイアウト(左固定幅、右適応型)を実現する例
-
メッセージボタンにコーナーマーカーを追加するhtmlコード
-
html、css、jsのアノテーション仕様の使用方法まとめ
-
複数の div に含まれる table の tdwidth が同じに設定され、また誤って整列される。
-
閲覧中のページがBaiduのスナップショットを保存しないように設定する方法
-
ページコード修正の効率化 HTML言語のコア知識の習得
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン