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

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

2016-11-12 最終更新日:2016-11-13

サイトを作成する上で必須になってきていますファビコンについてご紹介します。 サイト表示にはわかりやすい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∞

favicon web ファビコン
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

アイキャッチ
ワードプレスでJSのインラインスクリプト設置方法

今回はワードプレスにインラインスクリプトを入れる場合の対処方法です。 jQueryなどでオプション指定したりタグなどを入れ込んだりするときに有効です。 結構簡単です。割と最近なんですがそれ用...

02 Sep 2017

アイキャッチ
ブートストラップv3からv4の変更点をご紹介

ようやくv4のβ版が登場しました。あれから2年です。。。長いですね。 あとはβ版が何個か出たら正式リリースするようなのでもう少しで正式版はリリースしそうです。 多少変わるところはあるかもしれ...

27 Aug 2017

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

著者

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

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

タグクラウド

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