スマホ向けのファビコン設定

こんばんは、こうちゃんです。

今回はサイト作りの際に見栄えに役立つ、
ファビコン（favicon）の情報紹介です

ファビコンとは、元々パソコンのブラウザ上でブラウザ上部のタブに表示されるアイコン画像のことで、ブックマークした時などにも表示されます。
こちら、スマホでも、仕様は異なりますが、
ホーム画面にお気に入りでショートカットを登録した際などにはスマホ向けファビコンが表示されることとなります。
ファビコンは通常のWebサイトとは別に、スマホ向けの指定をすることができます。

画像は、PC向けですと、.icoの拡張子で指定した画像ファイルになりますが、
スマホ用でしたら、.pngのファイルで用意することになります。
そして、今のメジャーなスマホ用OSですと、iPhone、Androidがありますが、
それぞれに対して、ファビコンの指定は以下のようなタグをhead要素内に記載する方式になります。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

記載はこのようなタグを書き、画像は参照できれば大丈夫ですので、
href以降のパスは好きなようにサイト内に配置して構いません。

このようにすれば、それぞれのスマホでお気に入りした時に、
指定の画像がアイコンとして表示されます。

こうちゃん

新時代の画像規格webp

こんばんは、こうちゃんです。

せっかくの技術系のITエンジニアでマニアックな研究オタクでもあるので、
ちょっと最近出てきたファイルの種類でひとつご紹介。

webpファイル

こちら、googleが提唱する新規格の画像ファイルでして、

WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。

とのことで、google開発による画像フォーマットで、主にweb重視のgoogleらしく、画像ファイルのサイズの低容量化ができているようです。
まだ既存のwebサイトを見る限りは低容量で高速表示を目指すサイトで使われているのはjpgファイルが多いですが、今後普及も進むかもです。

ただ、他の画像とのフォーマットの違いで、混在している現在では若干不便なところも否めません。

今のところ、例えばwebpファイルをjpgファイルに変えて使う場面などでは、単に拡張子を変えるだけでは対応できず、技術的に変換する必要があり、各種ソフトウェアや、

https://convertio.co/ja/

のようなオンラインの変換サービスなどを使う必要があります。

まだこれから広がりゆく技術だと思われますので今の内に把握、チェックしておくことをオススメします。

こうちゃん