Как установить favicon на сайт


Доброго всем времени суток. Как я и обещал в уроке "Управляем видимостью объекта с помощью jQuery", сегодня я расскажу о том, что такое favicon и как установить его на сайт.

Давайте сначала определимся с тем, что же это такое – favicon? Favicon – это небольшая картинка, иконка, значок сайта или блога, или даже отдельной веб-страницы, которая отображается в адресной строке браузера:

Как установить favicon на сайт_1

в закладках, в журнале, во вкладках браузера:

Как установить favicon на сайт_2

вместо стандартной, общей для всех иконки.

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

Основной формат картинки для favicon.ico - 16х16 пикселей, именно эта картинка будет отображаться в адресной строке браузера и других вышеуказанных местах. Однако формат ICO разрешает наличие в файле нескольких картинок разных размеров и разного качества. Кроме стандартного размера 16х16, допускаются картинки 24х24, 32х32, 48х48 и 64х64 пикселей и все они включаются в один файл favicon.ico, а значит влияют на его размер и скорость загрузки сайта. Поэтому рекомендую вам не переусердствовать в этом вопросе.

Помимо того, что favicon - это логотип вашего сайта, ваш отличительный знак, по которому ваш сайт легко узнают пользователи, так он еще и привлекает дополнительное внимание к вашему сайту.

Так, например, иконки отображаются в выдаче поисковой системы Яндекс:

Как установить favicon на сайт

У Яндекса есть так же специальный робот, который ищет на сайтах иконки favicon. Вы можете посмотреть свой фавикон по адресу: http://favicon.yandex.net/favicon/hochuwebsite.ru, подставив, конечно, свой адрес.

Создать favicon можно как с помощью настольных программ, так и использовать онлайн сервисы.

Вот лишь два из них:

Favicon.ru

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, так же можно включить два дополнительных размера 32х32 и 48х48 пикселей, а так же обрезать картинку.

Как установить favicon на сайт_6

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

Как установить favicon на сайт_4

и предложит её скачать или отредактировать готовую иконку в имеющемся графическом редакторе.

Как установить favicon на сайт_5

Замечу лишь, что для редактирования, или тем более рисования, существуют специальные программы, в которых и нужно заниматься подобными вещами. Однако на вкус и цвет, как говорится…

Favicon.cc

В отличие от favicon.ru на favicon.cc вам сразу предложат воспользоваться графическим редактором. В центре расположен холст, состоящий из 16х16 квадратиков, символизирующих собой пиксели.

Справа палитра цветов и несколько инструментов. Внизу находится окно предпросмотра, в котором иконка отображается в реальном времени в процессе редактирования:

Как установить favicon на сайт_8

А слева от холста основное меню, в котором нас прежде всего интересует пункт “Import image”:

Как установить favicon на сайт_7

После указываем путь к изображению (нажатием кнопки “Обзор”) и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый для картинки с пропорциональными размерами сторон, второй для картинки с разными размерами. При выборе второго варианта изображение будет деформировано. После загрузки картинки ( кнопка “Upload”) на холсте уже попиксельно красуется загруженная картинка. Если результат вас устраивает, можно скачивать иконку.

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

Итак, иконка favicon создана! Теперь самое время установить ее на ваш сайт.
Для этого загружаем иконку в корневой каталог сайта (именно там ищут ее поисковые роботы). То есть иконка должна находится по адресу http://hochuwebsite.ru/favicon.ico. И вторым шагом прописываем специальные теги между тегами <head> </head> :

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

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

Чтобы favicon начал отображаться не забываем очистить кэш вашего браузера и обновить страницу. Ну вот вроде и все. Готово!

И напоследок еще один совет. Иконка показывается в браузере как изображение размером 16x16 пикселей. Ожидать, что при таком разрешении можно изобразить что-то сколько-нибудь сложное, увы, не приходится. Чтобы изобразить сколько-нибудь узнаваемое человеческое лицо, надо начинать с размера картинки размером хотя бы в 48x48 пикселей. Поэтому при создании иконки favicon для сайта, следует выбирать для него хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Оптимальный выбор для иконки favicon - логотип компании или простое изображение.

Автор: Сергей Зарубин

Дата: 2011-06-22

Колличество просмотров: 38931

Нравится

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

Комментарий добавил(а): Людмила Плехова
Дата: 2012-12-28

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

Комментарий добавил(а): Наталья
Дата: 2013-02-07

Здравствуйте. У меня фавикон в браузере показывается, а в поиске яндекса нет. Кэш очищала. Подскажите, что не так?

Комментарий добавил(а): Сергей Зарубин
Дата: 2013-02-08

Скорее всего Яндекс просто не успел проиндексировать ваш сайт.

Комментарий добавил(а): Константин
Дата: 2013-03-25

Огромное спасибо)
много сайтов описывают как устанавливать фавики, но вы очень понятно объяснили))

Комментарий добавил(а): Зоя
Дата: 2013-04-03

установка фавикона почти везде одинаково описана, но вот все равно интернет эксплоэр не хочет его видеть. мазила и опера его видят.

Комментарий добавил(а): Александр
Дата: 2013-06-06

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

Комментарий добавил(а): Александр
Дата: 2013-07-20

Прописал как описано в корне сайта. Но иконка не появилась. Очистил кеш. Обновил страницу. И......ничего не случилось.Сайт на Битрикс.

Комментарий добавил(а): Сергей
Дата: 2017-02-04

Спаси Бог,легко и доступно...Получилось с первого раза, вам успехов

Комментарий добавил(а): 123
Дата: 2017-08-16

123

Комментарий добавил(а): Виталий
Дата: 2017-10-01

То же самое. Гугл фавикон видит, строка браузера тоже. Яндек не показывает. Сайт сделан на Reg Website Builder. Где чего прописывать вообще не понимаю



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


Введите число с картинки:

captcha