Совет 1: Как добавить Favicon

Favicon (Favorite Icon) - это квадратная иконка со стороной в 16 пиксел, которую браузер посетителя страницы сайта отображает в адресной строке. Если страницу добавить в избранное, то картинка будет отображаться и там. Кроме того, favicon присутствует в поисковом списке сайтов Яндекса. Все это в комплексе может быть весьма полезно для привлечения внимания к сайту.
Инструкция
1
Создайте иконку, ссылку на которую надо будет поместить в страницы сайта. Для этого подойдет любой графический редактор. Используйте размер 16 на 16 пиксел - некоторые браузеры могут работать и с иконками больших размеров, но лучше все же охватить по возможности наибольшее число веб-серферов.
2
Сохраните подготовленное изображение в формате ico. Современные браузеры смогут понять favicon в файлах с расширением gif, png, bmp и т.д., но для охвата максимального количества модификаций браузеров лучше использовать родной формат иконок этого типа. Если ваш графический редактор не поддерживает формат ico, то можно сохранить его, например, в формате gif, а затем конвертировать в ico при помощи какого-либо из онлайн-сервисов. В сети можно найти и сервисы, которые предложат вам полный цикл создания иконки в режиме онлайн непосредственно в браузере.
3
Загрузите иконку на сервер вашего сайта и сохраните в файл с именем favicon.ico - это имя все модификации браузеров понимают одинаково, хотя некоторым из них название не важно. Если в коде страницы нет указания адреса этого файла, то браузеры и поисковые роботы по умолчанию ищут ее в корневой папке сайта, поэтому лучше всего поместить файл именно туда.
4
Вставьте в исходный код страниц HTML-теги с указанием на загруженный файл. Для Internet Explorer этот тег должен выглядеть так:
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
Для остальных браузеров его следует писать иначе:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
Добавьте обе строки, чтобы обеспечить кроссбраузерность. Если файл был помещен не в корневую папку, то в атрибуте href укажите полный путь к месту его размещения. Вставить эти строки следует в заголовочную часть веб-документа, то есть между тегами <head> и </head>.

Совет 2: Как создать favicon.ico

Favicon – иконка сайта, favicon.ico. Это маленькая картинка, которая отображается рядом с адресом вашего сайта в адресной строке браузера. Она видна рядом с названием сайта в «Избранном» и в «Закладках». Создать favicon.ico можно за 3 простых шага.
Вам понадобится
  • Готовое изображение для иконки или любой графический редактор для ее создания.
Инструкция
1
Выберите подходящую картинку, из которой будет создана иконка favicon.ico.

- квадратное изображение

- небольшого размера

- простое, без мелких деталей

- размер файла – не больше 300 кБ.
Лучше использовать один легкоузнаваемый предмет, с четкими границами и контрастным фоном. Например, логотип компании или другое простое изображение.
Вы можете создать эту картинку сами, с помощью любого графического редактора.

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

Существует много онлайн-сервисов, которые предлагают такую услугу. Задайте поиск в любой поисковой системе по словам «favicon.ico». Выберите понравившийся вам сервис.
Разберем создание иконки на примере сайта favicon.ru.

- Зайдите на сайт.

- Появляется окно создания иконки. Нажмите кнопку «Обзор...» и выберите файл на своем компьютере, который нужно преобразовать в favicon.ico.

- Нажмите «Создать favicon.ico!»
- Появляется окно - вид адресной строки с получившейся иконкой.

- Если результат вам понравился – нажмите «Скачать favicon.ico!». В появившемся окне загрузки выберите «Сохранить», чтобы сохранить иконку на жестком диске.
Если вы хотите что-то изменить:

– нажмите «Редактировать иконку» - и в появившемся простом графическом редакторе внесите изменения.

- либо выберите «Создать еще одну иконку» - и попробуйте создать ее из другого файла.
3
Добавляем иконку на сайт.
Закачайте иконку в корневую директорию вашего сайта.

- Например, "www" или "public_html". Если вы не знаете точный путь к корневой директории - уточните его в службе поддержки.
Пропишите на каждой странице сайта между тегами и две строки:
(Сейчас этот этап необязателен. Браузеры могут найти favicon.ico и без этих строк).
Обратите внимание
Чтобы убедиться, что иконка добавлена и отображается:
- наберите в строке браузера http://yoursite.ru /favicon.ico (где yoursite.ru – адрес вашего сайта).
Если иконка в браузере загрузилась – значит, все сделано правильно.

- обновите страницу браузера – иконка появится в адресной строке.
- в результатах выдачи Яндекса иконка появится не сразу, может пройти несколько дней.
Совет полезен?
Если вы не придумали, что именно должно быть изображено на иконке:
- поищите картинку в интернете.
- посмотрите иконки на сайтах, близких по тематике вашему – и придумайте похожую.
- используйте букву, цифру, символ, имеющие отношение к вашему сайту. Позже вы сможете заменить изображение, когда подберете более подходящий вариант.

Яндекс показывает favicon.ico в результатах поиска рядом с названием сайта.
Если ваша иконка выделяется на фоне остальных – пользователь охотнее кликнет и перейдет именно на ваш сайт.
Источники:
  • Часто задаваемые вопросы по созданию favicon.ico
  • как создать иконку ico

Совет 3: Как установить favicon

Favicon – небольшая картинка размером 16x16 пикселей. Она отображается в заголовке страницы и слева от адресной строки браузера. Некоторые поисковые системы отображают такие изображения рядом с результатами поиска, что повышает посещаемость ресурса. Для добавления favicon необходимо вписать соответствующий код в страницу HTML.
Инструкция
1
Для установки favicon найдите подходящую иконку. Она должна иметь разрешение .ico и иметь размер 16x16 точек. Данные параметры являются обязательными. Если картинка превышает указанный параметр, системе потребуется самостоятельно уменьшать данную иконку, что может сказаться на скорости загрузки страницы.
2
Создать изображение можно при помощи любого графического редактора на компьютере. Если выбранная программа не поддерживает сохранение в данном формате, вы можете сохранить нужную картинку в .png, .jpg или .gif, а затем сконвертировать ее в нужный формат при помощи любого онлайн-сервиса.
3
После того создания favicon поместите его в одну папку с вашим файлом html. Затем откройте страницу сайта для редактирования в любом текстовом редакторе, который вы используете для создания интернет-страницы.
4
Перейдите в секцию документа и введите код для вставки изображения в дизайн страницы. HTML в данной секции должен выглядеть следующим образом:

<head>
<link rel = “icon” type = “image/x-icon” href = “favicon.ico”>
<!--остальное содержимое секции -->
</head>
5
Сохраните внесенные изменения и откройте отредактированную страницу в окне браузера. Если все данные и теги были указаны верно, в окне вы увидите нужную вам иконку.
Видео по теме
Обратите внимание
В некоторых случаях иконка может появиться не сразу. Это связано с тем, что браузер может загружать кэшированную копию страницы. Если favicon не отображается, очистите кэш обозревателя при помощи соответствующего пункта меню и перезапустите программу. Если картинка все равно не появляется, проверьте правильность введенного вами кода, правильность написания имени файла, его формата и наличие в выбранной директории.
Совет полезен?
Некоторые браузеры могут самостоятельно отображать favicon без указания пути до файла в HTML-коде. Однако, чтобы добиться отображения во всех обозревателях, лучше всего ввести вышеуказанный дескриптор в содержимое страницы.
Источники:
  • Создание и редактирование Favicon
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500