Прихожая
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Шаг 4: Зарабатываем
Заметил ошибку? Выдели и нажми ctrl+enter

Как сделать иконку для сайта? (файл favicon.ico)

Иконка для сайта (файл favicon.ico) – это картинка размером 16Х16 пикселей, характерная для большинства профессионально сделанных сайтов.
Favicon – сокращение от Favorite Icon (любимая иконка) . Ее можно наблюдать в адресной строке, в папке Избранное(Закладки) , также во вкладках браузеров и в результатах выдачи  Яндекса.
По умолчанию в качестве иконки сайта отображается  неприметный стандартный значок:

Как сделать иконку для сайта? (файл favicon.ico)

Рис.1 Пример внешнего вида иконки в адресной строке

1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;

Как сделать иконку для сайта? (файл favicon.ico)

Рис.2 Пример внешнего вида иконки в Избранном(Закладки)

1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;

файл favicon.ico

Рис.3 Пример внешнего вида иконки во вкладках браузеров

1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;

файл favicon.ico

Рис.4 Пример внешнего вида иконки в результатах выдачи Яндекса

1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;

Иконка придает сайту индивидуальность, делает его не похожим на другие. Актуальность иконок для сайтов на сегодняшний день обуславливается и тем, что Яндекс начал показывать их в результатах поиска , поэтому если иконка имеет привлекательный вид, есть шанс, что взгляд пользователя "зацепится" за нее, и он перейдет по ссылке на Ваш ресурс.

Короче говоря, если Вы хотите, чтобы Ваш сайт был оригинальным и уникальным в глазах посетителей, то пора задуматься над созданием иконки favicon.ico .

Обычно, на иконке изображают мини-логотип компании...

Самый простой и быстрый способ сделать иконку для сайта - воспользоваться сервисом http://favicon.ru/.

Для этого Вам желательно заранее подготовить изображение вашей будущей иконки. Лучше делать квадратное изображение, т.к. сервис favicon.ru будет уменьшать это изображение до размера 16х16 пикселей, и если оно изначально было не квадратное, то могут появиться незначительные искажения. Размер файла не должен превышать 300кб.

Такое изображение можно сделать в любом графическом редакторе, я например делаю все в Adobe Photoshop. Можно вообще найти подходящее изображение в Google, воспользовавшись поиском по картинкам. Короче нужно подключить фантазию...

После того, как изображение найдено или сделано, его нужно загрузить на сервис http://favicon.ru/ , затем нажать кнопку "Создать favicon.iсo" , затем скачать получившуюся иконку, перейдя по ссылке "Скачать favicon.ico!" , и наконец главное, что нужно сделать, это закачать получившийся файл favicon.iсo в корневую директорию Вашего сайта(туда, где лежит главная страница). Браузер автоматически найдет этот файл и добавит его в адресную строку и закладки.

Если по каким-то причинам Вы не можете разместить этот файл в корне сайта, тогда нужно указать браузеру, где он находится, для этого в каждую страницу сайта , между тегами head нужно вставить тег link:

<head>
<link rel="shortcut icon" href="icon/favicon.ico">
</head>

Как Вы наверное уже знаете, атрибут href указывает на расположение файла. В данном случае файл иконки favicon.iсo лежит в папке icon .

Оценить результаты Вашей работы можно сразу, для этого нужно ввести адрес сайта в браузере . Если все сделали верно, то иконка должна отображаться слева от адреса (так как показано на Рис.1) .

В результатах выдачи Яндекса, иконка появится не сразу. Это связано с временем обновления кэша поисковика, которое может составлять от недели до нескольких месяцев.

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2009-02-24      Просмотров: 92649      Автор:Андрей Галямов

Оцените урок:    1    2   3   4    5     

Комментарии:

Автор: Garry
Дата : 2009-02-25

Большое спасибо, очень интересный материал!

Автор: rekachili
Дата : 2009-02-25

Такая мелочь, а значительная вещица! Спасибо за инфу, не придется юзать поиск.

Автор: Monc
Дата : 2009-02-25

Спасибки, мне оч понравилось)

Автор: Sati
Дата : 2009-02-25

Здорово! Спасибо, взяла кое-что из логотипа, получилось довольно симпатично... http://www.meteo-tv.am

Автор: Алексей
Дата : 2009-02-25

Спаибо, давно хотел узнать об этом.

Автор: Кирилл
Дата : 2009-02-25

Огромное спасибо! очень помогло

Автор: Леонид
Дата : 2009-02-25

Очень интересная и нужнейшая информация, но к моему сожалению мой компьютер стал тормозить и поэтому начать пользоваться данной информацией смогу не сразу.Вернёмся к разговору после того как поверю всё сам.

Автор: Наталья Сычёва
Дата : 2009-02-25

Спасибо, Андрей!

Автор: Вадим
Дата : 2009-02-25

Спасибо, Андрей! Очень интересный материал, давно хотел сделать такое! ;)

Автор: Игорь
Дата : 2009-02-26

Спасибо Андрей, тема классная.

Автор: Agasi
Дата : 2009-02-26

Большое спасибо

Автор: Василий
Дата : 2009-02-26

спасибо, это как раз то, что надо!!!

Автор: artem
Дата : 2009-02-26

Спасибо =)

Автор: Гарик
Дата : 2009-02-26

Мелоч, а приятно. Такая деталь в адресной строке казалась чем-то нереальным. Оказывается всё очень просто. Андрею большое спасибо.

Автор: Саша
Дата : 2009-02-26

Супер спасибо!

Автор: Светлана
Дата : 2009-02-27

спасибо большое

Автор: Владимир
Дата : 2009-02-27

Отлично, Андрей. Молодец! Главное, всё кстати. Ждём ещё чего-нибудь интересного. Лучше пользоваться 2-3 -мя источниками, чем по всему нету бороздить.

Автор: саня
Дата : 2009-02-28

класс сайт знают как людей позабавить

Автор: andrij-ka
Дата : 2009-02-28

очень полезная штука

Автор: Максим
Дата : 2009-02-28

Только сидел и думал как это сделать. Даже чувствовал, что все очень просто, а как сделать....? И тут этот урок. Супер.

Автор: валера
Дата : 2009-03-07

я через юкоз маю та прошче воно автоматично ставить яку ти тіки незахочеш іконку

Автор: Олег
Дата : 2009-03-09

Андрей, спасибо за помощь неучам.

Автор: роман
Дата : 2009-03-21

блин, а у меня не выходит http://iprivet.ru/ вот гляньте, в опере иконка отображается, а в эксплорере и яндексе нет. что не так делаю?

Автор: роман
Дата : 2009-03-21

ах парднон, оказывается и правда достаточно было воспользоваться http://favicon.ru/ а я до этого иконку делал с помощью ArtIcons Pro

Автор: Victor
Дата : 2009-03-22

Интересный русскоязычный сервис по созданию http://www.favicon.erus.info/ Позволяет создавать анимированные иконки и со скроллинг-текстом

Автор: www.lekal.ru
Дата : 2009-03-30

Прочитав сразе же поставил себе на http://lekal.ru кулебяку. Доволен. Спасибо автору.

Автор: владислав
Дата : 2009-08-21

люди, спасите! в опере - работает, в фаерфоксе - тоже, а в ИЕ - нет! кто-нить знает в чём дело? помогите, плиз *_*

Автор: владислав
Дата : 2009-08-22

блин, я заметил, что с видео на моём сайте тоже самое! не понимаю в чём дело((

Автор: Сергей
Дата : 2009-09-10

Подскажите пожалуйста, при индексации, например Яндексом, иконка одновременно с сайтом индексируется или как получится?

Автор: Сергей
Дата : 2009-10-01

Чето я крутил вертел эту иконку и так и сяк ставил не отображается и все.

Автор: Сергей
Дата : 2009-10-02

Блин блинский в опере отобразилась а в мозиле не отображается.

Автор: xJlaIIax
Дата : 2009-11-08

Спасибо за урок, это то что я искал!

Автор: Вадим
Дата : 2009-11-09

Спасибо Андрюха ! Инфа просто супер !!! http://www.magnomer.narod.ru

Автор: Мак дак
Дата : 2009-12-06

А я себе такую сделал http://seosites.ucoz.com/

Автор: slon29
Дата : 2009-12-31

Спасибо андрей вы как всегда на высоте благодаря вашему сайту мой тоже преобразился www.slonrecords.com.ua

Автор: Александр
Дата : 2010-01-14

Спасибо!!!

Автор: Лана
Дата : 2010-01-20

Подскажите плиз, как так в платном хостинге отображается иконка а на бесплатном не отображается, хотя все то же самое и код и иконка???

Автор: Николай
Дата : 2010-05-15

А как делают широкие иконки ?

Автор: Владимир
Дата : 2010-05-28

У меня на сайте когда вводишь vipkulinar.ru всё выходит, а когда пишешь www.vipkulinar.ru почему то не отображается!

Автор: Елена
Дата : 2010-06-04

В Эксплоере отображается, а в Мозилле - нет :(

Автор: Александр Hecfrjd
Дата : 2010-06-15

Продается иконка для Google. Цена 25 000 долл. alrustver@yandex.ru

Автор: triuer
Дата : 2010-07-07

Спасибо!

Автор: Vlad
Дата : 2010-07-31

спс

Автор: ольга
Дата : 2010-08-15

Самое лучшее объяснение на 5+, спасибо!

Автор: Evgeniy
Дата : 2010-08-24

Огробное спасибо за информацию. ...Очень полезная тема, особенно для начинающих :)

Автор: Настя
Дата : 2010-10-25

Спасибо, Андрей, Ваши уроки очень полезны! подскажите плиз скинула иконку в корневую папку, а отображается все равно иконка джумлы, как её поменять можно?

Автор: Настя
Дата : 2010-10-25

Урра!! заработало! Не обратила сразу внимание, что у вас есть еще и замечательный форум, где есть ответы на многие вопросы)

Добавить комментарий:

Ваше имя:

Комментарий:

Введите сумму чисел с картинки (проверка от автороботов):

Поиск по сайту