• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

favicon(ファビコン)を設定してみよ~

投稿者アイコン
2011/05/23
書いた人:
futappa_staff
カテゴリ:
HTML   Web制作
19,570 views

ブラウザのタブに表示されるアイコン「ファビコン」の設定方法を紹介します。色々なサービス・設定方法をぜひご確認ください。

favicon(ファビコン)を設定してみよ~

favicon(ファビコン)を設定してみよ~

 

今日はWEB1年生のちょっとした簡単TIPS、「ファビコンを設置してみよう」ってお話を。

faviconimage

ファビコンって何?っていうと、ブラウザの上のURLバーとかに載るアイコンの事です。

favorite

これを設置すると、URLのバーだけでなく、ユーザーがお気に入りに入れた時にも目立ってわかりやすいよね。

 

でファビコンの作り方というと、色々やり方があるんですけど、
一番簡単なのはファビコンを作ってくれるwebサービスと使ってしまえば一瞬。
http://www.favikon.com/
ファビコン作成webサービスもたくさんあるんですが、↑ここのサービスが簡単だったのであげておきます。


  • ・STEP1で画像をアップロードして、右の画面でファビコンにする部分をトリミングするだけ。
  • ・あとはSTEP2でファビコンを作成して、右側の「Download Favicon」でダウンロード。

 

これでファビコン作りは完了。次は設定に入ります。

 

まず作ったファビコンをFTPソフトでサーバーにアップロードします。

 

そしてHTMLの<head>〜〜〜〜</head>の中に以下を設定!

<link rel="shortcut icon" href="ファビコンまでのパス/ファビコンの名前.ico">


これで完了!

簡単ですね。外部CSSを設定するのと似た感じです。もちろん絶対パス/相対パスでも大丈夫。

ファビコン設定しているサイトも多いですので、
サイトを作るときにぜひぜひ設定してみてください。


この記事を読んだ人はこんな記事も読んでいます