[初めてのwebサイト作成レッスン3]
PCブラウザのタイトルタブにアイコンを表示させよう

🌹レッスン3🌹

PCブラウザのタイトルタブやスマホにアイコンを表示させよう


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. タイトルタブにアイコンを表示させよう

赤丸の部分です

アイコン

まず表示させたい画像を用意します。


2. 画像の準備

準備するパソコン用の画像サイズは
 ♦「16×16px」インタネットエクスプローラー用
 ♦「32×32px」Chrome Firefox Safariブラウザ
 ♦「48×48px」Windows用
 ♦「64×64px」高解像度のWindowsDesktop用
 ♦「180×180px」アップルスマホ用
 ♦「256×256px」アンドロイドスマホ「favicon.ico」さえ用意していれば、png形式は不要
 ♦「260×260px」「favicon.ico」というものが必要で、拡張子が.icoのファイル作成用の画像が必要とwebで調べました。

今回用意する画像は写真ではないので、jpegではなく、pngかgifがいいと思います。

私は、絵をかくのが下手なので、無料イラストをダウンロードしました。

パソコンにプリインストールされている、ペイントでサイズ変更しご自分の管理しやすいファイル名で保存していきます。

フォルダ

3. <head></head>の間にタブアイコンの設定をしていきます。

"ico/xxxxxx" の部分をご自分が用意された画像ファイル名に変えてくださいね。

下記の桃色の文字の部分を入力します。

  
  <head>
  
  <link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
  <link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
  <link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
  <link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />
  
  </head>
  
  

上書き保存します!

それと、拡張子が「.ico」のファビコンというものが必要でした。

https://ao-system.net/alphaicon/

私は上記のサイトで間違えて、248×248pxサイズで無料で作ってもらいました。

でも問題ないから、私はこのままでいいや(^^ゞ

皆さんは、256×256pxサイズで用意してみてね!

☆インターネットエクスプローラーのコードを追加

Windows 7と同様、インターネットエクスプローラー8~10は、既にマイクロソフトのサポートが終了していますので、省略します。

Windows 10ではOS標準ブラウザがMicrosoft Edgeへと正式に切り替わり、IEの開発は事実上、終了しています。

下記の桃色の文字の部分を入力します。

  
  <head>
  
  <link rel="icon" href="ico/itigofavicon248px.ico"/>  
  </head>

上書き保存します!

☆スマホ用アイコンのコードを追加

下記の桃色の文字の部分を入力します。

  
  <head>
  <link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
  <link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
  <link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
  <link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />
  <link rel="icon" href="ico/itigofavicon248px.ico"/>
  
  <link rel="apple-touch-icon-precomposed" href="ico/itigo180px.png" />
  
  </head>
  
  

上書き保存します!

追加したコードの説明

スマホのブラウザで表示させるためのコードです。

お気に入りやブックマークに登録するとアイコンが表示されるようになります。

アイコン

See you again Take care (^.^/)))~~~bye!!




TOP