Favicon сегодня: форматы, поддержка, автоматизация
На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.
В каком формате должен быть фавикон?
Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
HTML5 и атрибут sizes
Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
Пора ли отправлять 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 с помощью метаданных в :
Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
Можно указать цвет фона плитки:
Можно указать имя закрепленного сайта:
Если нет этих метаданных, то в качестве имени используется значение в ; страницы.
Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:
Можно даже определить адрес документа:
И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.
Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.
Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.
#000000 30 1 square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.
Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент . Этот элемент может включать в себя до 5 элементов , содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент , значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.
Наконец, есть внутри тега еще элемент , отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:
Text Field 1 То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.
Подробнее о шаблонах можно узнать на официальном сайте.
Mac OS
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.
Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.
iOS
Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.
Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.
Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с 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 можно указать заголовок веб-приложения. По умолчанию используется значение тега . Чтобы задать другой заголовок, добавьте метатег на веб-страницу:
Кстати, можно даже установить стиль строки состояния для веб-приложения:
Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.
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 определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из в ;
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через , добавив следующий мета-тег:
Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.
Автоматизация
В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня 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 форматов:
Для создания мульти-размерной иконки 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-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 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:
В коде нужно добавить атрибут 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.
В коде нужно добавить атрибут 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 (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
#ffc40d В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
- Small — 70×70 (Рекомендуемый размер: 128×128)
- Medium — 150×150 (Рекомендуемый размер: 270×270)
- Wide — 310×150 (Рекомендуемый размер: 558×270)
- Large — 310×310 (Рекомендуемый размер: 558×558)
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
Что такое фавикон и как его создать
Как выделить сайт в поисковой выдаче? Добавить фавикон. Рассказываем главное о значке веб-страницы.
Иллюстрация: Polina Vari для Skillbox Media
Контент подготовлен нейросетью, которая анализирует тысячи источников в режиме реального времени. Факты проверил редактор Skillbox Media.
Фавикон — иконка, которая отображается перед названием страницы во вкладке браузера. По ней пользователи идентифицируют нужные им сайты среди множества открытых страниц.
Если добавить фавикон на сайт компании, можно улучшить узнаваемость бренда, создать положительное впечатление у пользователей и удержать их на сайте.
В статье разбираемся:
- что такое фавикон;
- для чего он нужен;
- как создать фавикон;
- какие есть генераторы фавиконов;
- как добавить фавикон на сайт.
Что такое фавикон
Фавикон (англ. favicon, сокращение от favorite icon) — это небольшая иконка, которая обычно отображается в адресной строке браузера рядом с названием веб-сайта или на вкладке браузера. Она также может появляться в закладках, истории посещений и других местах, где требуется идентификация веб-сайта.
Фавикон обычно имеет размер 16×16 пикселей или 32×32 пикселя. Он может быть представлен в различных форматах, включая ICO, PNG и JPG. Его дизайн может быть основан на логотипе, иконке или другой графике, связанной с веб-сайтом.
Фавиконы служат визуальными идентификаторами, которые помогают пользователям быстро распознать и запомнить веб-сайт. Они также могут использоваться для установки на главный экран мобильного устройства в виде ярлыка для быстрого доступа к сайту.
Фавикон не только имеет эстетическое значение, но и играет важную маркетинговую роль. Он помогает улучшить узнаваемость бренда и создать положительное впечатление у пользователей. Благодаря фавиконам пользователи могут легко идентифицировать веб-сайт, а это особенно полезно, когда у них открыто множество вкладок. Фавикон также способствует удержанию пользователей на сайте, так как он придаёт профессиональный вид и визуальную цельность.
Создание и добавление фавикона на веб-сайт — это важный шаг в разработке веб-проекта. В следующих разделах мы рассмотрим, как создать фавикон и добавить его на веб-сайт.
Для чего нужен фавикон
Фавикон играет важную роль в улучшении пользовательского опыта и визуальном представлении сайтов. Вот несколько причин, по которым фавикон является важным элементом для любого сайта:
- Узнаваемость бренда и идентификация. Фавикон способствует узнаваемости бренда и визуальной идентификации сайта. Пользователи могут быстро распознать и запомнить сайт благодаря уникальной иконке, которая отображается в адресной строке браузера и на вкладках.
- Более профессиональный вид сайта. Наличие фавикона на веб-сайте придаёт ему более профессиональный вид и помогает создать цельный визуальный образ. Это маленькая деталь, но она говорит о внимании к мелочам и заботе о пользователе. Фавикон добавляет визуальной цельности и показывает, что веб-сайт оптимизирован для удобства использования.
- Улучшение навигации и пользовательского опыта. Когда у пользователя открыто множество вкладок в браузере, фавикон помогает быстро найти нужный сайт. Фавикон упрощает навигацию и узнавание сайта среди других страниц. Пользователи могут быстро переключаться между вкладками, ориентируясь по фавиконам, что сокращает время и усилия на поиск нужной информации.
- Установка на главный экран мобильных устройств. Фавикон также может быть установлен на главный экран мобильных устройств в виде ярлыка, что позволит пользователям быстро получать доступ к сайту.
Фавикон это важный элемент дизайна и маркетинга для веб-сайтов. Он помогает улучшить узнаваемость бренда, создать профессиональный образ, улучшить навигацию и повысить уровень удовлетворённости пользователей.
Как создать фавикон: дизайн, размер, формат
Для создания фавикона необходимо учесть несколько важных аспектов, таких как дизайн, размер и формат.
Дизайн фавикона. Дизайн может быть основан на логотипе вашего бренда, иконке или другой графике, которая наиболее хорошо представляет ваш веб-сайт. Важно выбрать изображение, которое будет чётким и узнаваемым в маленьком размере. Используйте простые формы, яркие цвета и минималистичный стиль, чтобы фавикон был легко различим и соответствовал общей визуальной концепции вашего бренда.
Размер фавикона. Стандартные размеры фавикона составляют 16×16 пикселей или 32×32 пикселя. Выберите размер в зависимости от требований вашего веб-сайта и предпочтений в дизайне. Более маленький размер, такой как 16×16 пикселей, может быть предпочтительным для более простых иконок, в то время как 32×32 пикселя могут предоставить больше возможностей для деталей и более сложных изображений.
Формат фавикона. Фавиконы могут быть представлены в различных форматах, включая ICO, PNG и JPG. Самый распространённый формат — ICO. Он поддерживается большинством браузеров. Он обеспечивает лучшую совместимость и качество отображения. Однако вы также можете использовать формат PNG или JPG, особенно если вам нужна прозрачность или вы хотите использовать более сложные графические элементы.
Существует множество онлайн-инструментов и программ, которые помогают создавать фавиконы. Некоторые из них предлагают возможность загрузки изображения и автоматического преобразования его в необходимый размер и формат фавикона.
Генераторы фавиконов: топ-5
Существует несколько удобных и доступных инструментов, которые помогут вам создать фавикон для вашего веб-сайта. Вот несколько популярных инструментов с ссылками на их официальные сайты:
- Favicon.io — предлагает простой в использовании генератор фавиконов. Вы можете загрузить изображение и выбрать размер и формат. Он также позволяет настраивать и добавлять дополнительные иконки, такие как иконка для мобильных устройств и иконка для приложения на главном экране.
- Favicon Generator — ещё один простой инструмент для создания фавиконов. Он автоматически преобразовывает загруженное изображение в фавиконы различных размеров и форматов. Вы также можете изменить настройки и получить готовый код для вставки на ваш веб-сайт.
- Canva — мощный графический редактор с широким спектром функций. Он также предлагает возможность создания фавикона. Вы можете выбрать готовый шаблон, загрузить собственное изображение или создать фавикон с нуля. Canva предлагает различные инструменты для редактирования и настройки фавикона в соответствии с вашими предпочтениями.
- RealFaviconGenerator — онлайн-сервис, который поможет создать фавикон, а также сгенерировать соответствующие иконки для различных платформ и устройств. Вы можете загрузить изображение и получить готовый набор фавиконов, включающий иконки для iOS, Android, Windows и других платформ.
- Favicon.cc — предлагает простой в использовании редактор фавиконов, который позволяет создавать фавиконы вручную. Вы можете рисовать или загружать изображение, редактировать его и сохранять в различных размерах и форматах. Этот инструмент подходит для тех, кто предпочитает создавать фавиконы с нуля или вносить дополнительные изменения в существующие изображения.
Выберите подходящий инструмент и создайте уникальный фавикон, который поможет вашему сайту выделиться среди других.
Как добавить фавикон на сайт
В этом разделе мы рассмотрим несколько простых шагов для добавления фавикона на ваш веб-сайт.
- Создайте фавикон. Прежде чем добавлять фавикон на ваш сайт, убедитесь, что у вас есть готовый фавикон. Вы можете использовать один из ранее упомянутых инструментов для создания фавиконов, чтобы получить изображение нужного размера и формата.
- Разместите фавикон на вашем сервере. После создания фавикона вам необходимо разместить его на вашем веб-сервере. Рекомендуется сохранять фавикон в корневой папке вашего сайта или в папке с другими ресурсами, такими как изображения и стили. Обратите внимание на путь к фавикону, чтобы в дальнейшем использовать его в коде вашей веб-страницы.
- Вставьте код в HTML. Чтобы добавить фавикон на ваш сайт, вам нужно вставить соответствующий код в HTML-разметку вашей веб-страницы. Для этого вставьте следующий код внутри раздела вашего HTML-документа:
link rel="icon" type="image/png" href="/путь-к-фавикону/favicon.png">
- Сохраните и загрузите изменения. После вставки кода в HTML-документ сохраните изменения и загрузите обновленную версию вашей веб-страницы на сервер. Убедитесь, что фавикон и HTML-документ находятся в одной директории на сервере.
- Проверьте, как отображается фавикон. Откройте ваш сайт в браузере и проверьте, отображается ли фавикон во вкладке браузера или рядом с URL‑адресом. Если фавикон не отображается, убедитесь, что путь к фавикону в HTML-коде указан правильно и что файл фавикона находится на сервере.
После завершения этих шагов ваш фавикон должен успешно отображаться на вашем сайте.
Главное о фавиконах в пяти пунктах
- Фавикон — это маленькая, но важная деталь, которая поможет узнаваемости и профессиональному образу вашего веб-сайта.
- Фавикон должен быть чётким, простым и узнаваемым. Избегайте избыточной сложности и перегруженности деталями. Помните, что маленький размер фавикона может сделать его непонятным, если на нём слишком много деталей.
- Создание фавикона несложно, и существуют множество инструментов и онлайн-сервисов, которые помогут вам в этом процессе. Используйте их, чтобы сделать качественный фавикон для вашего сайта.
- Убедитесь, что фавикон отображается в разных браузерах и на различных устройствах. Проверьте его видимость и читаемость в различных размерах и форматах.
- Не забывайте обновлять фавикон, если вы вносите изменения в дизайн вашего бренда. Обновлённый фавикон покажет актуальность вашего веб‑сайта.
Другие статьи Skillbox Media о том, как привлечь на сайт больше пользователей
- Как использовать поисковые подсказки в продвижении сайта: кейсы и рекомендации
- Зачем проверять уникальность текста и действительно ли она влияет на SEO
- Разбор факторов ранжирования в «Яндексе» и Google: как им соответствовать, чтобы занять топ
- Что такое интент поискового запроса и как оптимизировать страницу под него
- 9 аналогов Canva: выбираем лучший сервис на замену популярному графическому редактору
Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
- .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
- .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
- .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
У .png поддержка заметно шире
Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.
Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
- 16 на 16 точек
- 32 на 32
- 192 на 192
- 512 на 512
При желании можно использовать несколько вариантов, чтобы адаптировать фавиконку под требования нескольких платформ.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
- Открываем редактор и рисуем иконку.
- Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
- Затем одновременно нажимаем клавиши Shift + Cmd + E.
- После этого нажимаем на кнопку Export Selected…
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.
Преобразуем готовое изображение в фавиконку
Если уже есть рабочий вариант дизайна в неподходящем формате (.jpeg, .gif), можно конвертировать его в .png. Для этого сойдет любой базовый редактор изображений.
- Открываем будущую иконку.
- Меняем размер.
- Указываем нужный размер и формат. Сохраняем.
- Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
- Указываем расширение .png.
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
- Рисуем любую картинку во встроенном редакторе.
- А потом нажимаем на кнопку Download внизу.
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Здесь же есть и конвертер .png в .ico. Можно загрузить в сервис готовый логотип и получить обратно несколько иконок в разных форматах для нужд всех ходовых операционных систем.
Но я попробую скачать иконку с эмоджи:
- Нажимаю на соответствующий конвертер.
- Кликаю по названию понравившегося смайлика.
- А потом жму на кнопку Download.
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Например, я скачал себе .ico с сайта. Затем делаю следующее:
- Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
- Потом открываю index.html и прописываю в head строчку .
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.