Как сделать иконку 16х16 png
Создание favicon для сайта 2020
Что такое favicon и для чего он нужен?
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат 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:
Сам файл будет выглядеть следующим образом:
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
Создавайте иконки онлайн в конструкторе иконок
Графические дизайн-иконки пригодятся для самых разных дизайн-задач. Если вам нужно сделать иконку быстро, просто откройте онлайн-конструктор – там создать ее проще всего. В Crello есть удобный конструктор иконок – в нем можно делать их бесплатно и под свои задачи. Создавать иконки еще никогда не было так просто!
Выберите шаблон Crello для редактирования
Создавайте иконки онлайн в Crello – бесплатном конструкторе иконок для мобильных и десктопов
Выбрать Crello – это как позвать в команду крутого дизайнера иконок. С этого момента забудьте о сложностях в создании иконок – теперь вы можете делать в разы больше крутых логотипов, инфографики и контента для сайтов! Онлайн-конструктор иконок – простое решение, благодаря которому наполнять свою контент-сетку будет по-настоящему просто.
Создавайте иконки бесплатно
Без иконок веб-дизайнеру никуда. Ни одна страница, мобильная платформа или приложение без них не обходится. В Crello вы можете создавать иконки онлайн своими руками – бесплатно и экономя массу времени.
Добавьте надписи
Конечно, можно перенести в дизайн просто иконку – и на этом остановиться. Но есть еще варианты. Например, добавить к иконке надпись. В Crello есть коллекция иконок с текстом – шрифт к ним уже подобран, все максимально гармонично. Забудьте про сложности – просто выберите иконку и впишите свое сообщение.
Море бесплатных графических иконок
Вы можете не только использовать готовые логотипы в шаблонах, но и создавать свои – от иконок для кнопок на сайтах до разделителей для блогов. Хорошо, когда есть разные варианты! Создавайте иконки легко – всего несколькими кликами, используя контент из вкладки «Объекты» в Crello.
Добавьте фон
Любой создатель иконок знает, что подход «чем меньше, тем лучше» – ключ к хорошему графическому дизайну. Иконка – это очень простой объект, и чтобы он заиграл по-новому, достаточно добавить фон. В конструкторе иконок Crello сделать это по-настоящему просто.
Загружайте свой контент
Если не получается найти или создать ту иконку, которая нужна, добавьте свою! В шаблон можно перенести файлы в форматах jpeg, png, img – и очень быстро встроить их в дизайн-композицию, которую вы создали.
Загружайте и делитесь
Когда иконка будет готова, ее можно загружать. В конструкторе Crello иконки можно сохранять в нужных вам форматах – просто выберите любой из списка. Да, создавать иконки в Crello и правда очень просто.
Что важно знать про иконки для графического дизайна
Создавая иконки в онлайн-конструкторе, вы получаете вечный источник крутой графики. Иконки удобно использовать в информерах, премиум-контенте, рекламных баннерах и постах со скидками – а чтобы сделать их, нужен всего один онлайн-конструктор. И еще иконки не требуют перевода – они говорят со всем миром на одном понятном всем языке.
Создаем уникальный Favicon и устанавливаем на сайт
Фавикон (favicon или фавиконка) — это небольшое изображение рядом с названием страницы в поисковой выдаче Яндекса, а также во вкладке сайта.
Так это выглядит в поиске Яндекса:
А так во вкладках браузера:
Зачем нужен фавикон?
Поисковикам наплевать, есть у сайта значок или нет. На повышение или понижение в выдаче это никак не влияет. Но фавикон — символ вашего ресурса. Он больше нужен пользователям. Яркая картинка привлекает внимание, помогает запомнить сайт и отличить его от других.
Кстати, Яндекс.Вебмастер предупреждает об ошибке, если у сайта нет фавиконки. Также ошибка может отобразиться в лог-файлах. Браузеры запрашивают favicon.ico, если не находят нужный файл, сервер фиксирует ошибку 404.
Лог-файл — журнал с системной информацией о работе сервера и действиях пользователей.
Как быстро создать фавикон для сайта
Иконку рекомендуется делать в той же цветовой гамме, что и сам сайт. Тогда страницы будут выглядеть более гармонично. Не забывайте, что иконка должна отражать суть вашего ресурса.
Не рисуйте много деталей. Значок очень маленький (32×32 пикселя), поэтому мелкие нюансы будут совершенно не видны читателям.
Вот удачные примеры фавиконок. Все они контрастные, используют логотип или условный символ, которым обозначают тематику ресурса.
Самостоятельно создать мини-логотип
Открываем любой графический редактор, например, Photoshop и творим. Если на значке будет текст, то размер шрифта следует установить на 8-10 пикселей. У Фотошопа есть специальный плагин для создания значков — «Favicon.ico».
Создать значок с помощью онлайн-сервиса
Заходим в поисковик и пишем запрос «создать Favicon онлайн», выбираем любой из многочисленных сервисов. Ниже представлены одни из самых популярных.
Рисуем фавинкон: Favicon.by
Сразу после перехода на этот онлайн-ресурс попадаем на страницу, где уже есть «заготовка» будущей иконки в нужном размере.
Слева есть палитра цветов, разные кисти и прочие полезности. Рисуем незамысловатые символы, которые отображают суть нашего проекта, и смотрим чуть ниже, как иконка будет выглядеть во вкладке.
Добиваемся отличного результата и нажимаем «Скачать». Файл сохранится в требуемом формате с правильным названием.
Создание фавикон через загрузку изображения: Realfavicongenerator.net
Ключевое отличие данного сервиса: вы можете создать свою фавиконку, загрузив приглянувшуюся картинку или ваш логотип.
Берем готовое изображение 260×260 пикселей. Выбираем нужную степень сжатия и настройки для iOS, Android и MacOS Safari. В результате у вас будут все типы иконок и код для вставки.
Скачать готовый файл фавикон
Этот вариант подойдет тем, у кого совсем нет времени. В этом случае идем на Яндекс.Картинки или любой другой ресурс по поиску изображений и пишем «готовый фавикон».
Жмем «Поиск» и выбираем из тысяч предложенных вариантов. Правда, такой метод лучше использовать только в качестве временного.
Если другой вебмастер скачает такую же картинку, как и вы, то это будет путать читателей. Лучше потратить немного времени и создать уникальную фавиконку.
Также можно скачать значок на специализированных стоках, например:
Какой формат использовать?
Желательные форматы Favicon: ico, png, svg
Устаревающий формат. Зато поддерживается большинством браузеров.
Он включает в себя значки разных размеров. Поэтому браузеры могут подтянуть иконку более низкого разрешения.
Поддерживается всеми браузерами и платформами.
Применяется в Safari MacOS. Файлы мало весят, а отображаются хорошо. Дружно ждем, когда все браузеры начнут поддерживать этот формат.
Допустимые форматы: jpeg и gif
Не все браузеры поддерживают отображение таких значков.
Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.
Продвинутая информация по размерам фавиконов, которая пригодится не всем
Некоторые делают фавикон в нескольких размерах, чтобы он адекватно отображался в десктопных и мобильных браузерах.
Не хотите так заморачиваться? Тогда делайте фавикон 32×32 пикселя. И переходите к следующему разделу.
Вот сводная таблица по рекомендуемым размерам. Источник: ux.pub
Для смартфонов
Для Андроида и Эпла размер иконки зависит от типа и плотности экрана. Вдруг, вам это пригодится в работе.
Как поставить Favicon самостоятельно
Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.
Через тему сайта WordPress
Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.
Придерживайтесь вот такой последовательности:
Как добавить фавикон на сайт WordPress вручную
Советуем сначала протестировать все на локальном сайте разработки.
В файте function.php и прописываем путь до фавикона.
function add_favicon() <
echo ‘’;
>
add_action(‘wp_head’, ‘add_favicon’);
function add_favicon() <
echo ‘’;
>
add_action(‘wp_head’, ‘add_favicon’);
Как вставить фавикон через корневой каталог, если сайт не использует CMS
Для установки фавикона более сложным путем заходим в корневой каталог нашего сайта. Например, при помощи программы FileZilla. Тут нужно найти HTML-код главной страницы сайта.
Лучше предварительно сохранить этот файл на компьютере, на случай, если вы неправильно измените исходный код. Открываем HTML-код и ищем строки, которые располагаются между тегами head. В этом месте нужно вставить строку:
Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.
После него указывается адрес, где иконка расположена, то есть доменное имя, корневая папка и название самого файла. Если домен написан кириллицей, то адрес указывается с использованием Punycode — программы для преобразования кириллических символов, которая также используется при создании мультиязычных сайтов.
Здесь нужно прописать формат файла.
Как задать фавиконы для разных устройств?
Пропишите ссылки на иконки между тегами head. Например:
Для десктопа (ico)
Декстоп (png)
Apple
Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.
Safari
Андроид
Как задать размеры фавиконок?
Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:
Как проверить, установился ли фавикон?
Просто погуглите ваш ресурс. Или проверьте сайт в сервисе Realfavicongenerator.
А еще можно воспользоваться вот таким способом. Только вместо «mysite.ru» укажите название вашего сайта:
Если иконка не отображается, убедитесь что:
Подытожим
А как вы считаете, у каких сайтов самые удачные фавиконки? Делитесь в комментариях!
Как самому сделать фавикон для сайта
Итак, как и обещал в прошлом посте о фавиконах, сегодня расскажу о некоторых несовершенствах автоматических конвертирований логотипа в фавикон через сервисы, и покажу на примере, как порой можно добиться лучшего результата.
Как самостоятельно создать фавикон для сайта
Основные приёмы создания фавикона на основе логотипа я описывал в прошлом посте. Однако такой подход требуется не всегда и не для всех размеров. В некоторых случаях для создания фавикона можно воспользоваться онлайн сервисами.
Например, с моим лого (монограмма LA в кружочке) машина справилась вполне сносно. Даже в размере 16х16 px он выглядит неплохо (а лучше уже не получится).
Как это делается? Я закинул векторный файл в формате svg в сервис Real Favicon Generator, и на его основе машина подготовила мне весь комплект иконок, что на картинке ниже. Правда, пришлось ещё самому добавить 2 не самых популярных размера (64х64 и 128х128 px) в файл ico и сделать дополнительные версии без кружка (они выделены на скриншоте). Последние нужны для плиточных систем в Windows.
Так вот, мне повезло. Если ваш логотип пришлось дорабатывать, чтобы получилась качественная иконка 16х16 px, это не значит, что вы не можете использовать полноценную версию в иконках большего размера.
Теперь чуть подробнее о той самой доработке и для чего она нужна.
В разработке дизайна иконок и других элементов интерфейса есть понятие пиксель-пёрфект (pixel perfect). Это значит, что каждая линия и точка должны быть выровнены по пикселям насколько это возможно, чтобы изображение не замыливалось и не мутнело. В дизайне вообще (как и во многих других сферах) есть негласное правило: если можно сделать лучше — значит, так и надо сделать.
Посмотрите, пожалуйста, на этот рисунок:
Перед вами несколько вариантов, как можно нарисовать синий квадратик в иконке размером 16 на 16 пикселей:
а) квадрат ровно 14х14 пикселей в ширину и в высоту, толщина его стенки ровно 1 пиксель, выровнен по центру иконки;
б) квадрат ровно 14х14 px, толщина его стенки равна 1,5 px, выровнен по центру иконки;
в) квадрат ровно 15х15 px, толщина его стенки — 1 пиксель, смещён вверх и влево от центра иконки;
г) квадрат ровно 15х15 px, толщина стенки равна 1 пикселю, выровнен по центру иконки.
Видите разницу? Если бы наша иконка была намного больше (100, 200 и больше пикселей) и квадратики тоже пропорционально бы выросли, разница между ними была бы минимальна, но в таком малом размере непопадание точно в пиксели может быть значительным и сказаться на чёткости фавикона.
Вернёмся к одному из прошлых примеров:
В этом случае выравнивание шарика по pixel-perfect было бы невозможно и даже ошибочно — он стал бы слишком угловатым и топорным.
Но вот в примере ниже для более чёткого изображение выравнивание по пикселям было необходимо:
Пример создания фавикона из логотипа
А теперь я покажу, чем может быть плохо машинное уменьшение логотипа для создания фавикона без его дополнительного редактирования.
На его основе нужно создать фавикон.
Загружаем его в сервис Real Favicon Generator, нажимаем кнопку, получаем кучу файлов в нужных форматах и размерах. Смотрим на фавиконы маленьких размеров (16, 32 и 48 пикселей) и немножко расстраиваемся:
В первом размере даже “ЕЛЗ” читается с трудом, не говоря уже о “FOREST”. В других ситуация получше, но всё равно всё размыто. Другие размеры получились нормально.
Работаем руками и головой в графическом редакторе с этими тремя размерами и получаем:
Всё дело в том, что изначальный логотип не попадал чётко в пиксельную сетку, поэтому пришлось его редактировать. Да, в двух самых малых размера фавикон лишился подписи “FOREST”, но зачем она, если всё равно её никто не сможет прочитать?
Вот, как бы выглядели все эти иконки, будь они одного размера (для наглядности добавлена пиксельная сетка):
Верхние иконки — просто уменьшенные версии логотипа. Как видно, мало какие линии проходят по границам пикселей, от чего в малом размере и появляется “замыленность”.
В общем, мой вам совет: для экономии времени и средств загрузите ваш лого (или какую-то его часть, хорошо вписывающуюся в квадрат) в сервис Real Favicon Generator и скачайте то, что он вам предложит. Если результат вас устроит, поздравляю — фавикон для сайта готов! При этом желательно, чтобы ваш лого был или в векторном формате svg или в png большого размера (хотя бы 512х512px). С последним результат хуже, но незначительно.
Если фавиконки маленьких размеров окажутся недостаточно качественными, мутными и размытыми, придётся доработать их в ручную. Вы можете сделать это сами в графических редакторах (Photoshop, Illustrator или их бесплатных аналогах Gimp и Inkscape), следуя советам из данной статьи, или обратиться к дизайнеру за доработкой фавикона.
Другие онлайн сервисы по подготовки фавиконов для сайта я не советую, так как вышеупомянутый всё равно самый лучший, и минусов у него практически нет. Но для создания чёткой иконки 16х16 px, можете воспользоваться сервисом favicon.cc — в этом плане он весьма хорош и полезен, но больше ни на что не годится.
Если остались какие-то вопросы по созданию фавиконов, пишите, буду рад помочь)