ファビコンを作ってみました - NewBのネットビジネス奮闘デイズ

ファビコンを作ってみました

手作り

オレは16×16ピクセルのドット絵で十分…!!
(つーか これが限界)

手抜きでファビコンを作成&設置しました


サイト表示時やブックマークした時などに
表示されるアイコン、通称ファビコン。

前々から気になっていたのですが、
この度ついにチャレンジすることに。

いざやってみると意外とカンタンにできたので、
ざっくりとですが手順をまとめてみました。

コイツにできるなら自分もやってみようかな…
という目でご覧になってみてはいかがでしょうか。



1.画像を用意する


まずは画像の用意。
16×16ピクセルのドット絵を作ります。

FC2ブログを利用している内にFC2アイコン
なるものを発見したので、今回はそれを利用しました。
自由にアイコンを作成して、ダウンロードまでできます。


手作り
初期案。ω←コレがうまく作れない。


その2
案②。パーツを1段ずつ上げてみる。


その3
案③。アップで見るとコレが1番近いけど、アイコンだと微妙…


というわけで案②を採用。
GIF形式でダウンロードして画像が確保できました。


2.アイコンに変換する


次に用意した画像をアイコン仕様に変えます。
GIFのままでもいけないことはないとかなんとからしいですが
きちんとICO形式に変換することにします。

僕が今回利用させてもらったのは、
こちらのfavicon.icoを作ろう!というサイトです。

(16×16)(32×32)(48×48)の
画像を用意することで、それらをまとめて
マルチアイコンにしてくれるとのことです。

もちろん僕はめんどくさいので全部16×16で済ませました(・ω・)

画面上でパパッと入力を済ませれば、あっという間に
ICO形式の画像が手に入りました。

【補足情報】
ちなみにコチラのサイトでは同じようにアイコンの変換ができるほか、
手持ちの画像を16pxにリサイズしてくれる機能までついています。
自分で16×16の画像を用意するのが面倒だという方はこちらを
試してみるのもひとつの手かもしれません。


3.アップロードして設置


手に入れた画像をアップロードして、
画像URLをゲットします。

普段ブログを書いている人なら、
ブログの中に画像を挿入したことがありますよね?
それと同じ手順です。

それすら分からない?(・ω・)
まぁ… ……ガンバガンバ!(・ω・)


あとはHTMLの編集で
<head> ~ </head>のどこかに
<link rel="shortcut icon" href="【画像URL】" />
を入れればそれで完成です。

ファビコンが表示されてるよー
この通りしっかりと表示されています。
非常に簡単でした。



おわりに
というわけで今回はファビコンの設置について
説明させてもらいました。
実際のところ、ろくに下調べもせずに行ったので
本来不要なプロセスも含まれているかもしれません。

まぁ結果として間違ったことにはなってないので
初心者の体験記として参考にしてください…(・ω・)

【蛇足】
記事内にhtmlタグをそのまま書こうとすると、
文章として表示されずに消えてしまう
ということを初めて知りました。

「<」 や 「>」を
「&lt;」や「&gt;」と書く事で解決するんですね。
日々勉強な感じです(・ω・)

↓☆初心者なりに参考になったよと思ったらポチっとお願いします(・ω・)☆
FC2Blog Ranking
関連記事
スポンサーサイト

放ったらかしで稼ぐなら広告収入!(・ω・)
忍者AdMax
コメント(メルアド・URLは任意です(・ω・))
非公開コメント