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

この記事は約6分で読めます。
この記事は最終更新日から8年経過しています。内容が古い可能性があります。

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

スポンサーリンク

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

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

Favicon Maker

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

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

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

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

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

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

<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>

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

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

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

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

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

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

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

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

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

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

こんな感じにするとか

人の写真だと

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

おまけ:jadeってなに?

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

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

Jade について。

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

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

link(rel='icon', sizes='16x16 32x32 48x48 64x64', href='favicon.ico')
//if IE
  link(rel='shortcut icon', href='favicon.ico')
// Optional: Android & iPhone
link(rel='apple-touch-icon-precomposed', href='favicon-152.png')
// Optional: IE10 Tile.
meta(name='msapplication-TileColor', content='#FFFFFF')
meta(name='msapplication-TileImage', content='favicon-144.png')
// Optional: ipads, androids, iphones, ...
link(rel='apple-touch-icon-precomposed', sizes='152x152', href='favicon-152.png')
link(rel='apple-touch-icon-precomposed', sizes='144x144', href='favicon-144.png')
link(rel='apple-touch-icon-precomposed', sizes='120x120', href='favicon-120.png')
link(rel='apple-touch-icon-precomposed', sizes='114x114', href='favicon-114.png')
link(rel='apple-touch-icon-precomposed', sizes='72x72', href='favicon-72.png')
link(rel='apple-touch-icon-precomposed', href='favicon-57.png')

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

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネットサービス
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

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

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

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

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