Установка favicon на сайт

История

В марте 1999 года Microsoft выпустила Internet Explorer 5 , который впервые поддерживал фавиконы. Первоначально Favicon был файл под названием помещается в корневой каталог веб — сайта. Он был использован в Internet Explorer «s избранное (закладки) , а рядом с URL в адресной строке , если страница была закладкой. Побочным эффектом было то, что количество посетителей, добавивших страницу в закладки, можно было оценить по запросам значка. Этот побочный эффект больше не работает, поскольку все современные браузеры загружают файл значка для отображения в строке своего веб-адреса, независимо от того, добавлен ли сайт в закладки.

Стандартизация

Значок был стандартизирован Консорциумом World Wide Web (W3C) в рекомендации HTML 4.01, выпущенной в декабре 1999 года, а затем в рекомендации XHTML 1.0, выпущенной в январе 2000 года. Стандартная реализация использует элемент ссылки с атрибутом в разделе документа, чтобы указать формат файла, имя и расположение файла. В отличие от предыдущей схемы, файл может находиться в любом каталоге веб-сайта и иметь любой формат файла изображения.

В 2003 году формат был зарегистрирован третьей стороной в Internet Assigned Numbers Authority (IANA) под типом MIME . Однако при использовании формата для отображения в виде изображений (например, не в виде значка) Internet Explorer не может отображать файлы, обслуживаемые с этим стандартизированным типом MIME. Обходной путь для Internet Explorer состоит в связывании с нестандартным типом MIME в веб — серверах.

Наследие

Internet Explorer 5–10 поддерживает только формат файла ICO . Netscape 7 и Internet Explorer версий 5 и отображают значок только тогда, когда страница отмечена закладкой, а не просто когда страницы посещаются, как в более поздних браузерах.

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Регистрируем Favicon

После того, как мы обзавелись картинкой Favicon, мы должны ее зарегистрировать, как для своих браузеров, так и для поисковых систем. Честно говоря, поисковые системы по умолчанию ищут Ваш Favicon в корне сайта, поэтому регистрация для них необязательна. Тем не менее, существует возможность явно указать положение Favicon в HTML-коде и это полезно, например, если вы хотите указать Favicon разных типов (для разных браузеров), для разных страниц свой Favicon и т.д. Для этого добавляем строчку в свой HTML-код (внутри элемента <head>):

При этом:

  • rel может содержать «shortcut icon» (при этом IE будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам, — на слово «icon»)
  • href может содержать как абсолютный, так и относительный URL к файлу
  • форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета

После того, как вы прописали вызов Favicon внутри <head>, поместили сам Favicon в корень своего сайта, наберите в браузере:

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

Искушение № 2. Добавление трех и более объектов

Добавлять более двух различных объектов в иконку крайне нежелательно. Обычно, два простых объекта нормально входят даже в размере 16х16, хотя никогда не помешает задуматься, можно ли уменьшить число объектов для лучшей читабельности.

Пытайтесь отобразить какую-нибудь одну функцию иконки. Для иконки «Администратор сети» нарисуйте «ботаника» в очках, но не добавляйте гаечный ключ и компьютер, подключенный к сети.

Эта иконка установочного файла — наглядный пример перегруженной объектами иконки. Мы уже знаем, что программы, как правило, устанавливаются на компьютер. Мы уже знаем, что иногда программы распространяется на CD. Одной коробки было бы достаточно.

Зачем нужен favicon?

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.

Кроме того, нельзя исключать и того обстоятельства, что наличие или отсутствие фавиконки может учитываться Яндексом как один из незначительных факторов ранжирования. Достоверно это неизвестно, но если Яндекс учитывает более 300 различных факторов при ранжировании сайтов в поисковой выдаче, то, быть может, наличие иконки также может учитываться при определении качественности ресурса.

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

Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Use of Profiles to Define Terms Such as «icon»

Loosely speaking, a profile is a definition of set of
terms. Ideally, a profile includes both machine-readable information
and human-readable information. In HTML 4.01 and XHTML 1.0, a few
attributes such as the attribute do not have a predefined set of
values. Instead, the author can provide values according to need, and
then use a profile to explain what the values mean. In our case, we
have recommend that authors use the value «icon» and a profile that
explains that «when we say icon, we mean ‘this is a favicon.'»

In Method 1 above, we use the attribute with the

element and choose a profile with the attribute
on the HEAD element.

We defined a profile which you can freely use for your own sites.

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.

Oklick

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Например, для Safari на iOS рекомендуется следующий набор отношений:

<link rel=»apple-touch-icon» sizes=»144×144″ href=»/2014/05/ipad-retina.png» /><link rel=»apple-touch-icon» sizes=»114×114″ href=»/2014/05/iphone-retina.png» /><link rel=»apple-touch-icon» sizes=»72×72″ href=»/2014/05/ipad.png» /><link rel=»apple-touch-icon» href=»/2014/05/iphone.png» />

Если атрибут  не указан, используется значение по умолчанию 57×57.

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

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

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

<link rel=»apple-touch-icon-precomposed» sizes=»144×144″ href=»/2014/05/ipad-retina.png» /><link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»/2014/05/iphone-retina.png» /><link rel=»apple-touch-icon-precomposed» sizes=»72×72″ href=»/2014/05/ipad.png» /><link rel=»apple-touch-icon-precomposed» href=»/2014/05/iphone.png» />

Здесь тоже имеется набор автоматически распознаваемых имён:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

<link rel=»apple-touch-icon» href=»/2014/05/icon.png» /><link rel=»apple-touch-icon-precomposed» href=»/2014/05/icon.png»/>

Часто задаваемые вопросы

Статьи по теме

Создать форму с иконками

Шаг 1) Добавить HTML:

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные для каждого поля:

Пример

Шаг 2) Добавить CSS:

Пример

* {box-sizing: border-box;}/* Стиль входного контейнера */ .input-container {  display: flex;  width: 100%;  margin-bottom: 15px;}/* Стиль формы иконки */.icon {  padding: 10px;  background: dodgerblue;  color: white;  min-width: 50px;  text-align: center;}/* Стиль полей ввода */.input-field {  width: 100%;  padding: 10px;  outline: none;}.input-field:focus {  border: 2px solid dodgerblue;}/* Установите стиль для кнопки отправить */.btn {  background-color: dodgerblue;  color: white;  padding: 15px 20px;  border: none;  cursor: pointer;  width: 100%;  opacity: 0.9;}.btn:hover {  opacity: 1;}

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Совет: Зайдите на наш учебник CSS Флексбокс, чтобы узнать больше о гибком модуле компоновки коробки.

Favicon: сегодня

Favicon сегодня утратил первоначальное значение — сокр. от англ. FAVorites ICON — «значок для избранного», сегодня это логотип веб-сайта, отображающийся браузером в адресной строке перед URL страницы, выводящийся в некоторых поисковых системах в результатах поиска, использующийся в элементах интерфейса программ, работающих с сайтом и т.д.

favicon.ico сайта seo-zona.ru в результатах поиска Яндекса

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

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator поможет создать иконку ico или favicon онлайн

Что такое иконка – прекрасно известно не только любому владельцу или разработчику сайта, но и обычному компьютерному пользователю. В какой бы программе вы не работали, будь то специализированное приложение или обычный Word – вы везде можете увидеть множество иконок, отображающих создание нового документа, удаление, сохранение и прочие действия. Да что там! Взять даже обычный рабочий стол ПК – у каждого здесь найдется пара иконок «Мой компьютер», «Мои документы», «Корзина» и т.д.

В Microsoft Windows для хранения иконок используется формат ICO. ICO-файл содержит в себе один или несколько значков, для каждого из которых отдельно задается цветность и размер. Как правило, можно задать любой размер, но чаще всего используются иконки ICO 16х16, 32х32, 48х48 пикселов. Структура иконки ICO близка к формату BMP, но имеет одно отличие – наличие дополнительного изображения-маски, которая накладывается на задний план для прозрачности рисунка.

В общем, иконки ICO мы видим повсюду. Но у многих пользователей возникает резонный вопрос: зачем эти значки нужны? Что такое favicon.ico?

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

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

Фавиконы сайтов на экране смартфона

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

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

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

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

<!—><link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» /><!—><link rel=»icon» type=»image/png» href=»/favicon.png» /><link rel=»icon» type=»image/gif» href=»/favicon.gif» /><link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57.png» /><link rel=»apple-touch-icon-precomposed» href=»/apple-touch-icon-57×57-precomposed.png»/>

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57×57 пикселей, одну без эффектов, а другую со своими эффектами ( – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта ( – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

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

Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

Favicon для Android

Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм — PPI, а это значит иконка одного и того разрешения будет выглядеть по разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки: 

  • 36×36 – для экранов с коэффициентом плотности 0.75
  • 48×48 – для экранов с коэффициентом плотности 1
  • 72×72 – для экранов с коэффициентом плотности 1.5
  • 96×96 – для экранов с коэффициентом плотности 2
  • 144×144 – для экранов с коэффициентом плотности 3
  • 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Само собой, что и свое изначальное значение Favicon.ico не утратил, он по-прежнему используется в закладках всех браузеров для быстрого визуального поиска нужного сайта среди тысяч закладок (взгляните на верхнюю панель вашего обозревателя и убедитесь в этом).

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать)

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Естественно, что для проверки своего сайта вам нужно будет в конце приведенной ссылки вместо URL-адреса моего блога написать свой.

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

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 .

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

Но если с Фотошопом вы не на дружеской ноге (равно как и с его бесплатной онлайн версией), то вам будет гораздо удобнее воспользоваться одним из многочисленных онлайн-сервисов приведенных ниже. При этом в некоторых из них вы сможете полностью с нуля нарисовать новую иконку, а в других сможете переделать уже имеющуюся у вас картинку (которая вас устраивает) в формат фавикона.

Ну, а самый простой вариант — это скачать коллекцию Favicon-ок из какой-нибудь онлайн галереи или каталога. О том, где ими можно будет разжиться, читайте чуть ниже.

Через трансляцию на Youtube

При открытии приложения Youtube в верхней части экрана нужно нажать на иконку прямоугольника.

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

Однако если автоматически установить связь не получается, то нужно зайти в меню настроек и выбрать «Подключенные телевизоры», затем «Добавить телевизор». Приложение предложить следовать инструкциям. Перейдя в приложение YouTube на телевизоре или консоли, в настройках выбрать опцию «Сопряжение устройства» и ввести код сопряжения на устройстве Android.

После этого всё должно быть готово к работе

Реклама

Заключение

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector