ホーム / ジェネレーター /

簡単！ファビコン作成して設定解説まで！初心者必見

2023/04/21

ジェネレーター

ファビコンジェネレーター、アイキャッチ画像

ブログの印象を左右するファビコンを手軽に作成できるジェネレーターを使い、簡単に作成から設定まで完了させましょう！この記事では、ファビコンの基本知識やサイズ、設定方法などをわかりやすく解説。ブログの魅力をアップさせるファビコンを活用して、プロフェッショナルな印象を与えましょう！

Favicon generator

(ファビコンジェネレーター)▼  Favicon Generator

Favicon Generator

　　　 　　 　　
▲




使い方 & 設定方法(Blogger ＆ WordPress) 画像で解説


Document
(この下からGoogle Bloggerでの設定) 

❶．『ファイルを選択』ボタンを押す


自身のフォルダーの『ファビコン』に設定したい写真や画像を選択

(ファビコンに設定する画像はあらかじめご用意ください)





❷．『ICOファイルダウンロード』ボタンを押す。


ファビコン、Fileを選択解説画像


読者がわかりやすくなるように親切に下矢印画像

ファビコン、IOCファイルダウンロード解説画像

Windowsの場合、ダウンロードフォルダーい保存されます。


❸．Bloggerでの設定➩ファビコン➩ファイル選択➩保存ボタンを押す。　以上

ファビコン、ブロガーファビコン設定手順解説画像



ファビコン、ブロガー解説ファイルを選択ボタン押す説明画像



[ファビコンの設定]　保存ボタンを押す　図解５参考写真

保存ボタンを押してから、反映されるまでに時間がかかります。一日程度たってから反映される事が多いのでそれまで待機してから確認してください。





faviconとは？ファビコンの基本知識


ファビコン説明参考画像


Faviconとは？

faviconとは？

ファビコンとは、webサイトのタブやブックマークに表示される小さなアイコンのこと。


ファビコンとは、下に 表示され た画像などの事です。

ファビコンとは？　例)ブラウザータブ 見本画像

sizeは？

 16x16ピクセル、32x32ピクセル、48x48ピクセルなどの正方形の画像が昔から一般的みたいですが、最近は512×512等のsizeもOKのようです。


★★★

サイズ 用途
 16px ×   16px Edge、Chrome、Firefox、Safari等のブラウザタブ用
 24px ×   24px Internet Explorer 9のピン留め機能用
 32px ×   32px ブックマークバーに表示されるアイコン用
 48px ×   48px Windowsデスクトップにおけるホーム画面サイトアイコン用
 64px ×   64px 高解像度Windowsデバイス向けサイトアイコン用
 96px ×   96px Google TV向けサイトアイコン用
128px × 128px Chromeウェブストアアプリのアイコン用
180px × 180px iPhone、iPad、Android等のスマートフォン・タブレットのホーム画面アイコン用
192px × 192px Android Chromeブラウザのホーム画面アイコン用
256px × 256px Windows 10のスタートメニューアイコン用
512px × 512px macOSのSafariのピン留めタブ用やウェブアプリマニフェスト用
★★★

File形式は？

.gif .png .ico が使用できます。


.icoファイルじゃないと表示されないブラウザーもあるみたいなので、無難に.icoファイルをオススメしているのでジェネレーターを使って作成してください。


当ジェネレーターの.icoファイルに内包されるsizeは16px×16pxと24px×24pxと 32px×32pxの3sizeになりますのでファイルサイズは軽いです。





ファビコンの重要性、設定メリット


  • ブランド認知: ユーザーが認識しやすい、ブランディング効果の向上

  • ユーザーエクスペリエンスの向上:  ユーザーが見つけやすい。

  • 信頼性の向上: ユーザーは信頼感を持ちやすくなる。


  • SEO（検索エンジン最適化）への寄与: ファビコンは、検索エンジン最適化（SEO）にも影響を与えることがあり信頼性のあるものとして評価し、検索結果の順位に影響を与える可能性があります。


★ファビコンはウェブサイトにとって重要な要素でもあるので、適切な設定と使用が推奨されています。




ファビコン設定後の注意点

1. キャッシュのクリア：設定が反映されない場合、ブラウザのキャッシュを削除してください。


2. ブラウザ再起動：変更が適用されない場合は、ブラウザを再起動してみてください。



簡単に作成できる無料のアイコンweb サイトの紹介



以下は，商用利用OK，クレジット表記も不要のサイト紹介です。

手軽に利用できるので、こだわりがないのであればとっても良いです。


ICOOON MONO　参考画像

ICOOON MONO

https://icooon-mono.com/

＿＿＿＿＿＿＿＿＿＿＿＿＿＿


FLAT ICON DESIGN 参考サイト

FLAT ICON DESIGN

http://flat-icon-design.com/

＿＿＿＿＿＿＿＿＿＿＿＿＿＿


Material Icons 参考画像

Material Icons

https://fonts.google.com/icons

＿＿＿＿＿＿＿＿＿＿＿＿＿＿


Icon-rainbow　参考画像

Icon-rainbow

https://free-icon-rainbow.com/

＿＿＿＿＿＿＿＿＿＿＿＿＿＿




まとめ

まとめ、タイトル画像



要点 ・まとめ・

・ジェネレーター本体(ファビコン制作)
・使い方 & 設定方法(Blogger ＆ WordPress) 画像で解説
・ファビコンとは？ファビコンの基礎知識
・ファビコンの重要性、設定メリット
・ファビコン設定後の注意点
・簡単に作成できる無料のアイコンwebサイトの紹介

と解説させて頂きました。



【ジェネレーター制作での感想】
自作ジェネレーターを何個か作っていましたので、もうこれは自作ファビコンジェネレーターを作成して自分のブログのファビコンを自作でやらないとダメかな？と思い作りました。

ファビコンジェネレーターってけっこう検索すると色々あるので作ってもなーっと思ってたのですが、やってみたら、とても勉強になった事があって、作ってほんとに良かったです。

【お願い】
このジェネレーターを気に入ってくださった方で、紹介したいなと思われる方は、どうぞご自由に、こちらとしてもとても嬉しいです。

【展望】
この先は bloggerの仕様変更に対応や、カスタマイズも考えてはいます。


【注意事項】
★このサイトで作成して使用した『ファビコン』でのトラブル等一切の責任を負えません苦情もうけつけませんので、ご自身の良識の判断にゆだねていますのでご了承ください。



最後までご覧いただきありがとうございます。