Html иконка сайта: Как сделать иконку для сайта и вставить её – Добавление иконки сайта в вкладку, адресную строку браузера — Вебджем.рф

Содержание

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

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных), стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Содержание:

Формат ICO
Файл favicon.ico
image/vnd.microsoft.icon vs image/x-icon?
BugFix для Internet Explorer
Другие графические форматы фавикон

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

Фавикон для Apple
Фавикон для Android

Адрес файла favicon.ico
Как установить фавикон иконку на сайт?

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант

установки фавикон на сайт имеет следующий вид:

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon.

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon.

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» />
<![endif]—>

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

Обращаю внимание на то, что для APNG использует MIME-тип video/png, а для GIF (даже анимированного) – image/gif. Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml.

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5, подробней читайте тут. Интересным здесь является атрибут sizes, который задаёт размер иконок для визуально отображения в формате:

{ширина1}x{высота1} [{ширинаN}x{высотаN}] | any

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

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

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

Фавикон для Apple

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

Если атрибут sizes не указан, используется значение по умолчанию 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 не добавляла к иконке каких-то эффектов, используйте ключевое слово precomposed, например:

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

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. По сути, будет достаточно указать, что-то вроде следующего:

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

или использовать относительный путь.

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

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

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» />
<![endif]—>
<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» />

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

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

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

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

На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования 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>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

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

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content="./">

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

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

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

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

<meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1.xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

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

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <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.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

iOS

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

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

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что 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>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

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>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

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

Вызов в <head>:

<link rel="manifest" href="manifest.json">

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

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

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

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

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

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

Вы здесь: Главная — HTML — HTML Основы — Установка Favicon на сайт

Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 05.12.2010 10:17:20
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как сделать Favicon для сайта

Что такое Favicon?

Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

Как сделать иконку для сайта

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

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

Когда иконка будет готова, вы сможете ее скачать в формате .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).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

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

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

как быстро вставить фавикон в HTML

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

С фавиконом все не так просто, на самом деле. Работа со всеми устройствами очень сильно растягивается и становится крайне утомительным процессом из-за фрагментации в мобильных и настольных ОС, а также браузерах. Иногда приходится работать с 30+ ресурсами одновременно, все зависит от уровня поддержки, которого вы хотите добиться.

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

Процесс генерации

Real Favicon Generator сильно упрощает процесс генерации иконок. Сперва необходимо выбрать фавикон и загрузить его в генератор. После загрузки страницы перед вами появятся экраны различных устройств.

Совет: как быстро вставить фавикон в HTML

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В некоторых секциях есть одинаковые опции. Например, можно добавить отдельное изображение для конкретного устройства или внешний отступ margin к иконке, а также изменить фоновый цвет. Ниже представлены экраны устройств, которые можно настраивать (iOS и Android и другие Windows / Safari).

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

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

Как использовать фавиконы

Нажмите кнопку «generate», когда будете готовы. После загрузки страницы перед вашими глазами будет сырой HTML код, который необходимо будет скопировать на сайт. Пример кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Генератор создает все теги link и meta на основе ваших настроек. Для загрузки файлов нужно нажать на кнопку Favicon Package. После загрузки извлеките файлы в любую папку и скопируйте иконки на сайт. В процессе настроек можно указать директорию хранения на тот случай, если ваши иконки будут находиться не в корневой папке сайта (к примеру, иконки могут находиться в папке /images/favicons).

Осталось лишь скопировать файлы и добавить HTML код в тег

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

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

Дополнительные функции и опции

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

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

Автор: Simon Codrington

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Html иконка сайта: Как сделать иконку для сайта и вставить её – Добавление иконки сайта в вкладку, адресную строку браузера

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

Формат ICO

Файл favicon.ico

image/vnd.microsoft.icon vs image/x-icon?

BugFix для Internet Explorer

Другие графические форматы фавикон

Фавикон в HTML5

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

Фавикон для Apple

Фавикон для Android

Адрес файла favicon.ico

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

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

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

HTML5 и атрибут sizes

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

Windows

Mac OS

iOS

Android

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

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

Как сделать Favicon для сайта

Что такое Favicon?

Как сделать иконку для сайта

Рисуем Favicon с помощью веб-сервиса

Создаем Favicon из готового изображения

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

Полезное замечание

как быстро вставить фавикон в HTML

Процесс генерации

Как использовать фавиконы

Дополнительные функции и опции

PSD to HTML

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

Рубрики