So-net無料ブログ作成

faviconを作ってみよう! [デジタルライフ!]

たまには本業のWebデザインの小技でもご紹介しましょう!
え?私、バナナ業界の人だと思ってたって?

favicon(ファビコン)の作成方法

当ブログにもファラオ様のfaviconを設置しています。
もし見れない方は履歴とキャッシュを削除してブラウザを再起動して下さい。

cmh01.gif

さぁ、難しくないので一緒に作りましょう♪

1.表示させたい画像を用意しよう!(Photoshopをお持ちでない方)

  • 画像制作ソフトにて画像を用意しましょう!(フリーのソフトで構いません。)
    大きさは適当ですが32ピクセル×32ピクセル位がいいと思います。
    画像が出来たらJPGかGIFで保存しましょう♪

  • 作成した画像をicoという形式に変換しましょう!
    下記にアクセスして作成した画像場所を指定し、Generate Faviconをクリック。
    http://www.favicon.co.uk/
    faviconのプレビューが確認できたら、
    Download Your Favicon Hereをクリックしてダウンロードしましょう!

1.表示させたい画像を用意しよう!(Photoshopをお持ちの方)

  • 下記サイトで拡張子icoで保存可能になるプラグインをダウンロードして下さい。
    Win版Photoshop CS3 Extendedでも使えました。
    http://www.telegraphics.com.au/sw/#icoformat
  • cmh02.gif
  • 解凍後、プラグインファイルをPhotoshopのプラグインフォルダに追加します。
  • Photoshopを起動して32px×32pxの新規ファイル(背景透明)で画像を作成し、
    拡張子をicoにして保存。favicon.icoを作成します。


2.faviconをどこかに置かせて貰おう!
残念ながらソネブロには拡張子icoのファイルがアップ出来ないので、
タダでw設置場所をお借りしましょう!

私はFC2ホームページに登録しました。→http://web.fc2.com/
好きな名前で登録すると、http://(登録した名前).web.fc2.com/のアドレスがゲットできます。

cmh03.jpg
管理画面でファイルマネージャー(FTPがわかる方はそちらの方が早いです!)をクリック、
ディレクトリを作成をクリック、わかりやすくblogとでも名前を付けましょう。

cmh04.jpg
blogのディレクトリが作成出来たらクリックし、favicon.icoをアップロードしましょう!
http://(登録した名前).web.fc2.com/blog/favicon.icoにfaviconが設置されました!


3.So-net blogに設定しよう!
ソネブロの管理画面からデザイン、HTML編集を選びHTMLの追加をクリックしましょう。
名前は自分がわかり易いものを付けて下さい。新規に追加したHTMLをクリックして、

三行目位に<head>という部分があるのでその下の行に

<link rel="shortcut icon" href="http://(登録した名前).web.fc2.com/blog/favicon.ico"> (<>は半角で入力して下さい。)

と入力して下さい。保存してブログを見てみると…faviconが表示されると思います!
見れない場合は履歴&キャッシュ削除、ブラウザ再起動をして下さい。

もしこの手順でもうまく行かない、わからない部分があればコメント下さい。
ちょっとわかりにくいかもしれませんが、簡単に作れますので頑張って下さいね♪
faviconを作って旦那さまに自慢しましょう!!w

Firefox対処方法
HTML編集画面にて下記の一行を削除して下さい。
ソネブロのオフィシャルアイコンが表示されるのが解消されます。
<link rel="shortcut icon" href="http://blog.so-net.ne.jp/_common/favicon.ico" />

同じ要領で写真をFC2ホームページにアップして使用すると、
ソネブロの写真容量以上の画像がブログで使えますよ♪
写真を表示させたい場合は下記の様に入力すると画像が表示されます。
<img src="http://(登録した名前).web.fc2.com/blog/画像名" alt=""/> (<>は半角入力)


Photoshop CS3 Extended 日本語版 Windows版

Photoshop CS3 Extended 日本語版 Windows版

  • 出版社/メーカー: アドビシステムズ
  • メディア: DVD-ROM



Photoshop Elements 6 日本語版 Windows版 通常版

Photoshop Elements 6 日本語版 Windows版 通常版

  • 出版社/メーカー: アドビシステムズ
  • メディア: CD-ROM


全て読んで下さった方、お疲れ様でした!
今日は久々に真面目な記事を書いたなぁ…真面目な私らしいわ♪フフフ~

タグ:Photoshop favicon
nice!(94)  コメント(52)  トラックバック(0) 

nice! 94

コメント 52

コメントの受付は締め切りました
fuku_kmy

頑張って作ってみようっと
by fuku_kmy (2008-10-17 11:13) 

ダー

えぇ~・・・あぁ~・・・もう少し・・・専門用語を勉強します (ノ_σ)クスン  

                               日本のフィレンツェで!! 
by ダー (2008-10-17 11:32) 

イチロー

ファビコンていうんだ・・・ 
ちっちゃいマークみたいなものですね、ちと難解だな。

by イチロー (2008-10-17 11:39) 

お茶屋

おぉ!
こちらの解説、とっても分かりやすいです☆
まさにnice!です♪
by お茶屋 (2008-10-17 11:40) 

欲張りウサギ

あ〜それでフェイリンさんのブックマークだけファラオなんだ!!!
お!Elementsでもいいわけですね(^^)v
by 欲張りウサギ (2008-10-17 12:23) 

ぷちぞう

気になっていました。
フェイリンさんマーク!!
頑張って勉強してみます..
by ぷちぞう (2008-10-17 12:27) 

k-sakamama

ありがとうございます。
ゆっくり説明を読みながら、やってみます。
時間がかかりそう~(笑
PC詳しくないです。。なんでも、挑戦ですよね?(笑
by k-sakamama (2008-10-17 12:33) 

いとお

おお!さすがぁ~!!
さすがプロは違いますねぇ~
あ、バナナ業界って(笑)
by いとお (2008-10-17 12:38) 

HAL

ファイヤフォックスだと、ソネブロファビコンのままになっちゃう??
by HAL (2008-10-17 12:43) 

いわもっち

現在、移動中です!
真面目に読んでしまいましたぞ!
by いわもっち (2008-10-17 13:07) 

HAL

出た出た(^^)/
by HAL (2008-10-17 13:15) 

たいちさん

「ファビコン」という名前の意味も知りませんでした。お気に入りのアイコンという意味なんですね。
記事読ませていただきましたが、すーとは頭に入りませんので、頭がクリアーな時に再読しますね。
by たいちさん (2008-10-17 13:26) 

しーちゃん

フェイリンさんは、こんなめんどう・・・いや
マメな事をされていたのですね(笑
一瞬「めんどくさ~」って思ったけど、
早速画像を準備したりして・・・(どやねん!?)。
ゆっくりやってみま~す♪
by しーちゃん (2008-10-17 15:11) 

pace

よく判らないけど
凄そうだ~
by pace (2008-10-17 15:17) 

雀の涙

無理(・∀・)ニヤニヤ 
by 雀の涙 (2008-10-17 15:35) 

poko

私も無理。
わかんない言葉ばっかりだし(^^;
目がチカチカしますわ。
フェイリンさんって凄い!!

by poko (2008-10-17 15:51) 

Azumino_Kaku

面白そうです。帰宅したらやってみよう♪
by Azumino_Kaku (2008-10-17 16:05) 

mitu

こんにちは。
なるほど~、今度やってみますよ。

by mitu (2008-10-17 16:10) 

kii

「バナナは裏切らない」の言葉を残した、バナナの神かと思っておりました。
我が家の今年の流行語大賞ですよ。「バナナは裏切らない!」

本業はWebデザイナーさんだったのですねー。



by kii (2008-10-17 18:23) 

waihaha

機械音痴で、そもそもブログなんて作成していることすら
奇跡に近い私…。なので、大変お勉強になりました♪
ありがとうございます^^。
by waihaha (2008-10-17 19:31) 

pi-ro

甘くて美味しいお菓子かと思った。
またひとつ賢くなりました ^^
by pi-ro (2008-10-17 19:49) 

Yuki

すご~い!気になってたの!
やってみます~♪ ありがと~!!!(^з^)-☆Chu!!
by Yuki (2008-10-17 21:07) 

まめ助の母

知りたい!と思っていたことを!!
すっきりしました♪
でもやろうかどうか(^_^;)
FC2は会社のHPがそこです

by まめ助の母 (2008-10-17 22:31) 

Michy

こんばんは〜!
わあ!本業がwebデザインだなんて…
尊敬〜〜〜!
私は「faviconって何??」のレベルなので…(汗)
週末にゆっくり読み直します。
とても1回では無理…
でも面白そうだな〜。
by Michy (2008-10-17 22:49) 

vivian

時間のある時に頑張ろう!(^_-)-☆
by vivian (2008-10-17 22:54) 

chunta

病気で 面倒なので
近頃 バナナを買うワタシ
マリーが「バナナダイエット?」とからかうけど
「うるさい バナナは裏切らないんだいっっ!」っと
朝食 場合によっては昼食をバナナに・・・

喘息が良くなったら じっくりやってみます
今は「キャッシュクリア」で挫折です><
by chunta (2008-10-17 23:17) 

Yuki

こんばんわ。先ほどメッセージしましたが、出来ました!
ご連絡をとおもったのですが、再度メッセージできなくって、
コメントにさせていただきました。
ありがと~!
by Yuki (2008-10-17 23:51) 

ホタルの館

おおおおおお、これ、前からやり方気になってたんですよ!!
企業でも最近多くが採用していますよね!!
有り難うございました(*^_^*)
やってみますのミドリですwww
by ホタルの館 (2008-10-18 03:56) 

くまら

今度試してみます。


くじ貰いまする
by くまら (2008-10-18 08:09) 

夢空

月一で、こういう記事もお願いします(^.^)
by 夢空 (2008-10-18 08:19) 

ラブ

すご〜い! そういう事ができる人だったんだぁ…w
バナナ振興会の、人だと思ってた…。
by ラブ (2008-10-18 11:54) 

sak

お仕事webデザインなんだぁ
すごぉ~い♫
やってみます...いつ完成できるかなぁ(^^;
by sak (2008-10-18 12:09) 

seiji

favicon参考になりました!
ありがとうございます。
やり方がわかったものの、何をfaviconに設定するか・・・それが問題だよなぁ~
フェイリンさんのファラオ様のような、キャラクターを何か作らないと!!
しかも小さいからあまり細かい画像ってfaviconには向かないじゃないですか~、美術的な才能がゼロなので、この辺が難しい・・・
by seiji (2008-10-18 14:14) 

mau-mauu

時間があいたら、やってみます ^^v
そのうち、変わっていたら
成功したと思って下さい ^^
あっ、バナナの画像は使いませんよ ^^;
by mau-mauu (2008-10-18 16:14) 

エイジ

favicon 出来ました。(^_^)v
by エイジ (2008-10-18 17:23) 

youzi

私に作ってみたいけど、理解するまでに
時間がかかりそうです(>_<)
フォトショップえエレメンツ6も買ったのですが、
実はまだ、しっかり使い方も分かりません。
勉強しないと・・・。
by youzi (2008-10-18 20:13) 

Pace

わーい楽しそう!と思ってトライしてみましたが、
失敗したようです・・・。
でも、説明とっても分かりやすくて参考になりました。
また改めてチャレンジしてみます。
by Pace (2008-10-18 22:06) 

pica

「ファラオだぁ」と思ってたんですよ、ずっと。
PCオンチな私だけど、今度、やってみますv

by pica (2008-10-19 02:08) 

自由人

faviconってなんなのでしょうか??
ブログやってることが奇跡に近いので・・・・
言葉の意味が全然わからないんです(T_T)



でも、ちょっとチャレンジしてみようかな・・・ふふふっ(^_^;)


by 自由人 (2008-10-19 05:57) 

のぶあき

ソネブロでも設定できるとは知りませんでした!
ありがとうございます。早速やってみます♪
by のぶあき (2008-10-19 09:41) 

しんりゅう

せっきーさんの追っかけさんだと思ってましたw
時間が作れたら、らしいfavicon作ってみようっと!
by しんりゅう (2008-10-19 11:12) 

kaoru

こんにちは。
凄いですねぇー。
私には、ちんぷんかんぷんで
無理です・・・(__;)
by kaoru (2008-10-19 12:17) 

BlogPetのフェイフェイ

ピクセルって…なんだろう…?
by BlogPetのフェイフェイ (2008-10-19 14:17) 

ゆりあ

かなりご無沙汰しちゃいました(*- -)(*_ _)ペコリ
難しそう~^^;
だけど、機会があったら今度トライしてみたいです^^
このファビコンで、一目でフェイリンさんだって分かりますもんねv^^v
by ゆりあ (2008-10-19 15:24) 

フェイリン

皆様ご訪問ありがとうございます!
文字が多い記事でスルーされるかと思いましたがw
なかなかに好評だったようで書いた甲斐がありました~♪
by フェイリン (2008-10-20 10:20) 

にょろんず

ファビコン作りました。
本当に大変参考になり、感謝感激です。

色々参考にしたサイトやブログあったのですが、
フェイリンさんには、かないませんでした。

突然のコメント失礼かと思いますが、
お礼報告させていただきました。

ありがとうございました。


by にょろんず (2009-06-16 23:27) 

りこ

わー!!ファビコンで検索したらフェイリンちゃんとこだったw
うんうん。ちょっと挑戦。やってみますねヽ(●´ω`●)ノありがと〜
by りこ (2009-10-01 03:32) 

りこ

ヽ(●´ω`●)ノできた〜
フェイリンちゃんありがとーー(´ε`〃)チュ-♪

by りこ (2009-10-01 03:59) 

りこ

フェイリンちゃん。何でかな?
ファビコン設置できたんだけど、画面一番上にURLが出ちゃう(-""-;)
もっかい見てみるね
by りこ (2009-10-01 06:34) 

フェイリン

りこさんへ
ファビコンを設置する位置がおかしい様ですね。
<header>内に記述してみてくださいね~!
by フェイリン (2009-10-01 09:29) 

りこ

フェイリンちゃん。できたよ〜
<>が大文字でした(汗;;;
お騒がせしました(ぺこり)
by りこ (2009-10-01 12:02) 

まなひ

はじめまして。
最近、ファビコンのことを知り替えてみたいと思い、
検索をしていたら、このブログにめぐり合いました。
試行錯誤少々しましたが、変更する事ができました。

ありがとうございました。
by まなひ (2010-03-10 09:58) 

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。