ファビコンの作成

2019-05-15

Bloggerカスタマイズ

t f B! P L

オンラインのファビコン作成ツールを使用


The only favicon generator you need for your next project. Quickly and easily generate your favicon.ico file from text, image, or choose from hundreds of emojis. No design or technical skills required.

このオンラインツールは3パターンの作成ツールが紹介されています。

3パターンというのは、ファビコンの元になるものが3種類あるということです。

元にできるのは、文字、PNG、絵文字、です。

絵文字は数百個用意されています。

 今回は文字からファビコンを作成することにします。

文字からファビコンを作成


GENERATE FROM TEXTボタンをクリック。

Textに文字をいれて、あとは色とかフォントの設定ができます。

 Font Familyを選択する


Font FamilyはGoogle Fontsから選択できます。

Making the web more beautiful, fast, and open through great typography


915個のフォントファミリーから選択できます。

LanguagesからJapaneseを選択すると8個のフォントファミリーがでてきました。


フォントファミリーの一つに例文を選択して削除して、そこにファビコンに入れる文字列を入れて、APPLY TO ALL FONTSをクリックするとすべてのフォントファミリーにその例文が入力されます。

これで915個のフォントファミリーを比較した結果、Bonbonを使うことにしました。

ファビコンのデザインを決定



背景色と文字色、文字の大きさ、ファビコンの形を決めるとデザインが決定です。

Downloadボタンをクリックすると、favicon_io.zipファイルがダウンロードされます。

ファビコンをBloggerに登録する


favicon_io.zipファイルを解凍すると、7個もファイルがでてきます。


Bloggerダッシュボードのレイアウト画面で左上にあるファビコンガジェットの編集ボタンをクリックして、ファビコンファイルをアップロードします。

favicon.icoファイルをアップロードしました。

アップロードしたファイルは/favicon.icoでアクセスできました。

このブログならhttps://p--q.blogspot.com/favicon.icoです。

 Firefoxでファビコンの変更を反映させる


ファビコンを変更してChromiumでブログをみるとすぐに変更が反映されていました。

しかしFirefoxでは一向に変更が反映されませんでした。

調べてみるとFirefoxでは、一旦ファビコンを読み込むとそれをキャッシュしてずっとそのファビコンを使うようです。

Few days ago, I've changed the favicon of my website: it works well when I open the website:My website is also in my bookmarks, but it shows the old favicon:I already had a look here, but answe...

ここに簡単な方法が紹介されていました。

Firefoxで更新したいファビコンファイルにアクセスします。

このブログなら、https://p--q.blogspot.com/favicon.icoです。

キーボードでCtrl+F5を押します。

これでファビコンの更新完了です。

ブログ検索 by Blogger

Translate

最近のコメント

Created by Calendar Gadget

QooQ