簡単ファビコン作成!ファビコンジェネレーターのご紹介

Nov 12, 2016

簡単ファビコン作成!ファビコンジェネレーターのご紹介

2016-11-12 最終更新日:2016-11-13
blog web favicon ファビコン

サイトを作成する上で必須になってきていますファビコンについてご紹介します。 サイト表示にはわかりやすいfaviconを入れることがもはや当たり前になってきていますが、最近は対応ブラウザや機種によっても変わってきますので一括で出力できるFavicon Generatorをご紹介します。

⇒公式サイトはこちら


スポンサーリンク


作成方法

ファビコンの作り方は簡単です。あらかじめPNG、JPG、SVGのいずれかのファイルを用意しておきます。私はpngファイルで作成しています。300x300ぐらいのサイズが良いと思います。最低70x70が必要です。

FaviconGenerator

トップページのSelect your Favicon pictureをクリックして画像を選択します。 因みに試しにファビコンを作成したい場合はDemo with this pictureをクリックすれば仮のアイコンを作成することが出来ます。

FaviconGenerator

あらかじめHTML5のアイコンを作っておきましたのでこちらを選択します。

FaviconGenerator

するとすぐに変換されます。

FaviconGenerator

設定画面が出てきますが、入力するのはApp nameというところだけです。HTML5と入力しました。

FaviconGenerator

Generate your Favicons and HTML codeというボタンをクリックします。

FaviconGenerator

Favicon packageをクリックしてダウンロードして完了です。 アイコンファイルがzipにて圧縮されていますので解凍してサイトのindex.htmlファイルと同じ階層にアップロードして head内に

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
</pre>

を記入してできあがりです。

公式サイトのトップページにCheck your faviconという項目にアドレスを記入するところがありますのでここで確認が出来ます。

FaviconGenerator

このようにチェックが完了できると緑色で表示されます。うまくいかない場合はエラー表示で赤く表示されます。

参考になれば幸いです。


∞Tadashi Suyama∞

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

Similar Posts

最近の投稿

アイキャッチ
anime.jsの使い方

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。 anime.jsはとっても軽量でかつ簡単に使えるので去年あた...

18 Feb 2017

アイキャッチ
鳥取県米子市の大雪での現状報告

先月に続いてまた大雪です。鳥取市の方がだいぶ雪が積もっていますね。90cmとは。。。 先月同様駐車場から出られないほど雪が積もりました。今日は雪かきで疲れました。。。週末で助かった部分がありま...

12 Feb 2017

アイキャッチ
親要素をクリックしたら子要素のリンクを発動させる方法

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。 例えばli要素の中にdi...

04 Feb 2017

アイキャッチ
ワードプレスでデバッグログをダッシュボードに表示させる方法

ワードプレス運用中のサイトのエラーログを出力させてそれをダッシュボードで見る方法をご紹介します。 ログ出力方法は結構いろいろなサイトに書かれているのですがそれをダッシュボードに表示させる方法が...

28 Jan 2017

アイキャッチ
bttn.cssで簡単にボタン作成

簡単にボタンが設置できるbttn.cssのご紹介です。数も12種類のボタンだけで色と大きさが指定できます。 容量も少ないのでさくっと出来ます。下記公式サイトからダウンロードして使うかcdnjs...

21 Jan 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

blog web favicon ファビコン
フッターイメージ