ファビコンを簡単に作成できる無料ツール!テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
Post on:2020年5月20日
数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。
ファビコンは、テキスト・画像・絵文字から簡単に生成でき、日本語や自分の画像からでも生成できます。また、複数の画像サイズ・フォーマット、それらの実装コードも生成してくれる優れものです。
![デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツール](http://coliss.com/wp-content/uploads-202002/2020051901-01.png)
favicon.ioでは、3種類を元にファビコンを生成します。
- テキストから
- 画像から
- 絵文字から
まずは、テキストからファビコンを生成してみました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-03.png)
入力欄に必要な項目を入力するだけで、ファビコンを生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-04.png)
当ブログの「コ」を入力
複数のテキストを入力する場合は、「Font Size」を変更します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-05.png)
当ブログの「コリス」を入力
テキストや背景のカラーを変更すると、当ブログで使用しているファビコンに似た感じになりました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-06.png)
カラーを変更
デザインが完成したら、「Download」をクリックすると、ファビコンがダウンロードできます。対応フォーマットは、下記の通りです。
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
同時に、ファビコンの実装コードも生成されます。
<head>〜</head>内に記述します。
1 2 3 4 |
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> |
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-07.png)
実装コード
画像からもファビコンを作成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-08.png)
画像をアップロードするだけでなので、簡単です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-09.png)
すぐにファビコンが生成されます
絵文字は、探すのが大変なくらいたくさんの絵文字が用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-10.png)
絵文字からファビコンを生成するのもいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020051901-11.png)
すぐにファビコンが生成されます
sponsors