Home

Web入門初心者のための、使えるツール集

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

フリーで自分だけのFaviconをラクラク作れるサイト~favicon validator

フリーで自分だけのFaviconをラクラク作れるサイト

favincon001.jpg


faviconとは…

favincon003.jpg


よく見る、URLの前についているアイコンです。
結構敷居が高いのかなぁ~って思ってたのですが、意外に本当に超簡単!Web制作の小技にもってこいのアイテムです。

このサイトでは、下から上にむかってスライドする仕様のfaviconも同時に作れますので、色々試しがいがあります。(Operaではうまく機能していないような感じでした…間違っていたらすみません)。

作り方は、なんとなくわかると思われますが、下の空欄に

favincon002.jpg


faviconにしたい画像ファイルを読み込んできます。

そして【Generate FavIcon.ico】ボタンを押します。

しばらくすると指定した画像のfaviconのプレビュー画面が出てきます。

そのあとは下画像赤枠の【DownLoad FavIcon】ボタンをクリックし保存します。

favincon004.jpg


こうして作ったアイコンを、自分のWebサイトの中に保存します。
保存場所は、たとえば

public_html----- index.html(トップページ)
      |--- favicon.ico(作ったfavicon.icoファイル)
      |
      |--- contact
          |
          |--index.html(コンテンツページ)
          |--- favicon.ico(作ったfavicon.icoファイル)


という具合に、各ページの同階層にfavicon.icoを保存します。(上の図は非常にわかりにくいですね…><)

次に、それぞれのhtml(phpなど)の<head>・・・</head>の中に

<link rel="shortcut icon" href="favicon.ico" >

を記入します。

背景が透明のfaviconにしたい場合は、先ほどのサイトでダウンロードしたフォルダの中の【extra】フォルダの中の【transparent.ico】をfavicon.icoの代わりに保存します。

そして
<link rel="shortcut icon" href="favicon.ico" >の代わりに

<link rel="shortcut icon" href="transparent.ico" >
をタグの中に記入します。


スライド式にするには、
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >
をタグ内に更に追加で記述し、

animated_favicon1.gifファイル(【extra】フォルダに入っています。)も追加で保存してください。

自分のサイトが一段とプロっぽく見えてきたのは、私だけでしょうか…f^^;

しばし自己満足の世界に浸ってください。

注:このブログの中のタグをそのままコピーして張り付けをしないようにしてください。<>が全角になっていますので、うまく表示されない可能性大です。

favicon validator
スポンサーサイト

Continue reading

Home

ぜんそく気味な人には良い感じらしい。
携帯を木目調にして、モダンな感じにしてみるには、↓をクリック。
グッドデザイン賞の折りたたみ式デザイン電卓
あなたのiPhoneを白にする方法↓
TagCloud
Recent Comments
Recent Trackback
Meta
About

プロフィール画像

Author: asamix204

今年になってWebを始めた、まだまだ入門初心者のasamix204です。
サイトを制作する上でお世話になったサイトを順番に紹介していこうと思います。こんなサイトを探してた!というサイトを紹介できれば嬉しいです。

Links
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。