Как стать автором
Обновить

У PicasaWeb появился собсвенный favicon. Не прошло и пол года.

Чулан
Смотрю каждый день на свой тулбар с букмарками, сепаратором отделил gmail, второй gmail account на нашей фирме, docs.google и свой альбом на пикасе.

До сегодняшнего дня фавиконы были у всех, кроме Пикасы. Даже думал написать им письмо, чтобы добавили. И вот настал этот день, когда фотосервис обзавелся собственной иконкой, с чем всех и поздравляю :)

Picasa — радуйтесь!
Всего голосов 7: ↑5 и ↓2 +3
Просмотры 235
Комментарии 1

Favicon.ico или иконка в адресной строке браузера

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

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.
Читать дальше →
Всего голосов 30: ↑21 и ↓9 +12
Просмотры 24K
Комментарии 24

Динамический Favicon

Разработка веб-сайтов *
Небольшое эссе о том, как менять Favicon без перезагрузки страницы.

Недавно перед нами стояла задача как динамически менять Favicon без перезагрузки страницы. Решение «в лоб», т.е. замена значения href у favicon link ничего не дала, пришлось крепко задуматься и начать пробовать все возможные альтернативные варианты. Сработал способ пересоздания ноды link в документе. Это удалось заставить работать везде, кроме Internet Explorer. Есть подозрение, что ему не нравится имя файла с иконкой или его формат (PNG).

собственно, код
Всего голосов 42: ↑40 и ↓2 +38
Просмотры 5.5K
Комментарии 49

Получаем и отображаем favicon сайта в AdobeAIR

IT-компании
Safari умеет отображать картинки формата .ico, а вот AdobeAIR не умеет, хоть и оба используют WebKIT. Очень досадно, когда хочется около ссылки на сайт отобразить его favicon, а сделать этого не получается.

Решение нашел, хоть и не идеальное. Решил использовать сервис для получения favicon с сайта в png, получать оттуда ответ и кешировать его у себя локально.

ну решил, а дальше-то что?
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 332
Комментарии 1

Favicon — не только картинка. Уже игра.

Чулан
Всем, наверное, известно, что favicon — это значок веб-сайта или веб-страницы, который отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса.

Но не всё так просто.



Одни смышлённые ребята запихнули в эту «картинку» полноценную мини игру (16×16 пикселей!) под названием «DEFENDER of the favicon», используя JavaScript.

продолжить чтение
Всего голосов 53: ↑47 и ↓6 +41
Просмотры 2K
Комментарии 39

Favicon и заголовок окна

Типографика *
imageВозможно, у вас вызовет сомнение тот факт, что иконка сайта и заголовок окна имеют какое-то отношение к веб-типографике, спешу вас заверить. Имеют! Как корешок книги к её обложке. Не буду лить воду и сформулирую правила оформления иконки и заголовка окна, созданые для повышения удобства при навигации по вкладкам.
Читать дальше →
Всего голосов 114: ↑105 и ↓9 +96
Просмотры 6.8K
Комментарии 58

Оформление ссылок цветом и иконками из favicon

Чулан
Недавно наткнулся на интересную JS библиотечку для оформления ссылок в тексте. Идея, возможно, не нова… но в целом такая схема мне кажется интересной и удобной для пользователя.

Пример

Суть в том, что к ссылке скриптом добавляется favicon сайта, на который она ведет. А также, различным цветом выделяются ссылки разного типа.

Читать дальше →
Всего голосов 25: ↑25 и ↓0 +25
Просмотры 639
Комментарии 13

Favicon поиска у Google

IT-компании
image Заметил, что у поиска Google теперь новая картинка favicon. Очень бы хотелось обсудить с вами качество исполнения этих картинок.


UPD: Судя по информации от linche, Google тестирует и потихоньку внедряет новый дизайн.
Всего голосов 132: ↑93 и ↓39 +54
Просмотры 1.6K
Комментарии 117

Старый favicon в Google

GreaseMonkey *
Мне не понравились новые иконки окон Google. Ну вот не понравились, и все. Ничего не мог с собой поделать.
Поэтому полез в Greasemonkey и наваял скрипт, который замещал favicon на тот, что был раньше. И сразу мое психическое состояние пришло в норму ;)

image
Читать дальше →
Всего голосов 150: ↑103 и ↓47 +56
Просмотры 1.6K
Комментарии 71

Favicon для любого сайта в PNG

Разработка веб-сайтов *
Уже в нескольких проектах была необходимость показывать иконки для различных доменов (например, рядом с какой-нибудь ссылкой). Для этого был написан на PHP механизм, добывающий по требованию иконку со страницы по некоторому набору правил (так же, как её добывают браузеры), конвертирующий картинку в png и сохраняющий в специальном месте. Периодически эти иконки обновлялись.

После того, как я в третий раз скопировал этот механизм в очередной проект, я решил создать для себя (и других) сервис, который отдавал бы по запросу иконку в формате png для любого домена. Но ему не суждено было родиться, потому что я случайно наткнулся на аналогичную функциональность, реализованную гуглом. Достаточно набрать адрес www.google.com/s2/favicons?domain=habrahabr.ru и получишь сконверченую в PNG иконку этого домена. Решил, что многим это будет полезно — используйте :)

UPD: нашлись баги. конвертер не умеет работать с прозрачным фоном, а также грузит только те иконки, которые лежат в /favicon.ico, игнорируя мета-теги :( Так что мой сервис, видимо, появится :)
Всего голосов 73: ↑70 и ↓3 +67
Просмотры 7.9K
Комментарии 29

Сервис конвертации favicon доменов в png (с исходниками:)

Разработка веб-сайтов *
Недавно я писал про поиски способов получения иконок доменов в нормальном формате (т.е. png) и о желании написать свой отдельный сервис для этого, поскольку общедоступные конверторы от Google и Yandexа обладают существенными недостатками.

И вот он готов.
хабракут
Всего голосов 37: ↑35 и ↓2 +33
Просмотры 1.3K
Комментарии 26

Небольшая задачка для вебмастеров

Чулан
30 минут бился, но так и не решил.

Задача: определить, по какому принципу в рейтинге автономных блогов Яндекса определяется, будет рядом со ссылкой на блог иконка 16*16 пискселей или больше размером?

Теорий множество, но когда проверяешь их на всех имеющихся примерах, все рушатся… помогите! Очень нужно решить :)
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 195
Комментарии 16

Как сделать favicon в png

Веб-дизайн *
Знаете, фавикончики в 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.
Всего голосов 182: ↑145 и ↓37 +108
Просмотры 113K
Комментарии 53

Firefox и иконки Google Reader

Чулан
Давно заметил за огнелисом (на других не проверял) странности в отображении иконки Reader'а в панели закладок. Если закладка ссылается на http://www.google.com/… , то иконка на закладке совпадает с фавиконом страницы: favicon, но если ссылка имеет вид https://www.google.com/… , то мы видим уже иконку приложения, ужатую до 16x16: appicon (сразу и не разглядеть, что на ней). Но это не всё: она имеет свойство спонтанно меняться как на родной фавикон, так и на цветастую иконку Гугля.
Всего голосов 14: ↑5 и ↓9 -4
Просмотры 163
Комментарии 3

Как сделать сайт более iPhone-совместимым за 5 шагов

Веб-дизайн *
Тот факт, что 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:


Читать дальше →
Всего голосов 95: ↑85 и ↓10 +75
Просмотры 52K
Комментарии 38

Google Reader favicon

Чулан
image
Теперь Google Reader показывает иконки фидов на которые вы подписаны, об этом разработчики рассказали в своем официальном блоге
Теперь стало гораздо легче и приятнее ориентироваться между фидами, и стало немного веселее (не стало этого уныния).
Включить это можно в настройках. (галочка «Show favicons for subscriptions.») Или же в свойствах «Subscriptions» — галочка «Use favicons».
Всего голосов 19: ↑18 и ↓1 +17
Просмотры 192
Комментарии 2

Фирменные цвета сайтов и компаний

Статистика в IT
image

Время от времени у меня возникает ощущение, что крупные сайты тяготеют к синим оттенкам в оформлении и логотипах. Решил, что праздники — хороший повод убить немного времени и разобраться, реальность ли это или всего лишь «фейсбук-эффект».
Немного бесполезной статистики под катом
Всего голосов 154: ↑142 и ↓12 +130
Просмотры 4K
Комментарии 130

Динамический favicon или отображаем карму, не обновляя страницу

JavaScript *
image
У каждого из нас, полагаю, в любимом браузере постоянно открыты несколько вкладок одновременно. Не раз бывают случаи, что и заголовка вкладки не видно — лишь favicon'ки. Но часто они информации, кроме как отображения логотипа сайта, не дают. И, наверное, зря. Но мы постараемся и здесь использовать это место (целых 16px*16px!) так, как хотим. По крайней мере, будем знать, как это можно сделать.
Читать дальше →
Всего голосов 138: ↑133 и ↓5 +128
Просмотры 11K
Комментарии 54
1