Установка иконки для сайта
- Что такое иконка сайта?
- Как создать иконку для сайта?
- Установка иконки на сайт
- Смена иконки сайта
Что такое иконка сайта?
Как вы могли уже заметить, когда страница сайта открыта в браузере, во вкладке отображается не только заголовок страницы, но также и маленькая иконка, которая располагается перед заголовком и помогает нам отличать страницы одного сайта от страниц других сайтов (см. рисунок №1). Это особенно удобно, когда в браузере одновременно открыто много различных страниц, принадлежащих разным сайтам. Кроме того, иконка веб-сайта отображается рядом с ссылкой при добавлении страницы сайта в закладки браузера, в истории браузера, а также в некоторых поисковиках, например, Яндексе, где иконки сайтов располагаются опять же перед заголовками страниц сайтов, выданных по текущему поисковому запросу. Так что же все-таки представляет из себя иконка сайта?
Иконка сайта
favorites icon)
– это специальный значок сайта, который отображается в браузерах пользователей и позволяет более точно идентифицировать страницы данного сайта.
Обычно иконка сайта представляет собой небольшой служебный файл favicon.ico в виде изображения размером
16х16 пикселей, которое располагается в корневой папке сайта.
Рис. №1. Пример содержимого корневой папки сайта
Как видно из скриншота выше, иконка действительно помогает сделать сайт оригинальным и запоминающимся, тем самым привлекая внимание большего количества пользователей. Так что отнестись к созданию иконки сайта следует подобающим образом, иначе рядом с его страницами будут отображаться однообразные пиктограммы текущего браузера. Кроме того, отсутствие иконки сайта относится к правилам дурного тона и говорит скорее всего о неопытности веб-мастера либо временных неполадках на сайте.
Как создать иконку для сайта?
Для создания иконки сайта нужно воспользоваться либо специальной программой, либо одним из онлайн сервисов в Интернете, либо создать квадратное изображение размера 16х16 и более пикселей самостоятельно, сохранив его в виде файлика favicon.
ico (как можно легко догадаться, имя файла представляет собой сокращение от словосочетания
favorites icon). При этом хотелось бы сделать пару уточнений:- разрешается использовать иконки и больших размеров, а точнее 32х32, 48х48 и более пикселей, однако браузеры в основном все равно сжимают их до стандартного значения в 16х16 пикселей;
- несмотря на то, что на сегодняшний день стандартным универсальным форматом для иконки, который поддерживают все основные браузеры, является формат ICO, большинство браузеров поддерживают также форматы PNG, JPEG и GIF.
В виду того, что размеры иконки очень маленькие, не имеет смысла использовать для них высококачественные изображения. Лучше всего подойдет простейшая пиктограмма или изображение, в котором будет содержаться логотип сайта или какие-нибудь хорошочитаемые символы (например, сокращенное название сайта).
Установка иконки на сайт
После того, как иконка будет готова ее необходимо поместить в корневую папку сайта.
Именно там браузеры по умолчанию будут искать ее для
дальнейшего отображения на экране. При этом иконка будет отображаться рядом с заголовками всех страниц сайта. Если же необходимо разместить
иконку в другой папке или для какой-то страницы требуется установить свою иконку, следует воспользоваться тегом
<link> (см. пример №2).
HTML htmlCodes
<!DOCTYPE html>
<html>
<head>
<!-- Указываем кодировку страницы -->
<meta charset="utf-8">
<!-- Зададим базовый адрес -->
<base href="https://site.name/">
<!-- Иконка отобразится во вкладке возле данного заголовка страницы -->
<title>Использование «link» для установки иконки сайта</title>
<!-- Подключаем к странице иконку в формате ICO -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
Если необходимо подключить иконки других форматов,
следует использовать следующие конструкции:
<link rel="icon" href="favicon.
jpeg" type="image/jpeg">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.gif" type="image/gif">
</body>
</html>
jpeg" type="image/jpeg">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.gif" type="image/gif">
</body>
</html>
Пример №2 Использование элемента «link» для подключения иконки сайта
Как видно из примера, в теге <link> необходимо прописать абсолютный или относительный путь к файлу иконки, в качестве значения атрибута rel указать «icon», а в атрибуте type сообщить mime-тип подключаемого изображения.
Смена иконки сайта
Для того чтобы заменить уже установленную иконку сайта, которая расположена в корневой папке сайта, необходимо удалить из нее старую иконку и просто загрузить в нее новую. После обновления страницы и кеша браузер автоматически произведет замену старой иконки сайта на новую.
Если же иконка расположена в папке, отличной от корневой, то следует поместить в данную папку новую иконку, а старую удалить (хотя, если форматы
иконок будут отличаться, то старую иконку можно и не удалять).
Далее, если формат новой иконки будет отличаться от формата старой, нужно будет
обязательно прописать в теге <link> новые значения атрибутов href и
type, т.к. при смене формата изображения изменится как расширение файла (а значит и путь к нему), так и
его mime-тип.
Быстрый переход к другим страницам
- Понятие файловой структуры сайта
- Установка иконки сайта
- Карта сайта
- Вернуться к оглавлению учебника
Её величество иконка в manifest.json
Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.
Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.
ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).
В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.
Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».
Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки размером 16х16 пикселей в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Кстати, большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico и я всегда обязательно размещаю фавикон в главную директорию сайта.
Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.
Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства.
Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.
Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.
Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:
favicon.ico
favicon-16.png
favicon-32.png
icon-48.png
icon-96.png
icon-144.png
icon-192.png
icon-256.png
icon-384.png
icon-512.png
apple-touch-icon-57.png
apple-touch-icon-60.png
apple-touch-icon-72.png
apple-touch-icon-76.png
apple-touch-icon-114.png
apple-touch-icon-120.png
apple-touch-icon-152.png
apple-touch-icon-167.png
apple-touch-icon-180.png
ms-tile-144.png
ms-tile-126.png
ms-tile-270.png
ms-tile-558×270.png
ms-tile-558.png
Разметка link примерна такая:
<link rel="icon" href="/icon-96.
<link rel="icon" href="/icon-144.png">
<link rel="icon" href="/icon-192.png">
<link rel="icon" href="/icon-256.png">
<link rel="icon" href="/icon-384.png">
<link rel="icon" href="/icon-512.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
png">Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.
А еще появился Manifest.json и browserconfig.xml.
По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.
Вы опять скажете — «Блин…. еще и эти файлы делать к куче картинок»… «Королева иконка требует меня в жертву»…
Все просто на самом деле. Я сейчас подскажу как все сделать. У меня на этот сайт — все про все — заняло 10 минут.
Но сначала разберемся с этими файлами, а не с иконками разных размеров.
Manifest.json
Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.
Подключение файла как и всего остального в head:
<link rel="manifest" href="/manifest.json">
Пример простого файла:
{
"lang": "ru",
"name": "Моё приложение",
"description": "Описание приложения",
"icons": [{
"src": "/icon.png",
"sizes": "64x64",
"type": "image/png"
}],
"start_url": "/",
"display": "fullscreen",
"orientation": "landscape",
"background_color": "#000000",
"screenshots": [{
"src": "/screenshots. jpg",
"sizes": "640x480",
"type": "image/jpeg"
}]
}
jpg",Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.
Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.
п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.
Как быстро все реализовать:
1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.
2. Идем на бесплатный сервис https://www.favicon-generator.org/
Выставляем в нем галочки как на скриншоте:
Выбираем созданную заранее картинку и генерируем.
И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.
Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).
Я исправил в нем только имя:
"name": "Веб-студия WebTend",
"short_name": "WebTend",
Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.
Правьте в NotePad++ в UTF-8 без BOM.
Вставил полученные на этом же сервисе теги в head:
<link rel="apple-touch-icon" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-icon-192x192.
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
png">И кинул все иконки в главную директорию (не хотелось пути менять).
В результате, добавив ссылку на экран IPhone, получил такое:
Как видим это 5s — экран маленький и он взял short_name — WebTend из manifest.json, что логично. На Ipad я уже увидел полное имя. При добавлении пользователь может изменить имя. Единственно на Android нет скругления иконки, что растраивает, думаю будет в будущем, при развитии этой системы.
При открытии по клику на ней очень интересно — при загрузке иконка с названием по типу preloader без анимации (можно цвет фона предзагрузки менять в manifest.
json). Открывается без строки браузера, в полноэкранном режиме, с имитацией приложения.
А совсем недавно такое работало только на андроид системах. Прогресс идет.
Еще один отличный сервис: https://realfavicongenerator.net
Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.
Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?
А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).
Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
<link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#00а0ff»> Название файла именно такое — safari-pinned-tab.svg.
Если не указывать эту иконку, то браузер будет отображать первую букву домена вашего сайта.
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.
Для такой маленькой иконки очень много работы
С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.
Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.
Пусть браузер сам занимается уменьшением
Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.
Поэтому если вы не возражаете, чтобы браузер за вас автоматически уменьшал изображения, можете предоставить всего одну большую иконку, которая будет покрывать большинство случаев.
Но есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах.
В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.
Минимальный набор иконок (от Ruadhán O’Donoghue)
Следующие файлы в корневой папке
favicon.ico (с размерами 16×16, 32×32)
favicon-16×16.png: современный эквивалент формата ICO
favicon-32×32.png: Safari
apple-touch-icon-180.png: Apple touch icon
icon-192.png: Chrome/Android
safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari
mstile-150×150.png: MS плитка
Файл manifest.json, использующий изображение chrome:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Файл browserconfig.xml, использующий изображение mstile:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
png"/>Разметка:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/icon-32x32.png">
<link rel="icon" type="image/png" href="/icon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Но проще воспользоваться сервисом. Ничего страшного и утяжеляющего сайт не будет, если вы все сделаете как я написал.
Можно и закончить эту публикацию, но осталась одна важная вещь:
Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).
И наконец, в догонку, связанная с темой информация — вывод Иконки в Яндекс браузере.
Она там имеет «кличку» — Виджет для Табло. Жуткое название. Всегда были Визуальные закладки. Красиво и понятно. Теперь Табло…
Про табло и иконки (виджеты на нем) читайте тут: https://yandex.ru/support/browser/personalization/tableau.html
Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.
И ничего в начале не получил. Виджет да, Заголовок да, а вот саму иконку нет. Оказалось абсолютный путь до иконки должен быть закодирован в URLencoded — вот ссылка на сервис это делающий: http://www.codenet.ru/services/urlencode-urldecode/
Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.
Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать.
Вроде, про это…
Дополнение:
После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.
SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:
<link rel="icon" type="image/svg" href="/image.svg">
У svg есть конечно перспективы сделаться «ферзем» в будущем.
Несомненный плюс — в возможностях переопределения размеров svg изображений. Но я бы не стал торопиться. Всему свое время.
Поэтому все выше описанное — актуально.
Веб-иконка — 16×16 бесплатных иконок для панели инструментов
| ||||||||||||
| Скачать иконку | ||||||||||||
| Перетащите, чтобы проверить качество значков | ||||||||||||
Веб-папка Smooth Icon Cats Icons Коммерческое использование: Не разрешено | Web Icon 3D BlueFX Desktop Icons Коммерческое использование: разрешено | ||
Web Icon 12×12 Бесплатные значки панели инструментов Коммерческое использование: Разрешено | Веб-иконка Бесплатные иконки социальных сетей Коммерческое использование: разрешено | ||
Web Icon 16×16 Бесплатные иконки панели инструментов Коммерческое использование: разрешено | Иконка веб-сервера Иконки кошек 2 Коммерческое использование: Не разрешено | ||
Значок всплывающей подсказки Web Slice Fugue 16px Дополнительные значки Коммерческое использование: разрешено | Значок веб-камеры Монохромные отражения Зеленые значки Коммерческое использование: разрешено | ||
Значок веб-флага Золотые значки управления Коммерческое использование: Не разрешено | Значок веб-загрузки Значки файлов Lords Коммерческое использование: Не разрешено | ||
Значок веб-папки Значки из нержавеющей стали Коммерческое использование: не разрешено | Иконки SEO Коммерческое использование: Не разрешено | ||
Значок веб-камеры Монохромные базовые синие значки Коммерческое использование: разрешено | Значок веб-почты 24×24 бесплатные значки кнопок Коммерческое использование: разрешено |
Значок щита Скачать значок Windows Скачать файлы PNG | Значок чата Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки вверх Скачать значок Windows Скачать файлы PNG | Значок стрелки влево Скачать значок Windows Скачать файлы PNG | ||
Значок плагина Загрузить значок Windows Скачать файлы PNG | Значок специального предложения Скачать значок Windows Скачать файлы PNG | ||
Lamp 2 Icon Скачать значок Windows Скачать файлы PNG | |||
Значок стрелки вправо Скачать значок Windows Скачать файлы PNG | Значок Музыка Скачать значок Windows Скачать файлы PNG | ||
Повернуть значок по часовой стрелке Загрузить значок Windows Загрузить файлы PNG | Значок Windows Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки вниз Скачать значок Windows Скачать файлы PNG | Значок стрелки вправо вверх Загрузить значок Windows Загрузить файлы PNG | ||
Значок открытия папки Загрузить значок Windows Загрузить файлы PNG | Smile 6 Icon Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки влево вверх Загрузить значок Windows Скачать файлы PNG | |||
Значок кода Скачать значок Windows Скачать файлы PNG | Диаграмма График 2d 1 ICON Скачать ICON Windows Скачать файлы PNG |
Спонсируемые ссылки
|
