[B! favicon] opparaのブックマーク

favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。 favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"> <

oppara 2022/03/12

リンク

【2021年版】favicon（ファビコン）の設定方法と画像の作り方

はじめに新しく作成したサイトにfaviconの設定をしようとしたら、たくさんの詰まりポイントがありました。記述内容が多すぎる…　結局どれが必要なの？ダークモードで画像が見えない！ Safariだけ画像が出てこない！そこで今時の記述の仕方や、画像データの仕様について、まとめました。同じように詰まった人の参考になれば嬉しいです。結論指定方法 faviconを表示させたいページのhead内に以下の記述を追加します。 <head> <link rel="icon" sizes="16x16" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link r

oppara 2022/03/12

favicon

リンク

Don’t Forget About Favicons on Retina Screens

Thomas Fuchs needs no introduction. I've looked up to Thomas' animation artistry since his Prototype/script.aculo.us days. He's more recently created Zepto.js, a micro multipurpose library for desktop and mobile devices. His latest creation, however, is an awesome eBook called Retinafy Your Websites and Apps, a guide to creating, using, and optimizing images for mobile and desktop devices. The fol

oppara 2012/10/12

Zepto.js

リンク

Piecon / Pie charts in your favicon!

Pie charts in your favicon! A tiny javascript library for dynamically generating progress pie charts in your favicons. Look up at your tabs for the live demo! Documentation Basic usage Piecon.setProgress(12); Piecon.setProgress(25); ... Piecon.reset(); Options Piecon.setOptions({ color: '#ff0084', // Pie chart color background: '#bbb', // Empty pie chart color shadow: '#fff', // Outer ring color f

oppara 2012/08/19

リンク

https://hellowebapps.com/products/jquery-favicon/

oppara 2012/03/11

リンク

こんな手が！Faviconを使って通知数を表示する·Tinycon MOONGIFT

Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。 Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。 Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。デモです。どんどん数字が繰り上がっていきます。実装する際のコードです。数値を当てるだけの簡単な使い方です。 Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。 TinyconはJavaScript製のオープンソー

oppara 2012/02/19

リンク

faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」:phpspot開発日誌

faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 2012年02月09日- Tinycon - Favicon Alert Bubbles faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」次のように、Chromeのfavicon部分を書き換えて何件の通知があるかを分かりやすくできるJSライブラリです。 Chromeで開いてみると通知がどんどん増えていくのが面白いです。 IEでも、タイトルを書き換えて (27) タイトルのような感じで通知が分かるようになっています。 facebook等で通知があると嬉しいものですが、こうした形で通知がよりわかり易くなるといいですね。関連エントリ高機能なカルーセルを実装するjQueryプラグイン５０まとめ時間の入

oppara 2012/02/12

リンク

Create a Blank Favicon with Data

I was recently setting up a virtual host and diving into development when I needed to debug a JavaScript issue. One thing that started annoying me right away was the console message notifying me that the favicon.ico file couldn't be found. I hadn't put one there and had no desire to...but that damn message was bugging the hell out of me. I did a quick search and found a tiny data URL snippet to