韓国ドラマ感想 ゆる~く更新中

ファビコンの作り方…おばちゃんでもできたヨ!!  

シェアする シェアする シェアする 後で読む ブックマークする LINEしちゃう
こんばんは~
今日は、ファビコン作りをしていて…気が付いたらもう寝る時間…heratss.jpg


ファビコンてナニさ!って方…

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
Favicon - Wikipedia



PCで見てる方は、タブの所…タイトルの横に付いてるアイコンです。
お気に入りに入れると、タイトルの横に表示されるアイコンです。
fabicon.jpeg

Amazonとか楽天のページの左にあるマークのことです。
ファビコンの設定をしていないと、アメブロの人はアメブロのマークになりますよね?


まず、ファビコンの絵を描く…探す?

私は、Photoshopなんて高価なソフトは持っていないので、フリーのPixiaを使っているのですが…
これで、適当に絵を描いて…どうせ小さくなるので、ざっくりな絵の方がいいですよね?
32✕32のサイズにしました。

モノクロのアイコンを無料で配布しているところがあるので、DLして色を変えてもいいのかな?
とりあえず簡単な絵で作ってみました。


拡張子を変更する

描いた画像の拡張子…JPG、PNG、GIF、BMPを.icoってのに変換しないといけないらしいです。
簡単に変換してくれるところがあったので、早速そこでサクッと作って(笑)

ファビコン favicon.icoを作ろう!


自分のブログに設置

これは、ブログによってやり方が違うのかな?
fc2の場合は…
変換した画像をアップロードして→テンプレートの設定を開いて…

</head>の直前に↓のタグを貼り付けます。
<link rel="shortcut icon" href="http://blog~~~.ico(ファビコンのアドレス)">
↑<は全角にしてます。半角のままだと見えな~~い。

(ファビコンのアドレス)は、アップロードした画像一覧のファイル情報の所にあるので、コピペ!
…で、完成で~す。


作った感想

拡張子の変換やブログへの設置は、楽にイケたのですが…
画像をどうしたもんか…悩みました。
そこで、だい~~ぶ時間を浪費…

背景を透過したかったのですが、なんだかうまくいかなくて…
でも、白い四角の中にハートでもいいかなぁ?って妥協しました(笑)

普段Google Chromeを使っているので、Firefox、Internet Explorer、Microsoft Edge…そしてスマホでも確認!
できたみた~~い♪たぶん…








関連記事


category: PC スマホあれこれ