Как изменить иконку (favicon) для сайта?
В инструкции рассмотрены следующие вопросы:
- Зачем нужен favicon для сайта?
- Где взять иконку для сайта?
- Как установить иконку на сайт?
- Как объявить Apple Touch icon и плитку для Windows 10?
Зачем нужен favicon для сайта?
Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:
Вот где можно увидеть такую иконку:
- Закладки и вкладки браузера
- Результаты поиска Яндекс, Google
- Каталоги и рейтинги, которые загружают favicon сайтов
- Панель задач и рабочий стол операционной системы
Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.
Где взять иконку для сайта?
По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:
- Найти в интернете готовый файл иконки с расширением .ico (например, здесь)
- Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
- Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)
При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.
Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.
Как установить иконку на сайт?
Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (
Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.
Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.
Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:
<meta name="msapplication-square70x70logo" content="tile-70x70.png" /> <meta name="msapplication-square150x150logo" content="tile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="tile-310x150.png" /> <meta name="msapplication-square310x310logo" content="tile-310x310.png" />
Её величество иконка в 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.png">
<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">
Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.
А еще появился 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"
}]
}
Манифест для сайта – это простой 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. png">
<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">
И кинул все иконки в главную директорию (не хотелось пути менять).
В результате, добавив ссылку на экран 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. png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Разметка:
<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 изображений. Но я бы не стал торопиться. Всему свое время.
Поэтому все выше описанное — актуально.
Логотип веб-сайта PNG, Логотипы веб-сайтов Скачать бесплатно
Логотип веб-сайтов Png Вы можете скачать 28 бесплатных логотипов веб-сайтов PNG изображений .При разработке нового логотипа вас могут вдохновить визуальные логотипы, найденные здесь. Все изображения и логотипы выполнены с большим мастерством. Формата psd для логотипа сайта PNG нет, логотипы сайта можно скачать бесплатно в нашей системе. Кроме того, все товарные знаки и права на использование принадлежат соответствующему учреждению. Мы можем более легко найти изображения и логотипы, которые вы ищете В архиве.
Пожалуйста, не забудьте указать ссылку на Логотип сайта PNG, Логотипы сайта скачать бесплатно страница для указания авторства!
Спасибо, что выбрали нас!
- логотип веб-сайт, значок файла глобус svg wikimedia commons
Res: 1024×1024 , Размер: 39,18 КБ
- логотип веб-сайт, веб-сайт логотип png прозрачный фон фон
Res: 1600×1600 , Размер: 42. 56 KB
- логотип сайта, иконка сайта с png и векторным форматом без ограничений
Разрешение: 512×512 , Размер: 32,41 КБ 21 , Размер: 95,43 КБ
- логотип сайт, всемирная паутина значки иконки и фоны png
Res: 983×983 , Размер: 22.78 KB
- logo веб-сайт, веб-дизайн coopera
Res: 900×897 9 0021 , Размер: 33,49 КБ
- логотип веб-сайт, по всему миру паутина интернет узнай свой мем
Разрешение: 2233×2264 , Размер: 149,47 КБ 4×1024 , Размер: 77,66 КБ
- логотип сайт, всемирная паутина значки земного шара скачать
Res: 512×512 , Размер: 12.16 KB
- logo веб-сайт, gnome web wikipedia
Res: 1200×1200 , Размер: 203,15 КБ
- логотип веб-сайта, инструменты веб-сайта дизайн веб-сайта название логотипа плакаты и
Res: 1139×1039 , размер: 89.43 KB 800×800 , Размер: 2,45 МБ
Res: 600×600 , Size: 28. 54 KB 900×884 , Размер: 64,78 КБ
- логотип веб-сайт, Йоркшир компьютерные услуги поддержка ремонт компьютеров сайт, фотографии
Res: 1024×683 , Размер: 45.21 КБ
- 9Веб-сайт с логотипом 0002, рекомендуемый ресурс, посвященный здоровому телу, здоровой жизни : 1915×697 , Размер: 210,96 КБ
- веб-сайт с логотипом, дом Эдли Бар, расположенный в Нэшвилле
Res: 3300×2115 , Размер: 513,6 КБ
- веб-сайт с логотипом
Разрешение: 2245×748 , Размер: 112.34 КБ 600×640 , Размер: 60,47 КБ
- логотип сайт, значок сайта скачать png и вектор
Res: 1600×1600 , Size: 729 B
- обрезано логотип umi сайт финал ресторан umi
Res: 1542×399 , Размер: 256,99 KB
Res: 2000×829 , Size: 74.48 KB0008
Разрешение: 1500×1057 , Размер: 229,54 КБ 21 , Size: 84.29 KB
Разрешение: 324×323 , Размер: 8,66 КБ : 27,09 КБ
Скачать векторные иконки, иллюстрации и наборы пользовательского интерфейса
Скачать векторные иконки, иллюстрации и наборы пользовательского интерфейса бесплатно — PNG, SVG, XD и AIВойти
Ознакомьтесь с нашими последними летними значками
Подготовьтесь к лету. Взгляните на наши замечательные праздничные значки. Нажмите кнопку ниже, чтобы просмотреть 100 летних значков!
Просмотрите огромные библиотеки подписи 60px Smashicons
Это последний набор иконок, который вы когда-либо купите. Smashicons поможет вам в любом творческом сценарии, с которым вы столкнетесь при создании своих проектов. Забудьте о «проблеме со значком» и сосредоточьтесь на разработке приложения и веб-сайтов, которые вам нужны.
Взгляните на наши потрясающие новые продукты для иллюстраций
Ознакомьтесь с некоторыми из последних продуктов для иллюстраций в нашей новой библиотеке ресурсов для дизайна. Мы загружаем множество изображений в высоком разрешении и оригинальные векторные рисунки.
Последние наборы иконок
Бесплатно Премиум
Рисунок — Градиент
Бесплатно
Чертеж — плоский
Бесплатно
Рисунок — Хлопок
Бесплатно
Чертеж — Контур
Бесплатно
Фрукты — Хлопок
Бесплатно
517 181 Иконки и постоянное пополнение
Библиотека Smashicons постоянно пополняется. Подпишитесь на нашу лицензию Pro и разблокируйте все значки Pro и дизайнерские ресурсы премиум-класса. Проверьте наши доступные тарифные планы
Редактируемые векторы
Мы предоставляем значки в виде редактируемых векторов, которые можно масштабировать для соответствия Ваши требования без потери качества. Регулируемая ширина штриха в формате AI
Различные типы файлов
Все значки представлены в формате SVG, масштабируемом без потери качество и формат PNG. Мы также предоставляем IconJar библиотеки для каждой категории.
Ежемесячные обновления
517 181 значок и 266 дизайнерских ресурсов со многими больше бытия развитый. Мы выпускаем в среднем 5000 иконок каждый месяц.
Ресурсы по дизайну
Теперь мы предоставляем дополнительные ресурсы по дизайну для всех ваших творческие проекты. Сотни ресурсов доступны для всех основных платформ.
266 Ресурсы для дизайна — включены в лицензию Pro
Теперь в библиотеку Smashicons добавлены сотни замечательных ресурсов для дизайна. Команда Smash это работаем над тем, чтобы предоставить вам самые современные ресурсы для всех ваших дизайнерских потребностей по действительно удивительно низкой цене.
Новейшие ресурсы дизайна
Бесплатно Премиум
Ресурсы по дизайну, которые помогут вам спланировать и реализовать ваш следующий проект
Мы предлагаем больше, чем просто иконки! мы постоянно добавляем новые продукты в наши библиотеки, чтобы помочь вам добиться отличных готовых проектов.