NickMitin Jan 17 2008 at 14:55

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

1 min

5.9K

Website development*

+38

Comments 49

rimmer333 Jan 17 2008 at 16:18

Классно. Пожалуйста, перепубликуйте в каком-нибудь тематическом блоге:
http://habrahabr.ru/blog/webdev/
http://habrahabr.ru/blog/javascript/prof…
http://habrahabr.ru/blog/la_france/profi…

NickMitin Jan 17 2008 at 16:28

Перенес в Web-разработку.

rimmer333 Jan 17 2008 at 16:34

Пряник вам

NickMitin Jan 17 2008 at 16:35

Благодарствую.

sylvio Jan 17 2008 at 16:21

а не проще-ли дать скрипту расширение .ico, а апачу указать, что это скрипт php?

NickMitin Jan 17 2008 at 16:25

Я хотел показать концепцию, реализация не столь существенна.

sylvio Jan 17 2008 at 16:29

глупость сказал, каюсь :)

NickMitin Jan 17 2008 at 16:28

UPD: у нас lighttpd ;) Просто для протокола.

q_styler Jan 17 2008 at 18:17

Причём тут расширение? Расширение это вообще последнее дело =).
Можно назвать его хоть .xyu, а в header написать "Content-Type: image/gif"
ну или png.
Это компьютер файлики по расширению отличает, а браузеры по контент-тайпу.

Ну хотя исполнительным скриптом сделать его действительно надо будет.

lahmatiy Jan 18 2008 at 16:51

> Это ~~компьютер~~ операционная система файлики по расширению отличает, а браузеры по контент-тайпу.
Ну и Content-type используется для первичной проверки. Перед обработкой файла все нормальные программы (те же браузеры) смотрят его заголовки. Большинство нормальных программ откроют ваш, к примеру, gif файл, хоть какое расширение ему дай и отдай с любым Content-type.

Gunger Jan 17 2008 at 16:31

Протестируйте в Сафари ;-)

NickMitin Jan 17 2008 at 16:34

Не имею мака под рукой... А виндовая где-то в JS лажает, без дебаггера поймать не получается. :( Сегодня вечером дорвусь до яблока, попробую разобраться.

Gunger Jan 17 2008 at 16:37

Расскажу по секрету. Вылетает alert "!!!" и все :-)

NickMitin Jan 17 2008 at 16:38

Упс. не стер последнюю попытку разобраться дедалертовским методом :) Пофиксил.

Gunger Jan 17 2008 at 16:40

;-) Остается добраться до мака и поправить работу в сафари.

Drakmor Jan 17 2008 at 20:11

У сафари есть проблема, она не хочет перегружать иконку, даже после смены. Постоянно выводит ту, что в кэше. Попробуй выставить при генерации картинки всяческие No-Cache и т.п.

BekoBou Jan 17 2008 at 16:44

Вообще ничего не происходит. Нуль реакции. :(

Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU) AppleWebKit/523.15 (KHTML, like Gecko) Version/3.0 Safari/523.15

BekoBou Jan 17 2008 at 16:41

А во всех браузерах работает? Если да, то автору практически памятник при жизни можно ставить.

Данный метод может выстуапть как дополнительный "информер" для пользователя и стать практически стандартным методом в конструировании пользовательских интерфейсов.

NickMitin Jan 17 2008 at 16:43

IE пока под вопросом. Вечером поэкспериментирую.

Gunger Jan 17 2008 at 16:44

+ Safari не полюбил такого рода извращения :-)

Kela Jan 17 2008 at 16:49

Вообще-то, странно, скрипт http://beta.fobo.ru/temp/favicon.php?ran… выдает хедер

Content-Type: image/png

а вы в скрипте указываете image/x-icon

Да и в самой странице не указан тип иконки:



<link id="favicon" rel="shortcut icon" href="http://beta.fobo.ru/temp/favicon.php?rand=1" />

добавьте правильный type



<link rel="icon" href="http://beta.fobo.ru/temp/favicon.php?rand=1" type="image/png" />

Kela Jan 17 2008 at 16:59

... или все к image/x-icon сведите, включая выдаваемый тип скриптом и сам формат файла

NickMitin Jan 17 2008 at 17:28

выбрал image/png, стало правильнее, но по сути ничего не изменило...

Hitryi_Pryanik Jan 17 2008 at 21:37

иконка должа быть в ico

NickMitin Jan 18 2008 at 11:36

Аргументируйте пожалуйста. Дело в том, что с PNG средствами PHP работать проще. Есть серьезные аргументы в пользу ICO?

lahmatiy Jan 18 2008 at 16:54

Ну если хотите побороть IE, то лучше все таки ico... сами знаете как у него с PNG. Не знаю как в IE7, но до оного IE не понимал ничего кроме ico (могу ошибаться, но вроде было так).

Stanislav_KiteKat Jan 17 2008 at 17:03

Личное мое мнение - не более, чем забавная функция.
Вот представьте, у вас в табах открыто страниц 15 различных ресурсов, но тем не менее вам знакомых. Я в большинстве случаев как раз ориентируюсь по иконке, так как помню их. Сам поменяю или сменит скрипт автоматом - все равно будет путаница. На мой взгляд даже анимация иконок излишняя, не то что их смена.

Eunix Jan 17 2008 at 17:17

Для различных сервисов вроде Meebo или GMail удобно, так как сразу видно, что пришло сообщение.
Видел в интернете подобную реализацию, но пишут, что в Opera и Safari плохо работает.

UFO just landed and posted this here

pixilang Jan 17 2008 at 17:26

в 6 ослике ничего не происходит в фф то же :(

mr_idiot Jan 17 2008 at 17:43

Вконакте когда аудио проигрываешь иконка меняется. Можно посмотреть как там сделано.

iSlayter Jan 17 2008 at 21:59

угу, там js ошибка.

sgnppv Jan 18 2008 at 01:08

Хм и вправду :)

smartov Jan 17 2008 at 18:10

В favicon можно использовать gif. И будет работать точно так-же (То бишь в FF и Opera, и не работать в IE, Safari)

Midgard Jan 17 2008 at 18:31

Небольшой полуоффтоп.
Если сделать favicon типа <link rel="icon" type="image/gif" href="data:image/gif;base64,R0l...куча_символов...gCADs=" />
То иконка будет показываться в браузере (я конкретно про FF) даже тогда, когда картинки будут отключены. Использовал на своем сайте: http://www.visitkozlovka.ru

EugeneDest Jan 17 2008 at 18:35

Для Лиса и Оперы есть еще примерчики: http://www.ajaxify.com/run/favicon/

AIPNZ Jan 17 2008 at 18:37

Спасибо, интересное решение...
Только для чего оно пригодится?

vladimir_yamin Jan 17 2008 at 18:51

вначале - для того, чтобы показать какой умный владелец сайта - потом все себе накопируют и будет дискотека в браузере (когда много окон открыто). :) Потом все наиграются и будет как и сейчас..

NympHsPeak Jan 17 2008 at 19:51

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

mr_idiot Jan 17 2008 at 19:52

в том же контакте например чтобы показать из какой вкладки у тебя сейчас музыка орет

kivsiak Jan 17 2008 at 19:27

Спасибо интересно.

Но смысл фаивокна в том и состоит чтобы однозначно привязать картинку к сайту. Менять фавикон это тоже что менять иконку ярлыка на рабочем столе или иконку окна приложения. Но никак не для использования в качестве динамического элемента интерфейса.

NickMitin Jan 17 2008 at 19:31

В моем случае необходимо просто менять цвет. Ровно для этого все и затевалось.

Hitryi_Pryanik Jan 17 2008 at 21:35

Иконка должна быть в формате ico и иметь сответствующую структуру. А то, что браузеры понимают другие форматы — лишь добрая воля разработчиков.

Что же касается смены, то не пойму зачем это? Анимация? Или индикация некторого процесса? Тогда допустимо.

svt Jan 17 2008 at 21:51

а я бы ещё в .htaccess добавил редирект

RewriteEngine On
RewriteRule ^/temp/favicon.php?rand=1 /favicon.ico

и прописать ссылку на иконку нормальную ;)

AChaplygin Jan 17 2008 at 22:23

Интересно, спасибо. :) Кстати, можно попробовать развить эту идею и сделать анимированный favicon. Например, чтобы по нему время от времени пробегал блик. По-моему, будет смотреться очень здОрово. :)

UFO just landed and posted this here

saMIRo Jan 17 2008 at 23:23

отлично! ум важно иметь) у меня слов нет как хабр меня радует открытыми людьми и открытым кодом) спасибо

saMIRo Jan 18 2008 at 02:03

еще пришла мысль в голову что первый поставит такое себе Лебедев на сайт студии) все наверно помнят его мигающий при наведении логотип) кстати после этого мода на анимированный favicon и зародится)

o_0 Nov 19 2008 at 22:44

К вопросу «зачем» — тут всё просто. Смена фавикона поможет показать разичные динамические состояния сайта. Как было неоднократно упомянуто, ВКонтакте, например, показывает, в какой табе из N-ного их количества играет музыка — незаменимая опция и отличная находка.