写真や画像から簡単に各種faviconを作成してくれるWebサービス

先日Webサイトを作っていたときに「画像で無くて写真からfaviconを作りたいなー」と思いました。以前はフリーソフトで作っていたのですが、大きなサイズは対応していないためさて、どうしようかとWebサービスを探しました。見つけたサービスはとても簡単で分かりやすかったので、それについて書きます。

画像から各種Faviconを作ってくれる Favicon Maker

見つけたサイトはこちらです。

Favicon Maker

UPLOAD IMAGE と書いてある所にfaviconにしたい画像ドロップします。

あっという間に終わってしまうので動画で撮ってみました↓

ドロップしてすぐにzipファイルがダウンロードできます。zipファイルを開くと

各種faviconとそれの表示確認をするためのHTMLjadeファイルが入っています。

HTMLファイルをブラウザで開くと

こんな感じでfaviconが使えるということが分かります。HTMLソースには、

こんな感じにコードが書いてあって、どのファイルがなにで使われるのか分かるようになっています。これを参考にHTML部分をコーディングすればiPhoneやiPad、Androidで使われるWebクリップ用のアイコンも指定できるようです!

簡単な上に、親切丁寧ですね!

faviconを作るときはこのWebサービスを使っていきたいと思います♪

おまけ:faviconの元画像について

あっという間に説明が終わってしまいましたので(^_^;、faviconの元画像についてちょっと書きます。

今回使ったウサギの画像はパソコン画面に立てかけて撮ったもので、そのままfaviconを作ったときは

こんな感じで、ブラウザで見ると

こんな感じでした。背景が模様になっているとfaviconになったときにあまりはっきりしない感じです。なのでfaviconにする元画像は背景を1色にして、画像とコントラストが付く色にしておくと良い感じだと思います。

*参考までにこのウサギはiPhoneケースです(^_^;

ウサギが白い場合は、背景をピンクにして、

こんな感じにするとか

人の写真だと

こんな感じになります。人はなかなか難しいですが見たことのある写真なら、あの人のサイトというのがおぼえやすくなるかも?しれません(^_^;

おまけ:jadeってなに?

HTMLと一緒に入っている favicon.jade というファイルがありました。

ちょっと興味があったのでググってみました。

Jade について。

ざっと見たところですが HTMLを開始、終了タグを使わずに省力化して書ける 記法、プラスα なものみたいです。

favicon.jadeをテキストエディタで開くと、

こういう感じになっていて、これは先ほどの favicon.html と同じ内容を示しているということです。

見比べてみると確かにこの書き方の方が、Shiftキーを押す手間も減って、こっちのが書きやすそうです。要素をカンマでつないで追加して行く方法も分かりやすい。

今後このjade記法が色々なところで使えるようになるかもしれないので、知識としてこういうものなのかーと分かっておくと何かとよいかもしれません。

というホントにおまけ情報でした(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る