Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.
Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):
И для сравнения, отображение иконки в браузере Internet Explorer:
Сделать фавикон можно как используя стандартные возможности Photoshop (или другого графического редактора), так и с помощью всевозможных веб-сервисов.
Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:
Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:
Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.
Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:
<link rel="icon" href="favicon.ico"; type="image/x-icon" />По умолчанию, если иконка для сайта явно не указана, браузер пытается загрузить файл favicon.ico из корня. Но лучше перестраховаться.
Также рекомендуется добавлять строку:
<link rel="shortcut icon" href="favicon.ico"; type="image/x-icon" />(для Internet Explorer).
Размер фавикона может быть 16x16, 32x32.
Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57x57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:
<link rel="apple-touch-icon" href="apple-favicon.png" />Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.
Значок сайта (или «Блаватар») - это уникальный значок для вашего сайта. Он отображается на сайте WordPress.com, на вкладке браузера вашего посетителя, в таких виджетах, как «Блоги, которые я отслеживаю», а также в виде закладки или значка приложения на главном экране при сохранении в браузере или телефоне.
Изображение должно быть квадратным, иметь ширину и высоту не менее 512 пикселей.
Вот несколько примеров:
Значок сайта на вкладке браузера рабочего стола
Значок сайта на ярлыке мобильного устройства
Блоги Я слежу за отображением виджета
Вы можете загрузить собственный значок сайта, перейдя в Мой сайт → Настройки и на вкладке Общие нажмите кнопку Изменить :
Будет показана ваша медиабиблиотека.Вы можете выбрать существующее изображение или загрузить новое. Помните рекомендуемый минимальный размер 512 пикселей в ширину и в высоту. Выбрав изображение, нажмите Продолжить .
Далее, поскольку значок сайта должен быть квадратным, вам будет предложено при желании обрезать изображение по своему вкусу. Используйте угловые маркеры, чтобы изменить размер ограничивающей рамки, или измените положение рамки, перетащив ее. Когда закончите, нажмите Готово .
Если вы редактировали изображение, оно будет сначала загружено перед сохранением ваших новых настроек.Вы должны увидеть счетчик, указывающий, что ваш новый значок загружается. Вы узнаете, что значок готов, когда увидите уведомление, подтверждающее, что ваши настройки были успешно сохранены.
Обратите внимание, что может пройти несколько часов, прежде чем вы увидите значок своего нового сайта. Если значок не обновляется, вы также можете попробовать очистить локальный кеш браузера.
↑ Содержание ↑
Вы можете удалить собственный значок сайта, перейдя в Мой сайт → Настройки и на вкладке Общие нажмите кнопку Удалить :
На этом этапе вас попросят подтвердить удаление.После принятия вы должны увидеть, что ваш значок теперь удален, и появится уведомление, подтверждающее, что ваши настройки были успешно сохранены.
.Учебное пособие поЧтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML.
Элементы и широко используются для добавления иконы.
Все значки в библиотеках значков ниже являются масштабируемыми векторными значками, которые могут настраиваться с помощью CSS (размер, цвет, тень и т. д.)
Чтобы использовать значки Free Font Awesome 5, перейдите по ссылке fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.
Узнайте больше о том, как начать работу с Font Awesome, в нашем Font Awesome 5 глава.
Примечание: Скачивание или установка не требуется!