WinNavigator

Frigate

Norton Commander

WinNC

Dos Navigator

Servant Salamander

Turbo Browser

Winamp, Skins, Plugins

Необходимые Утилиты

Текстовые редакторы

Юмор

File managers and best utilites

Как добавить значок вкладки браузера (favicon) для веб-сайта? Значок во вкладке браузера

форматы, поддержка, автоматизация / Хабрахабр

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

В каком формате должен быть фавикон?

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

Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.<link rel="icon"> <link rel="icon" any">

Пора ли отправлять ICO на свалку?

Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310x150 исходное изображение имеет размер 558x270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:

<tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image src="images/image1.png" alt="alt text"/> <text>Text Field 1</text> </binding> </visual> </tile> То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:

{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" } Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

Автоматизация

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

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

habrahabr.ru

Как установить Favicon на сайт быстро и легко

Доброго времени суток, друзья!

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

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

Расскажу все, что знаю о данной иконке. На что она влияет, как ее лучше создать и так далее.

Прежде, чем начать обсуждать данные вопросы я хотел бы разъяснить вопрос: "Что же вообще такое Favicon и где его можно увидеть?".

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

Вот, как выглядит моя иконка во вкладке браузера.

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

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

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

Зачем нужен Favicon

Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.

Продвижение и узнаваемость бренда.

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

За продвижение бренда отвечает отображение фавикона в выдаче Яндекс. Чем больше видят ваш фавикон, тем больше на него будут кликать, так как это свидетельствует, что ваша информация ценная и, вероятнее всего, она пользуется спросом.

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

Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.

Увеличение количества кликов из выдачи, а соответственно и прирост трафика.

Каким боком связан Favicon с количеством переходов на ваш сайт? Дело в том, что очень важным моментом при предварительной оценке вашего сайта посетителем, является анализ внешнего вида вашего сниппета в выдаче поисковой системы. Только использованием фивикона вы уже увеличиваете один из важнейших поведенческих факторов - CTR (кликабельность) в выдаче.

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

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

Увеличение конверсии сайта.

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

В конверсии важна каждая мелочь. Даже расположение слов и их длина. Фавикон - не исключение. Чем он качественней и более лучше описывает вид деятельности сайта или компании, тем больший процент он придает общей конверсии.

Для страниц подписки и продающих сайтов данный фактор очень важен. Как правило, такие сайты рекламируется напрямую и посетители, которые на них заходят, в большинстве случаев, не знают автора. Глаза таких посетителей нередко сразу идут смотреть на favicon.

Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.

Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.

к содержанию ↑

Как создать Favicon

Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:

Создание самого дизайна и оформления;
Создание самой иконки.

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

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

Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:

Много париться и сделать самому;
Обратиться к профессионалам.

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

Человек, имеющий опыт в создании дизайнов запросто вам его сделает, но не бесплатно ясень пень. Зато качество будет радовать всех и вся. Поэтому, я и рекомендую 2й вариант.

Если же все таки вы человек-самоучка, то вот вам несколько советов, о которых стоит помнить при создании иконки:

Не копируйте никого - будет хуже только вам, а конкуренту будет плюс, так как вы его в некой мере пропиарите;
Иконка должна быть простая, чтобы во вкладке было четко понятно, что там нарисовано. Поэтому, чем меньше в ней элементов, тем лучше. Многие делают ее из своей фотографии, которую абсолютно не видно в таком размере. Не повторяйте данной ошибки;
Favicon должен давать понятие области вашей деятельности или же брендировать ваше имя. Если область деятельности, то постарайтесь что-то придумать интересное. Например, если сайт о заработке, то логично сделать иконку в видео каких-то монет или купюр. Но таких умников уже пруд пруди, поэтому нужно обыгрывать все по-своему. Почему я выше и писал, что необходима фантазия и умение ее воссоздать в дизайне. Если же это личный блог, то очень распространенный вариант - обыграть первую букву своего имени или фамилии. Я так и сделал. Это самый простой путь.

Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.

к содержанию ↑

Создаем иконку

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

Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.

Будем считать, что изображение вы создали. Можно двигаться далее. Переходим на сервис (кликните сюда) и оказываемся на странице, где можем выбрать наш файл изображения любого из 2х размеров выше.

Когда выбрали иконку, мы можем нажать на кнопку "Create icon", после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.

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

После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.

Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.

к содержанию ↑

Устанавливаем Favicon на сайт

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

Процесс установки состоит из 2х этапов:

Загрузка иконки на сайт;
Подключение вывода иконки на всех страницах.

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

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

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

Покажу так, как сделал я. Для загрузки файлов на сайт и использую ftp клиент FileZilla (тут подробная инструкция). Фавикон в моем случае лежит в папке с моей темой оформления, то есть в папке шаблона, где лежат все его файлы и папки (см. ниже).

Как видим, имеются все файлы и папки шаблона и среди них находится иконка.

После загрузки иконки на хостинг, необходимо сделать ее загрузку на всех страницах сайта. Для этого нужно добавить определенную строчку кода в файл header.php вашей темы в область между открывающим и закрывающим тегами <head></head>.

Берем следующий код. В нем лишь подставьте имя своего домена и название темы.

Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.

строчка кода за вывод favicon на сайте

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

Иконка во вкладке браузера отображается сразу после проделанных действий. А вот в выдаче она появляется не сразу, так как Яндекс должен проиндексировать сайт заново, увидеть изменения в коде, после чего он подгрузит иконку. На это может потребоваться некоторое время. Все зависит от того, насколько часто робот Яндекса посещает сайт.

Как вы увидели, процесс установки Favicon настолько простой, что его сделает даже младенец. Тем более, что по традиции прилагаю видео-урок.

После этого все в ваших головах должно стать на свои места.

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

На этом все. До связи

С уважением, Константин Хмелев.

kostyakhmelev.ru

html - Как добавить значок вкладки браузера (favicon) для веб-сайта?

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

Вот некоторые фрагменты, которые я использовал с соответствующими ссылками, где я собрал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всеми этими встроенными (включая файлы с образцами изображений).

Добавьте в свой html-заголовок следующую надпись. Заключенные разделы полностью необязательны. В то время как разделы без комментирования рекомендуются для охвата всех иконок. Не бойтесь, большинство, если это комментарии, чтобы помочь вам.

<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png">  <link rel="icon" type="image/png" href="/content/images/favicon-16x16.png">  <link rel="icon" type="image/png" href="/content/images/favicon-32x32.png">   <link rel="manifest" href="/content/icons/manifest.json">  <meta name="theme-color" content="#1E1E1E">  <link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png">           <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-57x57.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-114x114.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-72x72.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-144x144.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-60x60.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-120x120.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-76x76.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-152x152.png">  <link rel="apple-touch-icon" href="/content/images/apple-touch-icon-180x180.png">   <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">  <link rel="apple-touch-startup-image" href="/content/images/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">     <meta name="msapplication-TileColor" content="#5cb95c">  <meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Мой файл browserconfig.xml. Полное объяснение выше.

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/Content/Images/mstile-70x70.png"/> <square150x150logo src="/Content/Images/mstile-150x150.png"/> <square310x310logo src="/Content/Images/mstile-310x310.png"/> <wide310x150logo src="/Content/Images/mstile-310x150.png"/> <TileColor>#5cb95c</TileColor> </tile> </msapplication> </browserconfig>

Мой файл manifest.json. Полное объяснение выше.

{ "name": "ASP.NET MVC Boilerplate (Required! Update This)", "icons": [ { "src": "\/Content\/icons\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/Content\/icons\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, { "src": "\/Content\/icons\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" }, { "src": "\/Content\/icons\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" }, { "src": "\/Content\/icons\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" }, { "src": "\/Content\/icons\/android-chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" } ] }

Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решили поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатег):

favicon.ico browserconfig.xml Content/Images/ android-chrome-144x144.png android-chrome-192x192.png android-chrome-36x36.png android-chrome-48x48.png android-chrome-72x72.png android-chrome-96x96.png apple-touch-icon.png apple-touch-icon-57x57.png apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon-180x180.png apple-touch-icon-precomposed.png (180x180) favicon-16x16.png favicon-32x32.png favicon-96x96.png favicon-192x192.png manifest.json mstile-70x70.png mstile-144x144.png mstile-150x150.png mstile-310x150.png mstile-310x310.png apple-touch-startup-image-1536x2008.png apple-touch-startup-image-1496x2048.png apple-touch-startup-image-768x1004.png apple-touch-startup-image-748x1024.png apple-touch-startup-image-640x1096.png apple-touch-startup-image-640x920.png apple-touch-startup-image-320x460.png

Всего накладных расходов

Если вы выберете комментарии, содержащие 3 Кбайт дополнительного HTML, если вы не поддерживаете всплывающие экраны размером 1,5 КБ. Если вы используете сжатие GZIP в своем HTML-контенте, что каждый должен делать в наши дни, это оставляет вам около 634 байтов накладных расходов для каждого запроса для поддержки всех платформ или 446 байтов без всплывающих окон. Я лично считаю, что стоит поддерживать IOS, Android и Windows-устройства, но по своему выбору я просто даю варианты!

Боковое примечание о текущей веб-иконке/всплывающем экране/ситуации настроек

Эта ситуация с конкретными значками поставщика, заставками и специальными тегами для управления веб-браузером или закрепленными значками смехотворна. В идеальном мире мы все будем использовать файл favicon.svg, который может выглядеть хорошо на любом уровне и может быть помещен в корень страницы. Только FireFox поддерживает это на момент написания статьи (см. CanIUse.com).

Однако в наши дни значки не являются единственными настройками, есть несколько других специфических параметров поставщика (показано выше), но файл favicon.svg будет охватывать большинство случаев использования.

Обновление

Обновлен, чтобы включить новую версию Android/Chrome M39 + favicon/theming. Интересно, что они пошли с аналогичным подходом к Microsoft, но используют JSON файл вместо XML.

qaru.site

HTML: Фавикон (favicon) - создание, добавление, польза

Что такое фавикон

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

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

Примечание: обратите внимание, что для каждой веб-страницы или для каждого раздела сайта можно указать свой собственный фавикон.

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

Google ChromeInternet ExplorerFirefoxOperaSafari
<link rel="shortcut icon"href="httр://mysite.ru/myicon.ico">	Да	Да	Да	Да	Да
<link rel="icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 9)	Да	Да	Да
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 9)	Да	Да	Да

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

puzzleweb.ru

Favicon

Favicon – это иконка сайта или конкретной веб-страницы, которая отображается во вкладке браузера, в закладках браузера и в результатах поиска.

Термин favicon является сокращением от английского выражения FAVorite ICON, которое значило «значок (иконку) для избранного». Значок первоначально использовался в браузере Microsoft Internet Explorer именно как картинка в закладке «Избранного», поэтому и заслужил такое название.

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

Традиционный фавикон характеризуется несколькими свойствами:

имеет размер 16×16 пикселей,
имеет формат ICO, реже gif или png,
хранится в корне сайта.

Для чего нужен favicon?

Фавикон выполняет несколько функций:

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

Обязательно ли использовать фавикон?

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

Как сделать фавикон?

Favicon можно получить несколькими путями:

заказать у дизайнера;
скачать готовую картинку с сайта, распространяющего коллекции изображений;
создать картинку с помощью онлайн-сервиса для генерации фавоконов;
воспользоваться плагином ICOFormat.8bi для Adobe Photoshop;
подготовить изображение с помощью специальной программы для создания фавиконов.

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

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

В онлайн-редакторе можно также нарисовать картинку с нуля по точкам. Изображение рисуется в сетке, представляющей, обычно, собой квадрат со стороной в 16 ячеек. Каждая квадратная ячейка сетки после сжатия картинки превратится в одну из точек изображения. Удобная цветовая палитра позволяет выбрать желаемый оттенок для каждого пикселя. Нередко онлайн-генераторы дополняются удобными инструментами для рисования овалов и квадратов и панелью для мгновенного просмотра изображения в том виде, в каком оно будет отображаться в браузере.

Весьма популярны и программы, которые устанавливаются на компьютер и целиком посвящаются изготовлению иконок для сайтов. В основном в них реализована палитра из 16 цветов. Как пример можно вспомнить бесплатную программу Favicon Create.

Создание фавикона в программе Photoshop потребует определенных навыков работы в графическом редакторе. Плагин ICOFormat.8bi позволяет сохранять и редактировать изображения в формате ICO. Тем, кто решил воспользоваться этим способом, лучше рисовать изображение большого формата, а затем уменьшать его до требуемого размера и сохранять в правильном формате.

Требования к иконкам сайтов:

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

Как разместить фавиконку на сайте?

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

Некоторые темы дизайна WordPress и других CMS поддерживают загрузку фавикона с помощью инструментов в административной панели. В WordPress в таком случае нужно в административной панели зайти в раздел «Внешний вид», выбрать используемую тему и закачать фавикон.

Если такой возможности нет, необходимо воспользоваться FTP-клиентом, таким как Total Commander или FileZilla Client. С помощью FTP-клиента нужно соединиться с сервером, зайти в папку public_html и закачать в нее файл favicon.ico.

Если после размещения иконки на сайте, она не появилась в браузере, значит стоит почистить кеш браузера. Для вызова диалогового окна часто используют клавиши «CTRL» + «SHIFT» + «DELETE». В появившемся окне нужно отметить галочкой пункт «Очистить кеш» и запустить процесс. Также можно открыть сайт в браузере, с помощью которого он еще не просматривался.

Как сделать, чтобы фавиконка отображалась в поиске

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

1) сохранить иконку в корне сайта;
2) открыть в HTML редакторе заголовок сайта – секцию <head>;
3) записать между тегами <head> и </head> стандартный код:

В данной формуле аттрибут rel указывает, что файл является иконкой сайта. Microsoft Internet Explorer реагирует на запись «shortcut icon», а остальные популярные браузеры – на слово «icon».

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

Атрибут Type сообщает тип передаваемых данных. Вместо "image/x-icon", символизирующий пиктограмму в формате ICO, могут быть употреблены сообщения о других форматах: image/gif, image/jpeg, image/png, image/bmp.

Если favicon корректно размещен, и хоть одна страничка присутствует в результатах поиска, то иконка появится в результатах выдачи после посещения сайта ботом, индексирующим фавиконы.

Как удалить фавикон из поиска?

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

Для того чтобы окончательно удалить фавикон из результатов поиска, достаточно просто удалить фавикон с сайта. В течение очередного апдейта робота-фавиконочника, изображение будет удалено из результатов поиска.

Возможные форматы фавиконок

Предпочтительным форматом иконки сайта является ICO. Однако возможно использование файлов с расширением JPEG, GIF, PNG и BMP. Разрешение может быть и 32×32 пикселя, а глубина цвета – 8 или даже 24 бита. Нестандартные форматы позволяют создавать анимированные, подмигивающие пиктограммы и в некоторых случаях оправданы.

Поддержка браузерами

Современные популярные браузеры поддерживают фавиконки во всех вышеописанных форматах. А вот все версии Internet Explorer требуют значок в формате ICO. Если загрузить на сайт пиктограмму с расширением ICO, ее «прочитает» любой браузер.

k-gayduk.ru

Смотрите также

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..