Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

コーダー

ファビコンの作り方「自作したい人向け」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはあなたのサイト用に、

ファビコンを作りたい。

そう思ってませんか?

 

この記事ではファビコンの作り方を、

紹介してます。(自作方法を)

 

 

なので、あなたがこの記事を見れば、

あなたの自身のファビコンを作ることができるでしょう。

 

ということで、ファビコンを作りたい場合は、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

ファビコンを作るにはこれで

 

ということでまず結論です。

 

ファビコンを作るには、

以下のサイトを使いましょう。

https://www.favicon.cc/

 

このサイトでは、あなた自身で好きな

ファビコンを作ることができます。

 

 

なので、ファビコンを作りたいあなたに、

おすすめです。

 

ちなみに具体例といっては何ですが、

このサイトで僕自身でファビコンを作ってみました。

 

ファビコン作り方

 

このように、このサイトを使えば、

ファビコンを自由に作ることが

できます。

 

 

ファビコンの作り方〜サイトの使い方説明

 

ということで、ファビコンの作り方ということで、

このサイトの使い方を説明していきます。

 

まずはサイトにアクセスしましょう。

 

で、次に、真ん中にカンバスがあるので、

そこに絵を書いていきましょう。

 

ファビコン作り方

 

(カンバスはこのひよこが書いてる部分です)

 

絵を書く際には、カンバスの右にある、

色を選択して、ドット絵みたいな感覚で、

カンバスのマスを1マスずつ、

 

クリックして色を塗っていけばOKです。

 

 

そして、絵ができたら、

画像中央下にある、

DOWNLOAD FAVICON

 

というボタンをクリックすれば、

あなたが作った絵がファビコンとして、

ダウンロードされます。

 

各機能の説明

 

で、一応使うであろう、ボタンの説明しておきます。

 

色の選択方法

 

まず繰り返しになりますが、

カンバス右にあるのがカラーピッカーで、色を

選択できます。

 

消しゴムを使いたい場合

 

で、その下にあるtransparent、

というのが、透明のことでして、

消しゴムがわりになります。

 

色を塗っていて、消したいとこが出てきたら、

このtransparentをクリックして、

カンバスの色を消したいマスをクリックしましょう。

 

すると消えますよ。

 

1から書き直したい

 

で、1から書き直したいって時は、

カンバスの左にある、

CREATE NEW FAVICONをクリックしましょう。

 

するとカンバスの今まで色を塗った部分が、

全部消えて最初の白紙の状態に戻ります。

 

 

またこのカンバスは最初は透明の状態なので、

色を塗らなかった部分は、透過した状態で、

画像が書き出されます。

 

なので、透明にしたい場合は、

透明にしたい部分は、何も色を塗らず、

放置しておきましょう。

 

 

書いた絵がどんな感じになるか見てみたい

 

また一度絵を書いてみて、

画像にするとどんな感じになるのかみたい場合は、

画面中央下にある、previewというとこをみましょう。

 

するとタブにどんな感じで表示されるかみれます。

 

 

とだいたい使うボタンとしては以上ぐらいだと、

思うので、上記ボタンを駆使して、

あなただけのファビコンを作りましょう。

 

スポンサードサーチ

ファビコンの作り方〜絵を書くとき用

 

また、ファビコンの作り方としてですが、

一応頭の中にこんなファビコンにしたいっていう、

絵を描いておいた方がいいです。

 

というのもいきなり描こうとしてもむずいです。

 

なので頭の中でイメージを作った方がいいです。

で、できたらそれを紙に絵を書いておくと、

なおいいです。

 

 

僕は頭の中のイメージだけでやりましたが、

紙に書いた絵を見ながらファビコンを作ると、

だいぶ簡単になると思いますので。

 

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

ファビコンの作り方ですが、

https://www.favicon.cc/

このサイトを使いましょう。

 

するとあなたのファビコンを作ることが

できますよ。

 

 

ちなみに僕もファビコンを作り、

設定しましたが、タブの所に表示された、

ひよこちゃんが、可愛くてお気に入りです。

 

ということで、早速あなた自身でも

ファビコンを作ってみましょう。

 

 

ファビコンなんて何になるんや、

と思うかもしれませんが、

設定すると楽しいですよ。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-コーダー

スポンサードサーチ

関連記事

no image

photoshopのスライスで不要な部分が保存されるのを防ぐ方法

どうも、チャーさんです。   あなたはphotoshopでスライスをした際に、 範囲選択した部分以外の不要なスライスが、 保存されてしまって困っていませんか?   この記事では、不 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

グーグルマップ埋め込みをする簡単3ステップを紹介

どうも、チャーさんです。   あなたは、グーグルマップの埋め込みは、 どうやってやればいいのか? と疑問を持っていませんか。   この記事では、グーグルマップの埋め込みの、 方法を …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。