Доброго времени суток!
Вам когда-нибудь хотелось узнать как устроены файлы PNG? Нет? А я все равно расскажу.
Формат PNG(Portable Network Graphics) был изобретен в 1995 году, чтобы стать заменой GIF, а уже в 1996, с выходом версии 1.0, он был рекомендован W3C, в качестве полноправного сетевого формата. На сегодняшний день PNG является одним из основных форматов веб-графики.

Под катом вы найдете общее описание строения PNG-файла, некоторое количество картинок-схем, препарирование в hex-редакторе, и, конечно, ссылку на спецификацию.

Каждый сайт должен иметь favicon. Если вы до сих пор не сделали значок для вашего сайта — сделайте, теперь это еще проще!
Faviconist — новый favicon генератор от Michael Mahemoff.

Вам больше не нужен Photoshop для создания простого значка. Как Mahemoff пишет в своем блоге: Faviconist для 95% людей, которых устроит микро-дизайн их иконки, остальным все равно придется прибегнуть к Photoshop.

У каждого из нас, полагаю, в любимом браузере постоянно открыты несколько вкладок одновременно. Не раз бывают случаи, что и заголовка вкладки не видно — лишь favicon'ки. Но часто они информации, кроме как отображения логотипа сайта, не дают. И, наверное, зря. Но мы постараемся и здесь использовать это место (целых 16px*16px!) так, как хотим. По крайней мере, будем знать, как это можно сделать.

Время от времени у меня возникает ощущение, что крупные сайты тяготеют к синим оттенкам в оформлении и логотипах. Решил, что праздники — хороший повод убить немного времени и разобраться, реальность ли это или всего лишь «фейсбук-эффект».

В начале 2010-го года Дэвид Фифилд и Брэндон Энрайт (компания Nmap) с помощью Nmap Security Scanner и скриптов провели проверку самых посещаемых сайтов Интернета (по данным Alexa).
Результатом этой работы стал «Портрет Интернета»: favicon.

Теперь Google Reader показывает иконки фидов на которые вы подписаны, об этом разработчики рассказали в своем официальном блоге
Теперь стало гораздо легче и приятнее ориентироваться между фидами, и стало немного веселее (не стало этого уныния).
Включить это можно в настройках. (галочка «Show favicons for subscriptions.») Или же в свойствах «Subscriptions» — галочка «Use favicons».

Тот факт, что iPhone предлагает наиболее развитый мобильный браузер среди мобильных платформ, пожалуй, ни у кого не вызовет сомнений. Однако не все знают, что довольно небольшими усилиями можно сайт сделать еще более дружественным к тем, кто смотрят его на iPhone или iPod Touch.

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />

и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:

Меня уже пол года интересует вопрос: неужели google не может нарисовать иконки для своих сервисов? Или они считают что это не важно.
Вот что я имею ввиду:

Поясню.
Первая группа иконок — сервисы Яндекса которыми я часто пользуюсь. Я думаю нет смысла расписывать где что.
А вот вторая группа — сервисы Google. Эмм… кто здесь кто. В принципе я привык что вторая с права — gmail.com/.

Обращаюсь к людям, разрабатывающим различные web-сервисы: не ленитесь оформить вашу работу, быть может это кому-то упростит жизнь.

p.s. сильно не бейте, первый пост.

Давно заметил за огнелисом (на других не проверял) странности в отображении иконки Reader'а в панели закладок. Если закладка ссылается на http://www.google.com/… , то иконка на закладке совпадает с фавиконом страницы: , но если ссылка имеет вид https://www.google.com/… , то мы видим уже иконку приложения, ужатую до 16x16: (сразу и не разглядеть, что на ней). Но это не всё: она имеет свойство спонтанно меняться как на родной фавикон, так и на цветастую иконку Гугля.

Знаете, фавикончики в ico это как-то прошлый век =) Давайте будем модными, современными и все такое. Короче, берем иконку в png (да-да, с прозрачностью и всеми делами), сохраняем в размере 16×16, на сайте (в блоке <head>, ага) подключаем так:

<link rel="icon" type="image/png" href="favicon.png" />

Особенно под впечатлением владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>

Над записью витает дух уже почти сгнившего трупа IE6, который вообще не знает о чем это все, ну да и фиг с ним =) Все, изыди.

UPD: Спасибо хабраюзеру NickyX3 за интересное уточнение:

Автор забыл указать, что иконда для springboard тачей и яблофонов будет в таком варианте закруглена по углам и на нее будет наложен блик автоматически самоим девайсом. Для избежания этого (совсем красивая кастом иконка) вместо apple-touch-icon следует написать apple-touch-icon-precomposed.