Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Как вставить Favicon на сайт Категория: HTML и XHTML
Название: Как вставить Favicon на сайт
Дата добавления: 22-06-2012
Раз просмотрено: 1034
Комментарии: 1
Рейтинг: · · · · · · · · · · (0 голосов)

Как вставить Favicon на сайт

Favicon (сокращение от «Favorites Icon»), также известный как ярлык сайта, иконка сайта, URL иконка или значок для избранного - это квадратный значок размером 16 × 16 или 32 × 32 пикселей, связанный с определенным сайтом или страницей. Веб-дизайнер может создать такой значок и установить его на сайт (или страницу) несколькими способами, и большинство графических браузеров будет использовать его.

Браузеры, которые обеспечивают поддержку Favicon, обычно отображают его в адресной строке браузера и рядом с названием страницы в списке закладок. Браузеры, которые поддерживают интерфейс с вкладками, обычно показывают Favicon рядом с названием страницы на вкладке.

В принципе, самый простой способ добавить Favicon на сайт заключается в создании изображения в Photoshop размером 32 × 32 пикселя, которое будет вашей будущей иконкой и сохранении его в где-нибудь на диске. Затем откройте онлайн сервис для генерации Favicon, которых много в интернете (например, Favicon.ru) и загрузить туда ваше изображение.

В результате, сервис сгенерирует вам файл favicon.ico из вашего изображения. Теперь загрузите созданный Favicon в корень вашего сайт. Убедитесь, что иконка доступна, введя в в браузере адрес http://mysite.ru/favicon.ico (вместо mysite.ru используйте адрес вашего сайта). После этого, добавьте следующую строку в тег <head> вашего документа:

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

Большинству браузеров не требуется HTML код для извлечения Favicon, если он использует стандартное название (favicon.ico) и находится в корне сайта. Если в HTML после завершения загрузки страницы не было найдено ни одной ссылки на Favicon и сайт был посещен впервые, попытка загрузки Favicon происходит автоматически. Если Favicon не отображается в браузере, и вы уверены что все сделали правильно, попробуйте очистить кэш браузера.

Сенсорная иконка Apple

Для таких устройств, таких как Apple iPod Touch, iPhone и iPad, вы можете сделать специальный значок, который пользователи смогут отображать на своем главном экране при помощи функции Web Clip. Рекомендуемый размер этой иконки 57 × 57 пикселей, желательно с острыми углами. Однако с последними экранами Apple устройств с высоким разрешением, рекомендуют использовать иконку размером 129 × 129 пикселей.

Важно знать, что есть два типа вставки этой иконки. Метод apple-touch-icon заставляет Apple устройство скруглять края иконки добавлять к ней тень и отблеск. Для использования этого способа создайте необходимую иконку и добавьте ее на сайт при помощи такого способа:

<link rel="apple-touch-icon" href="apple-icon.png" />

Если вы не хотите, чтобы ваша иконка была изменена вышеописанными способами и стилизована под устройство от Apple, используйте метод apple-touch-icon-precomposed, который оставляет вашу иконку в том виде, в каком вы ее нарисовали:

<link rel="apple-touch-icon-precomposed" href="apple-icon.png" />

Это интересно: «Стилизация чекбоксов».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2013-07-17 13:35:36
спасибо