Favicon - あなたのサイトのアイコンをアドレスバーに表示する

特定のWebサイトでは、インターネットブラウザのアドレスバーにURLの左側にアイコンがあります。 アドレスバーに表示できるファビコンまたはWebサイト用のアイコンを作成するために使用できるいくつかの方法があります。 Gimp、Pixiaなどの描画ソフトウェア またはIconEdit32やIconWareなどの特殊なソフトウェアを使用して、ファビコン作成できます。 画像のファビコンを変換するために使用できるWebサイトがあります。 WebマスターがICOファイル生成し てfaviconアニメート することをWebマスターに許可するWebサイトもあります。 Linkタグは、 ファビコンのパスを示し、それをオンラインにして、Webサイトへの訪問者がアドレスバーのアイコンを見ることができるようにするために使用されます。

  • ファビコンを作成する
    • ほとんどのブラウザでは
    • Internet Explorerの場合
  • アニメ化されたファビコンを作成する、またはICOファイルを生成する
  • faviconをオンラインにする
  • ノート

特定のWebサイトにアクセスしたときに、ブラウザのアドレスバーにURLの左側にアイコンが表示されていることにお気づきでしょうか。

あなた自身のウェブサイトにこのタイプのアイコンを実装するには、以下のステップに従ってください。

ファビコンを作成する

いくつかの方法があります。

  • 描画ソフトウェア(Gimp、pixia、inkscapeなど)
  • 専用ソフトウェア(IconEdit32またはIconWare)
  • ウェブサイト(画像のファビコンを変換するもの):
    • //www.html-kit.com/favicon/
    • //www.html-kit.com/favicon
    • //www.favicon.co.uk/
    • //www.favicon.hu/
    • //tools.dynamicdrive.com/favicon/
    • //favikon.com/

ほとんどのブラウザでは

最初のステップはpngまたはgifで画像を作成することです。

16×16または32×32(ピクセル)のさまざまなサイズから選択できます。

Internet Explorerの場合

このブラウザでは、画像または.icoファイル(名前をbmpに変更) - サイズ16 x 16ピクセルを使用してください。

アニメ化されたファビコンを作成する、またはICOファイルを生成する

//www.html-kit.com/favicon/

  • 上のリンクをクリックすると、ICOファイルを簡単に生成できるだけでなく、必要に応じてfaviconをアニメーション化してテキストをスクロールすることもできます。
  • [ 参照 ]ボタンをクリックして、コンピュータ上の画像を選択してください。
  • アイコンの後にスクロールするテキストを追加することもできます。 それは自動的にアニメーションアイコンを生成します。
  • 最後に、Animated Favicon(favicon自体がスクロールしているように見える)をチェックすることによって、テキストなしでアニメーションアイコンを生成することも可能です。
  • それからGenerate Favicon.icoボタンをクリックしてください
  • あなたはそれからあなたのfaviconの概観を持つでしょう。
  • それからあなたのコンピュータに単にzipファイルをダウンロードしてください。
  • ファイルを解凍した後、ファイルfavicon.icoをあなたのサイトにコピーしてください。
  • アニメアイコンをダウンロードした場合、ZIPファイルにはアニメファビコンを含むエクストラファイル(animated_favion1.gif)も含まれているので、それをあなたのサイトにコピーしてください。

faviconをオンラインにする

  • サイトにファビコンを配置するには、ヘッダーにあるリンクタグを使用してパスを指定します。
  • これがpng画像の例です。

  • フォーマットに応じて、 "type"属性は変わります。

Png:image / png

GIFフォーマット:image / gif

JPEGフォーマット(jpegまたはjpg拡張子):image / jpeg

  • そして、もしあなたが標準に合わないファビコンがあるなら、属性 "rel"も変わります。

 link rel = "ショートカットアイコン" type = "画像/ xアイコン" href = "/ images / icon_ie.ico" /> 
  • あなたのアイコンがアニメーション(GIF)の場合は、次のタグを挿入してください。

ノート

前の記事 次の記事

トップのヒント