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

この記事のURLとタイトルをコピーする

先日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記法が色々なところで使えるようになるかもしれないので、知識としてこういうものなのかーと分かっておくと何かとよいかもしれません。

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

シェアする

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

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。