ポートフォリオ備忘録 -ファビコン-

タブの左側にあるアイコンオシャレにしたいよね

目的

たくさんタブ開くとあのアイコンだけ表示されるんですけど、何も設定してないと地球儀みたいなアイコンでちょっとダサいから変えたい。

実際のコード/html

<link rel="icon" type="image/png" sizes="16x16"  href="cmn/favicons/snowflake_white.svg">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

解説

• ファビコン設定:

  • <link rel="icon" type="image/svg+xml" sizes="16x16" href="cmn/favicons/snowflake_white.svg">

    • このタグを使用して、ウェブページのファビコンをSVG形式で設定しています。type="image/svg+xml"とすることで、ファイル形式が適切に指定されています。

    • SVG形式以外も利用可能です。(.png/.ico/.jpg/.jpeg/.gif)

• Windowsタイルカラー:

  • <meta name="msapplication-TileColor" content="#ffffff">

    • このタグを使用して、Windows 8以降のタイルカラーを白色に設定しています。ユーザーがサイトをスタート画面にピン留めしたときに適用されます。

• ブラウザテーマカラー:

  • <meta name="theme-color" content="#ffffff">

    • このタグを使用して、モバイルブラウザのテーマカラーを白色に設定しています。ブラウザのツールバーの色が変更され、サイトのデザインと一貫性を持たせることができます。

素材をお借りしたサイト

雪の結晶アイコン1 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

完成図(通常画面/拡大画面)

通常

拡大