ロゴの設置が困難を極めた理由は・・意外なところに

ロゴの設置が困難を極めた理由は・・意外なところに

家紋などの日本の古くからあるロゴ

 

「よく見ると みんなかっこいいよね!!」

 

 

ホームページのシンボルマークの呼び名を「favicon.ico」と言います。いざ作ろうと思うとこの「favicon.ico」という専門的な呼び方を探し当てないと、いろいろ調べることもままならないのが実際のところです。逆に「favicon.ico」という言葉がわかりさえすれば、解説はたくさん見つかりますので簡単に作成できます。HTMLをいじらなくてもよいサービスも紹介しますので、ぜひご活用ください。

 

favicon.icoを上手に貼り付けるための もくじ

 

○「favicon.ico」というキーワードが見つからず苦戦。

 

○キーワードさえ見つかれば設置は簡単?作った画像をまずは変換

 

○HTMLへの記述方法はこのままコピーしたらいい

 

○ファビコンをアップロードする場所にも注意して!

 

○SIRIUSの場合の貼り付け作業も記載しておきます

 

 

「favicon.ico」というキーワードが見つからず苦戦。

 

 

 

「当時の私だけではないはず・・」

 

ホームページ作成をはじめて間もない頃、
どうしても「オリジナルロゴ」を作りたかったので、
試行錯誤してようやく作り上げました。

 

↓これです
faviconのもともとの画像

 

完成して、「なかなかいいものができたなぁ。」と
感動していたのもつかの間でした。

 

どうしたら作った「ロゴ」を設置できるのか
いくら調べても、どこにも書いてありません
でした。

 

ロゴを設置する作業に入ったとたん意外と
苦戦して大変な目にあいました。

 

最終的に時間をかけて調べることが
できましたが、「ロゴ」という言葉で
私が呼んでいた画像には別の名前が
あったのです。

 

「favicon.ico」という言葉を
あなたは知っていましたか?

 

私が「ロゴ」と呼んでいたものは、この
世界では「favicon.ico」と呼ばれていた
のです。

 

「favicon.ico」とは「お気に入りアイコン」
の意味だそうですが、「favicon.ico」という
言葉を知っていれば、もっとカンタンに
調べることができました。

 

しかし、一筋縄ではいきませんでした。

 

「favicon.ico」のことを記載したサイトを
読んでも、たいてい「favicon.ico」とは
どういうものかという解説ばかりでした。

 

「なんで、みんな解説ばかりなんだろう??」

 

結局どうしたら貼り付けができるのか教えて
くれるサイトは「ごく少数」でした。

 

 

 

キーワードさえ見つかれば設置は簡単?作った画像をまずは変換する

 

 

 

用意した画像は、実はそのままでは
ファビコンにできません。

 

画像の拡張子に注目してください。
faviconに使う画像は、拡張子が
「.ico」でないといけないのです。

 

 

バナープラスの機能選択ボタンの画像

 

 

ですので、まず作成した画像の拡張子を
「.ico」に修正して保存しなければいけません。

 

※実は「.gif」でも「.png」でもファビコンは作れますが
 「.ico」で作るのが一番簡単なので、「.ico」での
  説明をさせてもらいます。

 

 

いろいろな方法があるようですが、下のサイトから
アイコンを作成するのが簡単でいいと思います。

 

favicon.icoを作ろうのページトップ画面

 

favicon.icoを作ろう!

 

このサイトでは画像を貼り付けて、
「favicon.ico作成」ボタンを押すだけで
簡単に拡張子.icoのアイコンがつくれます。

 

透過画像のアイコンを作成までできて
しまいますので、ぜひ試してみてください。

 

 

 

HTMLへの記述方法はこのままコピーしたらいい

 

 

 

そして、下の記述を<head>〜</head>内
に記載してゆきます。

 

<link rel="shortcut icon" href="favicon.ico">

 

この場合、「favicon.ico」という名前のアイコン
ファイルをファビコンに利用しています。

 

「○○○.ico」と書いたほうが分かりやすかった
かも知れませんね。

 

アイコンをアップロードして設置する場所によっては、
追加の記述が必要になりますが、次の項で説明
します。

 

 

 

ファビコンをアップロードする場所にも注意して!

 

 

 

ファビコンは、基本的にサイトの最上階層に
アップロードします。

 

最上階層にアップロードすると、サイトのすべての
ページにファビコンが表示されるからです。

 

FFFTPでアップロードする場合を、示してみました。
「最上階層にアップロードする」ということは、下の
画像のように、「index.html(トップページ)」と同列に
アップロードするということです。

 

 

※クリックすると大きな画像が見れます
faviconをアップロードする場所の画像

 

 

もし、もう1つ下の階層にアップロードする場合は
次の通りの記載になります。

 

例えば最上階層の中の「img」フォルダの中にある「example.ico」がファビコンファイルなら、次のような記載になります。

 

<link rel="shortcut icon" href="img/example.ico">

 

 

 

SIRIUSの場合の貼り付け作業も記載しておきます

 

 

 

初心者の頃の私は、作成したファビコン
を「早く貼り付けたい」と思い、自分の
ホームページ作成ソフトで、どこに貼り
付けたらいいのか探しました。

 

はじめは、ヘルプを見て「ロゴの設定」
はどうすればいいのか探していましたので、
どこにも記載が無く、半分あきらめて
いましたが、

 

「favicon.ico」というワードで、設定項目
を探せばすぐにやり方が分かりました。

 

「SIRIUS」の場合であれば、
「サイトオプション」→「サイトデザイン」に
「FAVICON画像」という項目があります。

 

 

favicon.ico

 

 

ここに保存した画像をアップロードするだけ
で簡単に作ることができますよ。

 

 

 

 

バナーも貼ってみましょう。これも難しかったです。
 →10分でできる!バナーの貼りつけ

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

よく読まれる関連ページ

 

  ↓↓一番左をクリックしていくと、順にサイトを見ることができます

バナー貼り付け

10分でできる!バナーの貼りつけ

写真素材

サイトデザインを劇的に変化させる写真素材

SEOに効果あり!404エラーページのカスタマイズへのリンク画像

SEOに効果あり!404エラーページのカスタマイズ

外部Javascript

あなたは外部Javascriptを利用する目的を知っていますか?

 

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです




 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ