Версия для печати темы

Нажмите сюда для просмотра этой темы в обычном формате

Форум о web-дизайне, графике - RusForumz _ Web-дизайн _ Favikon

Автор: nikitar 6.2.2006, 9:25

На некоторых сайтах есть такая фича, которая стала возможна только в IE с 5-й версии - при добавлении сайта в избранное, рядом с названием вместо стандартной иконки IE, появляется собственная, сделанная автором сайта. Такая иконка называется favicon.

Как её сделать?

Сначала её нужно нарисовать. Для этого надо либо скачать специальную программу для создания и редактирования иконок, или воспользоваться каким-нибудь крупным графическим пакетом. Размер иконки должен быть 16х16 пикселей: не больше и не меньше. Если иконка не будет соответствовать этому размеру, то Internet Explorer проигнорирует её.

Итак, вы создали иконку, теперь нужно проассоциировать её с веб-страницей. Для этого сохраните иконку с именем favicon.ico в корневой директории вашего сайта, например, http://www.yoursite.ru/favicon.ico. Теперь каждый раз, как браузер будет добавлять вашу сайт в избранное, иконка будет появляться рядом с именем сайта.

Также можно создать разные иконки для разных страниц с разными именами. Тогда нужно связать каждую иконку с определённой страницей строчкой кода.

Код

<HEAD>
  <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
  <TITLE>My Title</TITLE>
</HEAD>

Автор: Van-Damme 6.2.2006, 13:29

Но иконке именно имя favicon присваивать или любое имя можно?? лишь бы расширение было *.ico

Автор: psi 6.2.2006, 17:52

Цитата(Van-Damme @ 6.2.2006, 13:29) *

Но иконке именно имя favicon присваивать или любое имя можно?? лишь бы расширение было *.ico

нет. Видишь он прописал код выше, где "HREF="http://www.mydomain.com/myicon.ico">" название иконки myicon.ico => следовательно можно использовать любое имя, только расширение оставить ico

To nikitar: а я об этом даже и не знал, один раз такую фишку видел, но подумал просто глюк. Теперь буду знать biggrin.gif

Автор: Van-Damme 6.2.2006, 18:47

Всё ясно! Благодарю,очень интересная фишка.
Раньше часто задумывался над ней,но думал что простым "смертным" это не под силу а оказывается всё очень нереально просто! Супер!
Какая прога лучше подойдёт для отделки иконок?

Автор: nikitar 7.2.2006, 9:22

Я например, пользуюсь программой Photoimpact http://rusforumz.com/index.php?showtopic=232&pid=1314&st=0&#entry1314 | http://www.ulead.com/pi/trial.htm), но это огромная программа (88 мегабайт), но она нетолько для иконок, естественно.
А так можно воспользоваться Iconmachine, IconStudio, IconMaker, и другими подобными программами.

Автор: nikitar 7.2.2006, 10:05

Единственно, плохо, что эти иконки у пользователя в избранном не всегда остаются. Они хранятся в кэше, поэтому если его очистить, то иконки тоже пропадут. И появятся, только когда пользователь опять зайдёт на сайт. Поэтому, если вы часто очищаете кэш, то может и не видели этих иконок в своём избранном, а так многие сайты сейчас имеют favicon.

Автор: KMZ 7.2.2006, 17:32

а почему "только IE" ? в фаерфоксе, например, это тоже есть

Автор: nikitar 8.2.2006, 2:45

В остальных браузерах не проверял, поэтому не знаю. А в фаерфоксе с какой версии, не знаешь?

Автор: KMZ 8.2.2006, 18:16

сколько помню фаерфокс, столько и были иконки....
вот самая старая у меня - версия 0.9.3 (по сути, даже недоработанная)

Автор: Hacker 5.6.2006, 19:34

В Opere 9.0 тоже такая фишка есть.

Автор: sander 5.7.2006, 12:51

Если вместо favicon.ico сделать обычный анимированный GIF с именем favicon.gif то в файерфоксе эта иконка будет отображаться как анимированная. Другие браузеры этого не поддерживают. (пример www.swiss-centre.kz)

Автор: nikitar 5.7.2006, 13:10

Цитата
Если вместо favicon.ico сделать обычный анимированный GIF с именем favicon.gif то в файерфоксе эта иконка будет отображаться как анимированная. Другие браузеры этого не поддерживают. (пример www.swiss-centre.kz)

А в других браузерах будет как отображаться? Как статическая иконка или вообще не будет отображаться.

Автор: sander 6.7.2006, 5:30

не будет, будет обычная стандартная иконка ...
но всё в этом мире пытается совершенствоваться, и даже IE который всегда был без закладок в 7 версии уже с ними!

Автор: nikitar 6.7.2006, 13:11

У IE в 7 версии есть огромный недостаток: рамочки вокруг всех флэшек, поэтому не советую...

Автор: sander 6.7.2006, 13:29

Цитата(nikitar @ 6.7.2006, 16:11) *

У IE в 7 версии есть огромный недостаток: рамочки вокруг всех флэшек, поэтому не советую...

Это ж "бета-версия"! biggrin.gif У них ещё есть время исправиться, но не рекомендую им пользоваться: зачем постоянно ждать когда это появится в IE, в то время как в других браузерах это уже давно есть?

ЗЫ: Кстати, чтобы сделать анимированную иконку её не обязательно делать мелких размеров, это на ваше усмотрение (ка хотите что ваш сайт грузился), и делать просто иконку не надо. Файерфокс воспринимает изображения как иконки, например, если просматривать картинку в огненной лисе (хост/img.jpg) то он её поймет как иконку.

Автор: Lenka_X 7.7.2006, 14:56

Создать сам faviсon
(у меня например не вышло в ICO-редакторах сконвертировать jpg картинку)

можно на сайте
http://favicon.ru/

Автор: MIXer 29.8.2006, 18:34

Я всё время делал иконки в Paint'e, апотом в Total Commander'e переводил с формата .jpg в .ico ...
И в "децтве" (года 3 назад) я ещё на рабочий стол кидал свои иконки.... всё офигевали, и распрашивали меня как это сделать....

Автор: Exact 29.8.2006, 18:56

Ух ты я и не знал, что так можно, но хотя догодаться можно было пасиба за такой способ, возможно многим будет полезен.

Автор: nikitar 17.9.2006, 22:38

Кстати,

Цитата

Ограничения, которые накладываются на иконку favicon.ico :

1) Размер 16х16 (32х32 или 48х48 пикселей)
2) Цветовая палитра иконки: 16 цветов
3) Вес иконки не превышает 1,046 кб

Может поэтому у некоторых не получается иконку сделать.

Автор: MIXer 19.9.2006, 15:04

от блин, а у меня фавикон важит 1,12 КБ , хотя в Опере отображаеться....

Автор: nikitar 19.9.2006, 15:14

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

Автор: Испытатель 25.9.2006, 0:03

Да я смотрю тема для всех новая, но или по крайней мере никто толком не знает.

Но все-таки может кто подскажет, как сделать эту иконку на все страницы сайта??? На главную я сделал (http://banditos.nm.ru), а вот на остальных она почему то не отображается, хотя все делал так же, как и на первой.

Заранее спасибо!!!

Автор: Terrorist 25.9.2006, 0:11

Где прописана везде отображается!

Автор: Испытатель 25.9.2006, 0:20

Цитата(Terrorist @ 24.9.2006, 23:11) *

Где прописана везде отображается!


Да, да я уже нашел ошибку. Было не правильно поставлена точка в коде. Но конечно спасибо! smile.gif

Автор: Dinamit 22.2.2007, 1:51

Цитата(nikitar @ 19.9.2006, 15:14) *

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


Не скажи=) Опера - единственный в мире(!) браузер, который соответствует всем спецификациям W3C на 100% и именно в Опере сайты отображаются так, как должны отображаться, согласно W3C

насчет того, любое ли имя можно присваивать иконке: Нет, не любое! иконка работает только, если ее обозвали favicon.ico. Может в других браузерах и отображаются с любыми именами, но в Опере нет. А правило хорошего дизайна - если где-то не работает, значит дизайн плохой"=)

А вот если присваивать иконку через тег <link>, да, здесь уже можно назвать ее, как угодно

Автор: STILET 18.5.2007, 19:40

А почему я когда добавляю в закладки моя иконка не остается?

Автор: nikitar 18.5.2007, 20:05

Цитата
А почему я когда добавляю в закладки моя иконка не остается?

Ты каким браузером пользуешься?

Автор: STILET 18.5.2007, 20:16

всеми - осликом,лисой,оперов

Автор: Andrew 27.5.2007, 22:30

Не отображаецца потому что кэш чистишь.
У меня в осле такая же херь.

Автор: nikitar 2.8.2007, 18:40

Долго искал программу, с помощью которой можно делать иконки favicon, чтобы отображались нормально.
В конце концов, увидел сайт, на котором это можно сделать в онлайне.
Возможно, кому-нибудь пригодится.
http://favicon.ru

Автор: Анет 2.8.2007, 20:37

Буквально на днях там делала фавикон - свой диск с прогой отдала, не хотелаось искать. Мне не понравилось, очень искожает, не четкое изображение.

Автор: nikitar 2.8.2007, 20:51

Цитата
Буквально на днях там делала фавикон - свой диск с прогой отдала, не хотелаось искать. Мне не понравилось, очень искожает, не четкое изображение.

Это да. Зато в онлайне.

Автор: STILET 2.8.2007, 22:32

blink.gif как нет программ..а http://businesssuccessshop.info/tmp/favicon_create.zip ? Сейчас чего ток нет acute.gif

Автор: AleX - Z 6.8.2007, 15:17

Преспокойненько всёё это делается в Corel Draw (по крайней мере в версии 13) Рисуешь, что хочешь, вставляешь любые битмапы. Потом просто всё это выделяется и експортируется в формат .ico в настройках в первом диалоговом окне указать "только выбранные" ("selrcted only"), во втором выставить ресемпл (16х16, 32х32...), разрешение и готово. Обозвать её можно, естесственно, как угодно...

Вроде-бы всё прекрасно работает...

Автор: Naraka 15.10.2007, 9:47

а как иконки с прозрачным фоном делают? чето как токо не пробовала, либо не получается, либо фигня какая-то выходит....

Автор: romaninio86 17.10.2007, 10:05

можно так, но проще поместить favicon в корень.

Автор: Надежда 10.3.2008, 16:51

Цитата(Lenka_X @ 7.7.2006, 14:56) *

Создать сам faviсon
(у меня например не вышло в ICO-редакторах сконвертировать jpg картинку)

можно на сайте
http://favicon.ru/


Помню давно с этим мучалась, потом забросила. Сейчас только с помощью этого сайта быстро все сделала. Отображается теперь во всех броузерах и то, что надо yahoo.gif

Есть программа где-то... только найти надо. Попробую сама создать.

Автор: Надежда 10.3.2008, 18:31

Цитата(nikitar @ 6.2.2006, 9:25) *

Код

<HEAD>
  <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
  <TITLE>My Title</TITLE>
</HEAD>



Вставила подобное себе в каждую страничку... точнее не в каждую, а в одну (я на PHP через include делаю) вот так:

Код
<LINK REL="SHORTCUT ICON" HREF="http://webharmony.far.ru/favicon.ico">


На главной странице все ОК. При переходе по ссылке значок меняется на стандартный, хотя между head я как бы получается все проставила. Это не из-за PHP?

Вообще, почему такое может быть?

Автор: Hippy 29.4.2008, 17:53

Народ, а что, это работает только, когда уже залил сайт в инет? Просто я сейчас работаю над сайтов (он у меня на компе и хранится) и что-то не отображается этот икон, сделал его через фавикон.ру

Автор: Hippy 30.4.2008, 2:12

О разобрался, работает только, когда сайт уже в инете, причем у меня работает только на домене 1-ого уровня...

Автор: Andrei_S 30.4.2008, 23:38

Цитата(Hippy @ 30.4.2008, 3:12) *

О разобрался, работает только, когда сайт уже в инете, причем у меня работает только на домене 1-ого уровня...

Работает всегда... даже если страница не загружена в инет... домена первого уровня не бывает... (как минимум второй)... Уровень домена на показ фавикон не влияет... Правильно пиши код... (уже обсуждалось)...
Код

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

или
Код

<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

или
Код

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">


Автор: NortOn 3.5.2008, 22:47

Класная штука acute.gif Я все думал как ето делаеться doh.gif

Русская версия Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)