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

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

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

最近の投稿

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

アイキャッチ
MacのイラストレータデータをPDFに変換した容量を削減

なぜかMacのイラストレーターからPDFに保存した際ってほとんど容量変わらないですよね。とりあえず適当にイラストレーターデータを作ってみました。画像を入れてイラストデータ入れてtestdata....

04 Nov 2017

アイキャッチ
Macで画像の変換やリサイズ一括処理の方法

Mac標準で画像一括処理が出来るんです。フォルダアクションを使うことでjpgからpngやpngからjpgが可能です。 やり方は簡単です。アクションを加えたいフォルダを右クリックでサービスからフ...

27 Oct 2017

アイキャッチ
有名なアイコンフォントをpngで使う方法

サイトのカンプを作るときに最近ではアイコンフォントを使うことはもう当たり前になっていますが、アイコンフォントをフォトショップやスケッチに埋め込むときに便利なサイトをご紹介します。 fa2png...

20 Oct 2017

アイキャッチ
500 Internal Server Errorのcgiエラーの対処方法

久しぶりにcgiのフォームを使いました。昔はよくフォームならcgi(perl)だったのですが最近はほとんどワードプレスのプラグインだけで行うことが多くなりましたがまだ少なからず対応する機会がある...

14 Oct 2017

著者

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

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

タグクラウド

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