ホームページのお気に入りマークの作り方

2010⁄11⁄17 Tags :
はてなブックマークに追加はてなブックマーク - ホームページのお気に入りマークの作り方   
20101117_01.jpg

ブログを始め、誰でも気軽に作れるようになったウェブサイト。
はまれば面白くなって、どんどんサイトを飾りたくなってきます。

今回はアドレスの横や、お気に入りなどで表示されるマーク
faviconファビコン)の作り方を紹介。
FC2ブログで表示させることを中心に書いています。

フォトショップなどのソフトがなくても作ることが出来ますよ。
 
 

Step.1 favicon(ファビコン)の作り方


ブラウザで表示されるファビコンの大きさは16×16ピクセル
また、ショートカット表示では32×32ピクセルです。

ピクセルという単語が分からない方は、マス目の数と思っていいです。
お絵かきロジックの初心者サイズですね。
今回は、16×16ピクセルサイズのファビコンを作ります。

20101117_02.jpg

先ずはこの16×16ピクセルサイズの画像を用意します。
(画像は拡大しています。)
注意点としては透明は一つの色として扱うこと。
よく分かんない人は、正方形のマークを作ると無難です。

画像の作り方、描き方は人それぞれ。
グラデーションなどは慣れていないと難しいと思います。
(私もカラーピッカーからグラデーションは無理。
Photoshopなどで画像を縮小するなどを行っています。)

画像編集ソフトがない場合は
お絵かきロジックの解答を参考にするなど
2色とかに色数を減らしてみるといいかもしれない。

今回は、手持ちの画像をアップロードして
自動縮小の機能があるicon_favicon-ccfavicon.ico Generator さんで解説しています。


Step.2 アイコンファイルの作成


作った画像を保存し、.icoファイルに変換します。
アイコン変換用のソフトが無い方は、サイトがあるので利用しましょう。

icon_favicon-ccfavicon.ico Generator
20101117_03.jpg
http://www.favicon.cc/

サイト内にある Import Image ボタンをクリックして
ファイルを選択⇒Upload

20101117_04.jpg
サイト内に、アップロードした画像が表示されます。ここで最終調整。
大きなエディターなので、編集しやすいですね。

フォトショップを持ってない、使いたい画像が無い場合
このサイトで1から作ることも出来ます

20101117_05.jpg
先ほどの注意点「透明は色として扱う
アップロードされた画像の透明と思ってた部分が白だった場合
transparent(透明)を選択して修正しましょう。
サイトでは透明色は黄色とグレーの斜線ですね。

エディターの下にある Preview を確認して
「これでよし」となったら Download Favicon をクリック
アイコンデータがダウンロードされます。


Step.3 アイコンをアップロード・HTMLの編集


このアイコンデータを自分のサイトにアップロードします
FC2ブログの場合は、画像などをアップロードするのと同じ手順です。
アップロードが完了したら以下のソースをコピー

<link rel="shortcut icon" href="○○○">

○○○にはアップロードした画像のURLを入れてください。
このソースをテンプレート設定⇒HTML編集に貼り付けます。

公式テンプレートなどを借りて利用している場合も
カスタマイズOKであれば大丈夫ですよ。

ズラッと出てきたソースの中で、最初の方に

<link rel…
<link rel…
<link rel…

といった列が見当たらないでしょうか?
あれば、先ほどのソースをその列に加わるように貼り付け。

見当たらない、自作のホームページに貼り付けるなどの場合は
</head>
の上に貼り付けるといいと思います。

貼り付け完了後、エディター下の更新ボタンを押してブログの確認をします。

20101117_06.jpg
サイト名の頭についていたマークが変わりました。
※icoファイルは、ブラウザの種類によっては上手く表示されない場合があるそうです。
その時はfavicon.icoを一番上の階層にアップロードするといいみたいです。

ちなみに、表示されていないタブのFC2さんのファビコンですが
透明色と白を上手く使い分けているのが分かりますね。

FC2さんの場合、オブジェクトのマークなので
白い枠でも違和感は無いと思います。
ですが、私のような角を丸くしたマークで白を残してしまうと
四隅にゴミが付いているように見えてしまいます。


ファビコンのメリット


お気に入りされた時、ファビコンはサイト名と併せて表示されます

お気に入りフォルダを見て頂ければ分かると思いますが
ファビコンの有るサイトと無いサイトでは
有るサイトの方が先ず目に付きます。

FC2ブログでは、最初からユニコーンのアイコンが出てきますが
このままでは、設定していない他の方のブログに紛れてしまいます。
分かりやすいマークを設定しておくと、お気に入りしてくれた方が
サイトを探す時に、見付けやすくなるんですね。


その他、ファビコン作成のサイト


今回はファビコンの作成にあたって
icon_favicon-ccfavicon.ico Generator さんのサイトを紹介しましたが
この他にも、ファビコン制作サイトがありますのでご紹介。

icon_Favicon-Japan.jpgFavicon Japan!! -ファビコン作成方法-
英語が苦手という方はこちらのサイトを。
トップページには色々なファビコンが並んでいるので
作るときの参考にもいいかも。

icon_favikon.jpgfavikon
エディターは無いです。
画像をアップロードして、ささっと作れるサイト。
英語表記ですが、シンプルなサイト構成なので使いやすい。

icon_project-fondue.jpgPROJECT FONDUE - Favicon Editor
大きなエディターで、調整しやすい。
描画エディターの横にプレビューもあるので
確認しながら作業が簡単に出来る。

初めて作るので、上手くいかない。
なんて方は、お絵かきロジックの解答を参考にするなど
2色とかに色数を減らしてみるといいかもしれない。


ファビコン作成サイトは、探せばまだまだありますが
今回はこの辺りにしておきます。

   
この記事をブックマークはてなに登録livedoorクリップGoogle BookmarksYahoo!deliciousBuzzurl
ブログランキングに参加しています。
人気ランキングへにほんブログ村へビジネスブログ100選blogram投票ボタン
ブログランキングについて

テーマ : 初心者にも理解できる豆知識(ソルティ的)  ジャンル : コンピュータ

コメントの投稿

非公開コメント

最近作品・今までの作品
スポンサー
アップしたやつとか
最新記事
チラシの裏チラシの裏 バックナンバー
カテゴリ
ブログ記事検索
お友達・おすすめサイト
あまつのひみつ

23/奴隷区 僕と23人の奴隷

奇少物件100LDK
プロフィール

Chill【チル】

管理人:Chill【チル】
モノ作り関したことを中心に書いていこうと思います。
チラシの裏それ以外はチラシの裏
書いていきます。
非表示コメント記事に関係ないご連絡や
非表示コメントはこちら
にどうぞ
リンクフリー当サイトはリンクフリーです

Chill's Mart チルズマート HP:作品一覧ページ
PC壁紙 Hatena Fotolife:壁紙
お絵かき Pixiv:お絵かき
deviantART作品アルバム deviantART:作品集 海外
素材集 Flickr:素材集
snsサイト Facebook:フェイスブック
icon_artmeter.jpg ART-Meter:1点モノ作品
shop_clubt.png クラブT:グッズ・雑貨販売
shop_upsold.png UPSOLD:グッズ・雑貨販売
zazzleZazzle:グッズ・雑貨(世界)
現在時刻
ブログでは、色んな作家様を紹介させて頂いておりますが、著作権の侵害を目的とするものではありまません。
記事などに用いている画像・映像などの所有権は、それぞれの著作者・団体に帰属しています。
作品画像を始め、著作権などの問題がありましたら、ご連絡下さい。
著作権所有者様からの警告、修正・撤去などのご連絡があった場合は迅速に修正、削除させて頂きます。
月別過去の記事

総記事数:
スポンサー
お知らせ&ミニブログ
Twitter 最近記事のRSS
Twitterアカウントについて。 です。

このブログをリンクに追加する
ブログランキング
日替わりで集計しています。
人気ブログへビジネスブログ100選
にほんブログ村へblogram投票ボタン
CoRich
ブログランキング
web拍手 by FC2
押した人は私がピックアップされた時に
「ワシが育てた」と言ってもいいです。

ブログランキングについて
スポンサー