Содержание
Фавикон – его значение, создание favicon для сайта
Последнее обновление: 17 октября 2022 года
47309
О чем статья:
-
Что такое фавикон и каких форматов он бывает -
Какие требования предъявляют разные платформы -
С помощью каких инструментов можно создать иконку -
Можно ли не создавать фавикон и как это повлияет на выдачу
Что такое фавикон
Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта.
Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.
Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.
Формат и стили фавиконов
Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.
С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются..
Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.
Фавиконки отображаются на пустой стартовой странице Google
Аудит контекстной рекламы
Бесплатно проведем анализ медиапланирования, настроек рекламной кампании и выбранной стратегии управления ставками.
Особенности фавиконов для разных платформ
Десктоп
Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию . ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.
Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.
Так выглядят фавиконы в мобильной версии браузера Google Chrome
Andriod, Chrome и Opera
Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате . png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.
Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>
В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.
Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение.
Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение
Mac OS и iOS Safari Web Clip
Для корректного отображения в Mac OS favicon нужно создавать в формате . svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.
При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.
Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.
Размеры фавиконов для разных экранов устройств Apple:
|
|
Ретина версия 6 и ниже |
Ретина версия 7 |
Не ретина версия 6 и ниже |
Не ретина версия 7 |
|
iPhone |
144х144 |
120х120 |
57х57 |
60х60 |
|
iPad |
144х144 |
152х152 |
72х72 |
76х76 |
Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.
Другие варианты
|
Android TV (до 2014 г. – Google TV) |
Opera Coast |
|
96х96 |
228х228 |
Как создать?
Для создания фавикона используйте графические редакторы или специальные сервисы.
Adobe Photoshop или Figma
Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop, например, для этого даже есть специальный плагин – Favicon.ico. В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.
Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки.
Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.
Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.
Также лучше не брать иконки из открытых источников. Они неуникальные и если их скачает кто-то еще, ваш сайт не будет отличаться. Если же вы случайно установите в качестве фавикона для сайта логотип чужой компании, к вам могут возникнуть юридические претензии. Лучше создать свою уникальную иконку самостоятельно или закажите создание фавикона у профильного специалиста.
Как установить
Задайте правильное имя – favicon.ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.
Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.
Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.
Пропишите адрес в коде на главной странице в теге <head>. Требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в коде. С помощью <head> можно задавать для разных страниц сайта собственные иконки.
Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>
Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>
Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>
Safari — <link rel=”mask-icon” href=”icon.svg”>
Андроид — <link rel=»shortcut icon» href=»favicon.png»>
Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.
Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.
Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:
-
в Яндекс — http://favicon.yandex.net/favicon/mysite.ru -
в Google — http://www.google.com/s2/favicons?domain=mysite.ru.
Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.
Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.
Статья
Кейс «Горторгснаб» — увеличили видимость сайта, число запросов и трафик
#SEO
Статья
Куда движется ecommerce в российском поиске Яндексе и Гугла. Доклад, который построен на выборке из 200000 запросов
#SEO
Статья
Как мы используем результаты Лаборатории поисковой аналитики в продвижении бизнеса?
#SEO
Запомните
- Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
- Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение.
Если в коде будут прописаны все размеры, то браузер подтянет нужный. -
Создавайте сразу две версии фавиконов – с прозрачным и непрозрачным фоном. Сегодня иконки отображаются на разных устройствах, разных платформах и в разных контекстах. Вы не всегда сможете спрогнозировать, как именно значок вашего сайта будет виден у пользователя. -
Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ. -
Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице. -
Чтобы пользователи могли сохранять сайт как приложение на домашний экран мобильного устройства, создайте веб-манифест и свяжите его с кодом на сайте.
-
Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков. -
Наличие favicon может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче.
Создание favicon для сайта 2020 / Хабр
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
- Десктопные браузеры
- Chrome на Android
- Иконка закладки в iOS (PWA)
- macOS
- Windows
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico"> <link type="image/png" rel="icon" href="… /favicon-16x16.png"> <link type="image/png" rel="icon" href="…/favicon-32x32.png"> <link type="image/png" rel="icon" href="…/favicon-96x96.png"> <link type="image/png" rel="icon" href="…/favicon-120x120.png">
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
<link rel="manifest" href="…/manifest.json">
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72. png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192. png, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
<meta name="msapplication-TileImage" content="…/mstile-144x144.png"> <meta name="msapplication-square70x70logo" content="…/mstile-70x70.png"> <meta name="msapplication-square150x150logo" content="…/mstile-150x150.png"> <meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png"> <meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
Данной строкой мы указываем цвет фона плитки:
<meta name="msapplication-TileColor" content="#2b5797">
Можно указать имя вашего веб-сайта:
<meta name="application-name" content="My Application">
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
<meta name="msapplication-config" content="…/browserconfig.xml">
Сам файл будет выглядеть следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
- Small — 70×70 (Рекомендуемый размер: 128×128)
- Medium — 150×150 (Рекомендуемый размер: 270×270)
- Wide — 310×150 (Рекомендуемый размер: 558×270)
- Large — 310×310 (Рекомендуемый размер: 558×558)
Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico"> <link type="image/png" rel="icon" href="… /favicon-16x16.png"> <link type="image/png" rel="icon" href="…/favicon-32x32.png"> <link type="image/png" rel="icon" href="…/favicon-96x96.png"> <link type="image/png" rel="icon" href="…/favicon-120x120.png"> <link type="image/png" rel="icon" href="…/android-icon-192x192.png"> <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.
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
HTML favicon: создание и добавление
- Что такое favicon?
- Создание
- Добавление фавиконки
Что такое фавикон?
Favicon (аббревиатура от Favorite icon) — это значок, также известный как ярлык, значок веб-сайта или значок закладки. Фавикон — это обычное графическое изображение (картинка), связанное с определенной веб-страницей или веб-сайтом. Браузеры, поддерживающие добавление фавикона, обычно отображают его в адресной строке и на вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, хранящегося на рабочем столе. Поисковик Яндекс придал фавикону большое значение и отображает его вместе с результатами поиска.
Создание
Для создания фавиконки вы можете использовать практически любой графический редактор, но выбранный вами формат изображения должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.
При создании изображения обратите внимание на следующие нюансы:
- Фавикон должен быть выполнен в едином стиле с сайтом, так как это своеобразная визитная карточка вашего проекта.
- Изображение, которое вы хотите использовать в качестве фавиконки, должно быть очень простым для понимания, и вы должны использовать всего несколько элементов.
- Следите за тем, что бы favicon максимально передал суть вашего сайта, бизнеса, проекта.
- Лучше сделайте картинку так, чтобы она вызывала у посетителей вашего сайта ассоциации. Например, значок телефона для салона мобильных телефонов.
Добавление фавиконки
Чтобы добавить фавиконку на веб-страницу в начале HTML-документа, вам потребуется ввести всего одну строку с тегом , где нужно указать rel атрибут, чтобы указать браузеру, что мы добавляем значок, атрибут href , содержащий адрес нашего изображения, и атрибут type , который показывает, какой формат изображения мы используем:
<голова>
<мета-кодировка="utf-8">
Название страницы
<тело>
Примечание: обратите внимание, что вы можете указать свой собственный значок для каждой веб-страницы или для каждого раздела вашего сайта.
В таблице показаны различные варианты добавления фавиконки и поддержка браузеров:
| Google Chrome | Internet Explorer | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | |
| Да | Да (с IE 11) | 3 Да | Да | Да | |
| Да | Да ( с IE 9) | Да | Да | Да | |
| Да | Да (с IE 11) | Да | Да | Да | |
| Да | Да (с IE 11) | Да | Да | Да | |
| Да | Да (с IE 9) | Да | Да | Да |
Не стоит недооценивать важность favicon, особенно сегодня, когда в Интернете миллиарды сайтов и страниц, некоторые из которых являются вашими конкурентами. Иконка сайта, как и логотип, способствует его запоминанию и узнаваемости. Вы не должны упускать дополнительную возможность улучшить свой ресурс.
Что такое фавикон, зачем он нужен вашему веб-сайту и как его создать
12 минут чтения
27 января 2023 г.
Брендинг
SEO на странице
UX
Фавикон — это небольшое изображение, которое представляет веб-сайт в веб-браузерах. Если вы прямо сейчас взглянете на адресную строку своего браузера, я уверен, вы увидите несколько фавиконов, в том числе иконку SE Ranking. Как правило, на фавиконе присутствует логотип, первая буква названия компании или просто изображение, отражающее специфику веб-сайта, который он представляет.
Фавиконы помогают нам быстро визуально сопоставить каждую вкладку браузера с определенным веб-сайтом. И если вы, как и я, склонны держать открытыми десятки вкладок одновременно — в конечном итоге не в состоянии прочитать их названия, — фавиконки — ваши лучшие друзья, которые значительно облегчают поиск нужной вам веб-страницы.
Хотя фавиконки могут показаться маленькими и незначительными, их наличие на самом деле может иметь огромное значение с точки зрения пользовательского опыта и онлайн-бренда. В этом посте мы разберемся, откуда берутся фавиконы, какие виды фавиконов используются в современных браузерах и как создать их для своего сайта.
От Internet Explorer до поисковой выдачи Google
Еще в 1999 году значок значка был введен в Internet Explorer, чтобы помочь пользователям отличать веб-страницы, добавленные в закладки, от других. А поскольку страницы с закладками назывались (и, вероятно, до сих пор) «Избранными» в Internet Explorer, слова «избранное» и «значок» были смешаны вместе, чтобы создать новый термин.
1. В настоящее время фавиконки отображаются прямо над адресной строкой независимо от того, добавлен сайт в закладки или нет. И если у веб-сайта нет значка фавикона, то в браузере будет отображаться общий символ браузера.
2. Помимо адресной строки, фавиконки можно найти и в истории браузера.
3. Страницы с закладками также будут отмечены фавиконом на панели закладок.
4. С мая 2019 года Google использует фавиконы в мобильной поисковой выдаче.
5. В октябре 2022 года Google выпустил «имена сайтов» для мобильной поисковой выдачи. Благодаря новому дизайну Google может отображать названия веб-сайтов более заметно.
Фавиконы привлекают внимание пользователей и повышают узнаваемость бренда. Если пользователи пару раз зайдут на сайт с запоминающимся фавиконом, то в будущем они легко отличят его от других. Подумайте об известном бренде, с которым вы взаимодействуете ежедневно, например, Facebook или Twitter, и вы сможете легко представить его фавикон с закрытыми глазами.
Фавиконы Facebook и Twitter выглядят точно так же, как их соответствующие логотипы. Значит ли это, что все, что вам нужно для фавикона, — это свернуть изображение вашего логотипа и загрузить его на свой веб-сайт? Давайте углубимся во все технические детали и поговорим о том, что нужно для создания фавикона.
Технические требования для создания фавиконки
Теперь, если вы хотите, чтобы ваши фавиконки правильно отображались на всех типах устройств — в хорошем качестве и с изображением, которое вы имеете в виду — вам необходимо следовать рекомендациям, стандартам, лучшим практики, в основном, все технические параметры.
Но с чего же начать? Начните с выбора правильного формата и размера фавикона.
Формат фавиконки
Изначально все фавиконки создавались в виде файлов ICO — формата, разработанного Microsoft для хранения иконок программ Windows. Самым большим преимуществом этого формата является то, что он может хранить изображения разных размеров в одном файле.
В прошлом Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG.
Как правило, фавиконы ICO в настоящее время считаются устаревшими, и большинство веб-сайтов сегодня имеют фавиконы в формате PNG. Причиной этого является качество изображения: высокая кросс-браузерная и кросс-платформенная совместимость. Фавиконы PNG выглядят намного лучше в большинстве современных браузеров и устройств.
Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами. Однако это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких фавиконов разного размера для всех популярных устройств. Таким образом, хотя в настоящее время только несколько браузеров поддерживают значки SVG, другие вполне могут скоро их догнать.
Чтобы узнать, какие форматы favicon поддерживаются разными браузерами, посетите веб-сайт Can I Use. Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.
Размер фавикона
Классический размер фавикона 16х16 пикселей, что соответствует 32х32 пикселя на экранах с высоким разрешением. В то время как Google использует 16x16px в своей мобильной поисковой выдаче, в его правилах говорится, что фавиконы такого размера не предоставляются. Вместо этого Google рекомендует создавать фавиконы с более высоким разрешением, кратным квадрату 48 пикселей. Итак, размер вашего фавикона должен быть 48x48px, 96x96px, 144x144px и так далее. Между тем, файлы SVG не обязательно должны иметь определенный размер.
Теперь, когда атрибут размера был представлен в HTML5, вы также можете легко указать несколько размеров одного и того же значка. Атрибут позволяет задать ширину и высоту фавикона, а также можно указать несколько значений через пробел:
(1 размер)
(2 размера)
Дополнительные рекомендации для фавиконки
И вот несколько общих рекомендаций от Google, которых вы должны придерживаться:
- Используйте квадратную иконку.
- Фавикон должен представлять только ваш бренд и не содержать неуместных символов (например, свастики) — иначе Google не покажет его и вместо этого будет использовать общий символ фавикона.
- Файл Favicon должен быть доступен для поисковых роботов Google (пользовательский агент Google Favicon).
Технические параметры фавиконов во многом зависят от устройств или браузеров, которые их сканируют. По этой причине существуют сотни онлайн-сервисов, которые помогут вам учесть все нюансы и создать фавиконы нужного формата и размера.
UPD : Учитывая все эти изменения, Google рекомендует перепроверить соответствующую документацию по фавиконкам, чтобы обновить их в соответствии с последними рекомендациями. Кроме того, поисковый гигант также рекомендует использовать значки размером не менее 48 пикселей и обязательно следовать рекомендациям по фавиконам.
Хотя создание выдающегося фавикона, безусловно, важно, также важно сосредоточиться на других элементах вашего веб-сайта, которые влияют на его общую эффективность. В частности, важно регулярно проверять факторы SEO на странице, такие как метатеги, теги заголовков и использование ключевых слов. Потратив время на точную настройку этих элементов, вы можете помочь поисковым системам лучше понять содержание вашего веб-сайта, что в конечном итоге может привести к более высокому рейтингу и увеличению трафика.
Обращение к Интернету за помощью в создании фавикона
Если вам когда-нибудь придет в голову идея просто изменить имя файла вашего логотипа на favicon.ico, забудьте об этом, потому что это так не работает. Скорее всего, вы получите множество ошибок, когда дело доходит до отображения вашего фавикона в разных браузерах.
Можно ли этого избежать?
Конечно. На самом деле существует несколько способов создания фавикона сайта, например:
1) Создать его в графическом редакторе типа Photoshop с помощью специального плагина Favicon.ico.
2) Оформить его в специальных онлайн-сервисах (например, favicon.cc) и потом скачать оттуда в подходящем формате.
3) Использовать существующее изображение, например, вашего логотипа и загрузить его в онлайн-генератор фавиконов, таких как Favicon.io, Realfavicongenerator.net и т. д.
4) Загрузить готовые фавиконы из специальных баз данных, таких как Flaticon или Findicons с тысячами вариантов на выбор.
После загрузки сгенерированного фавикона вам останется только добавить его на свой сайт.
Украсьте свой сайт фавиконкой
Сначала загрузите свою фавиконку в корневой каталог сайта с помощью файлового менеджера, такого как Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег
:
...
...
Итак, теперь, когда мы разобрались со всеми основными техническими аспектами фавиконов, давайте перейдем к тому, что считается уместным в дизайне фавиконов, а что следует полностью вычеркнуть из памяти.
Простота не значит хуже в дизайне фавиконки
Прежде чем вы побежите записывать свою следующую идею фавиконки, почему бы не внимательно посмотреть на результаты поиска, которые появляются по вашим целевым ключевым словам? Как выглядят фавиконы, которые у них есть?
И пока вы будете это делать, задайте себе следующие вопросы:
Ваш значок выделяется из толпы? Возможно, ваши конкуренты разбавляют свои фавиконы цветом, и, в противовес этому, вы могли бы выбрать черно-белый фавикон или даже что-то концептуально другое.
Может ли анимированный GIF-фавикон помочь вам выделиться? Или это будет просто бельмом на глазу для поисковиков, создавая эффект, который (скорее всего) создаст впечатление, что ваш сайт еще не закончил загрузку.
Вы четко понимаете свой фавикон, когда он размером 16×16 пикселей? Старайтесь, чтобы ваш фавикон не содержал мелких деталей, а также не пытайтесь включить в него все мыслимые цвета.
Является ли ваш фавикон представителем вашей ниши и веб-сайта? Иногда вы можете просто посмотреть на значок бренда и сразу понять, в каком бизнесе он работает. В других случаях вы даже можете узнать точный визуальный стиль бренда и его веб-сайта в значке.
Имейте в виду, что отличный фавикон всегда будет четким , простым и запоминающимся .
Теперь, когда вы знаете, как создать красивый, запоминающийся фавикон и добавить его на свой сайт, пришло время разобраться, будет ли он корректно отображаться в поисковых системах. Зайдем поближе!
Проверка вашего фавикона на наличие критических ошибок
Просто погуглив ваш сайт в мобильной поисковой выдаче, вы сможете быстро проверить, как ваш значок отображается в поиске, или вы можете использовать этот пример ссылки, чтобы открыть только значок вашего сайта:
- http://www.google.com/s2/favicons?domain=mysite.com
Есть еще один способ проверить, как фавикон выглядит на разных устройствах: с помощью специальных онлайн-сервисов, таких как Realfavicongenerator.
Однако, если ваш значок не отображается корректно или вообще не отображается в Google по какой-либо причине, начните с проверки следующих вещей:
- Находится ли графическое изображение в корневой папке ресурса в файле ICO, PNG или GIF формат?
- Правильно ли прописан код, ведущий к изображению на страницах ресурса?
- Доступен ли файл значка для поисковых роботов?
Хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается фавикон. Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).
Вообще говоря, даже если вы все делаете правильно со своей стороны, имейте в виду, что поисковым системам нужно время, чтобы проиндексировать фавиконы. На самом деле, есть целый специальный бот, который не делает ничего, кроме этого. Что он на самом деле делает, так это загружает значки веб-сайтов на свой сервер, поэтому для индексации вашего графического изображения может потребоваться до нескольких недель.
Почему без фавикона не обойтись
Фавиконы помогают сайтам оставаться на плаву в огромном океане онлайн-ресурсов, а также делают их более привлекательными и профессиональными в глазах посетителей.
Если вам нужна помощь, обратитесь за помощью к нашему веб-сайту аудита.
Среди прочего, он может выполнить полную техническую проверку вашего сайта, включая поиск вашего фавикона.
Если вы уверены, что у вас есть фавикон, но наш веб-аудит его не видит, значит проблема с индексацией или неверный адрес значка сайта. Проверьте все еще раз, чтобы убедиться.
Знаете, как говорят, что дьявол кроется в деталях? Что ж, ваш фавикон — очень маленькая деталь, которая может повлиять на общественное восприятие вашего сайта и бренда, их узнаваемость и даже объем трафика, который он получает из поиска, поэтому не стоит его недооценивать.
Подводя итог, не стоит возиться со своим фавиконом, так как хороший фавикон является неотъемлемой частью вашего бренда и техническим стандартом вашего сайта.