Как сделать фавикон с прозрачным фоном

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера .

Пример отображения фавиконки в результатах поиска:

Рекомендации по формату и размеру фавиконки

Размер: 120 × 120, 32 × 32 или 16 × 16 пикселей.

Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Совет. Размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.

Как фавиконка может отображаться на сервисах Яндекса

Для отображения может использоваться любая фавиконка, если она доступна для робота и отвечает требованиям сервиса, на котором должна быть показана. Так, если на сайте фавиконка разных размеров или форматов, сервисы Яндекса могут использовать любую из них.

Для отображения в результатах поиска и рекламных кампаниях робот может скачать фавиконку в том числе из тега apple-touch-icon. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.

Как изменить или удалить фавиконку

Чтобы фавиконка изменилась в результатах поиска, обновите фавиконку на сайте. Чтобы удалить фавиконку из поиска, удалите файл с сайта. Изменения вступят в силу в течение двух недель после очередного посещения сайта роботом.

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

Фавиконка не появляется для моего сайта У сайта пропала фавиконка В поиске отображается некорректная или старая фавиконка Теоретический вопрос про индексирование фавиконок

Если все требования по размещению фавиконки выполнены, то для индексирования и появления ее в результатах поиска необходимо около двух недель.

Фавиконка может пропасть из поиска, если в случае последнего обновления, она не попала в базу. Такая ситуация возможна, если в момент обхода специальным роботом фавиконка, сайт или его хостинг были недоступны.

Также, проверьте, правильно ли размещена фавиконка. Если она прописана корректно, дождитесь следующего обновления базы фавиконок, это занимает около двух недель.

Такая ситуация возникает, если:

Сайт временно недоступен. В таком случае может скачаться фавиконка хостинга со страницы-заглушки сайта.

Если эти причины устранены и выполнены рекомендации по размещению фавиконки, то после обхода роботом изменения появятся в результатах поиска в течение двух недель.

Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон - это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в "Избранное".

Фавиконы

Фавиконы самых популярных сайтов

Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.

Видеоверсия:
[iframe align="center" mode="normal" autoplay="no" maxwidth="1280"]

Каким должен быть фавикон

Прежде чем приступать к созданию самого фавикона, было бы неплохо остановиться на том, какими они должны быть в идеале. Итак, идеальный фавикон:

  • Является четким и понятным
  • Сделан в хорошем качестве
  • Передает смысл вашего сайта
  • Имеет общую стилистику с вашим сайтом
  • Выделяется на фоне значков других сайтов

Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 2-х букв. Иначе, никто не сможет разобрать подобный текст, ведь размеры фавикона в основном составляют 16*16 пикселей.

Каких размеров бывают значки сайтов

Как Вы знаете, сейчас существует огромное множество браузеров, мониторов и устройств. И их требования к размерам фавиконов отличаются. Существуют следующие варианты размеров, которые следует учесть:

  • 16*16px - стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
  • 32*32px - используются в некоторых случаях в Internet Explorer и Safari
  • 57*57px - используются при отображении на iPhone
  • 72*72px - используются при отображении на iPad
  • 114*114px - используются при отображении на ретина дисплеях (57*2=114)
  • 144*144px - используются при отображении на ретина дисплеях iPad (72*2=144)

Какого формата должны быть фавиконы

Раньше браузеры воспринимали фавиконы только в формате "ico". Сейчас они научились понимать и другие форматы, в том числе и "png". В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате "png", а затем сконвертируем его в "ico".

Несколько способов создания фавиконов

На сегодня существует два основных способа создания фавиконов:

  1. Через специальные онлайн сервисы
  2. Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator

Каждый способ имеет свои особенности. Преимущество создания фавикона через онлайн сервисы состоит в том, что Вам не нужно для этого обладать какими-то специальными навыками. Вы просто загружаете необходимое изображение, дорабатываете его и скачиваете готовый фавикон. Либо просто работаете с текстом и рисуете значок инструментами онлайн сервиса. В общем, главный плюс данного метода заключается в простоте. Однако, обратная сторона медали заключается в том, что качество таких значков для сайтов оставляет желать лучшего. Уникальный фавикон вы не получите по той простой причине, что галерея значков онлайн сервисов не является безграничной. А при использовании собственных изображений, при помощи инструментов сервиса не так-то просто создать качественный продукт. В случае рисования значка вручную через инструменты онлайн сервиса получается "нечто невообразимое".

Поэтому, мы выбираем второе, более сложное но удачное решение. Для создания фавикона мы воспользуемся программой Photoshop. Если вы не имеете опыта работы с этой программой, то ничего страшного. Следуя моим инструкциям вы легко справитесь с поставленной задачей.

Создаем фавикон

Как я уже упоминал, фавикон можно создать при помощи изображения или просто букв. В нашем случае я буду использовать какую-нибудь картинку. Например, давайте представим что у нас сайт автомобильной тематики. Следовательно, нам нужно найти изображение из области авто. Я предлагаю сделать значок нашего сайта в виде колеса.

Подбираем изображение

Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки. Главное условие - чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.

Я нахожу подходящее изображение при помощи поиска google по запросу "колесо". Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию "Сохранить картинку как".

колесо google images

Подходящее изображение в google images

Далее, мы открываем это изображение при помощи Photoshop. Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент "Волшебная палочка". Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.

удаление фона фотошоп

Удаляем фон нашего колеса

Делаем это со всеми частями фона изображения. Таким образом, на нашей картинке колесо находится на прозрачном фоне, что и требовалось сделать. Итак, заготовка для значка нашего сайта готова.

Колесо на прозрачном фоне

Колесо на прозрачном фоне

Создаем фавикон в 2-х разных размерах

Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N. В появившемся окне мы выбираем высоту и ширину изображения в 64px.

Задаем размеры в фотошопе

Задаем размеры будущего фавикона

Далее, нам необходимо перенести наше колесо в область только что созданного изображения. Для этого мы возвращаемся на картинку с колесом и выбираем инструмент "Перемещение". Следующим шагом мы кликаем по изображению колеса и при зажатой левой кнопке мыши перемещаем ее в область нового изображения. Убедитесь, чтобы при перемещении был выделен слой с колесом. В противном случае перенос не удастся.

Перемещение в фотошопе

Переносим колесо в новое изображение

После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию "Сохранить для веб" во вкладке "Файл". Мы выбираем формат PNG-24 и папку images. Сам фавикон называем также, только латинскими буквами - "favicon".

Сохранение в фотошопе

Сохраняем фавикон

Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке "Изображение" и выбираем функцию "Размер изображения". Здесь мы задаем ширину и высоту в 16px. Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать "favicon-2".

Итак, вот мы и создали 2 фавикона для нашего сайта в формате "png". Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.

Устанавливаем фавикон на сайт

Для установки фавикона на сайт внутри тега мы прописываем:

В случае, если у нас фавикон в формате "ico" то мы вместо "png" прописываем "ico". Например:

Далее, сохраняем прогресс и проверяем результат. После открытия нашей веб-страницы мы видим появление фавикона.

Отображение фавикона в браузере

Отображение фавикона в браузере

Как видите, значок сайта отображается как мы и задумывали.

Конвертируем значок для сайта в формат "ico"

Современные браузеры без проблем могут распознавать и отображать фавиконы в формате "png". Однако, у Вас может возникнуть необходимость конвертировать ее в формат "ico". Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом - xiconeditor.com. Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке "Import".

2. Далее, мы выбираем загружаемые файлы кликнув по кнопке "Upload". Следующим шагом убираем галочки с ненужных размеров (32 и 24px) и нажимаем "Ok".

Выбор загружаемых файлов

Выбор загружаемых файлов

3. При желании можно кликнуть на кнопку "Preview" и посмотреть как они будут отображаться. Для скачивания наших фавиконов в формате "ico" мы кликаем по кнопке "Export".

Итак, вот мы и научились создавать фавиконы в "png" и конвертировать их в формат "ico". Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. [popup_trigger tag="span"] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Сегодня favicon – это возможность для бренда сайта выйти за пределы окна браузера и стать заметным и узнаваемым в разных контекстах пользовательского опыта. Визуальный значок ресурса позволяет выделиться среди конкурентов на странице поисковой выдачи. Его видно во вкладке браузера, в сниппетах результатов поиска, в закладках и на экране мобильного телефона. Он привлекает внимание и запоминается пользователям. Подробности рассказываем в нашей статье.

Что такое фавикон и каких форматов он бывает

Какие требования предъявляют разные платформы

С помощью каких инструментов можно создать иконку

Можно ли не создавать фавикон и как это повлияет на выдачу

Что такое фавикон

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.


Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .jpg и .svg. Формат .svg используется в Safari MacOS, а .jpg - в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpg и .jpg, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

image2.jpg

image4.jpg

Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.

Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.

Фавиконки отображаются на пустой стартовой странице Google



Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .jpg не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .jpg форматов фавиконок. Размеры иконок: 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 пикселей в формате .jpg. Назовите файлы соответственно android-icon-192x192.jpg или android-chrome-512x512.jpg.

Так выглядят фавиконы в мобильной версии браузера Google Chrome


Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .jpg. Назовите файлы соответственно android-icon-192x192.jpg или android-chrome-512x512.jpg.

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .jpg размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге таким образом:

Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение


Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .jpg размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .jpg и в высоком разрешении.

Размеры фавиконов для разных экранов устройств 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 . В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.

image3.jpg

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

image1.jpg

Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.jpg и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.

Также лучше не брать иконки из открытых источников. Они неуникальные и если их скачает кто-то еще, ваш сайт не будет отличаться. Если же вы случайно установите в качестве фавикона для сайта логотип чужой компании, к вам могут возникнуть юридические претензии. Лучше создать свою уникальную иконку самостоятельно или закажите создание фавикона у профильного специалиста.

Как установить

Задайте правильное имя – favicon .ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.

Пропишите адрес в коде на главной странице в теге . Требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в коде. С помощью можно задавать для разных страниц сайта собственные иконки.

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple - touch - icon - precomposed вместо apple - touch - icon .

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Фавикон - значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

phpZsGgAI

Вы можете загрузить свой фавикон или самостоятельно создавать фавиконы для своего сайта с помощью нашего конструктора (доступен только для сайтов в национальной зоне РФ).

Рассмотрим, как им пользоваться.

Шаг 1

Выберите в меню "Настройки" пункт "Фавикон".

215800641_8111_5f0d669a9f1b1.jpg

Шаг 2

Затем нажмите на кнопку "Создать фавикон".

php7TzQMX

Шаг 3

В открывшемся окне вы можете выбрать один из располагающихся внизу экрана готовых примеров и создать свой фавикон на основе него.

phpWIYB2N

Или же создать новый, нажав на соответствующую кнопку. Все изменения, вносимые в фавикон, вы сможете наблюдать на экране справа от настроек.

php15F9GP

Шаг 4. Фон

Сперва выберите фон фавикона - для этого в блоке настроек "Фон" нажмите на кнопку "Выбрать" и в раскрывшемся списке выберите подходящий вариант.

phpUoBrne

Шаг 4.1. Цвет фона

Далее вам будет необходимо подобрать цвет для фона фавикона. Сперва раскройте список настройки цветов и выберите: "1 цвет", "2 цвета" или "Без заливки".

phpDx8vDN

  • При выборе пункта "1 цвет" - вам будет необходимо нажать на кружок справа от списка и в раскрывшейся палитре выбрать нужный цвет (или указать его код в соответствующем поле палитры).

phpRdB5PW

  • При выборе пункта "2 цвета" - вы сможете аналогичным образом указать два цвета, а также, нажав на иконку "угол", задать угол градиента (направление перехода от одного цвета к другому).

phphX43Pq

  • При выборе пункта "Без заливки" фон фавикона будет отображаться бесцветным (белым) и дополнительные настройки не будут доступны.

Шаг 4.2. Рамка фона

Также вы можете включить рамку для фавикона (активировав соответствующую галочку) и выбрать из палитры справа цвет рамки.

phpl8icpP

Шаг 5. Картинка

Далее - подберите картинку, которая будет отображаться в фавиконе (внутри выбранного вами выше фона). Для этого в блоке настроек "Картинка":

  • Нажмите "Выбрать",
  • В раскрывшемся списке в верхнем ряду выберите категорию изображений (они разбиты по тематикам, при выборе той или иной категории - наборы иконок будут изменяться),
  • После выбора категории - нажмите на нужную вам иконку из набора.

phpKcarsj

Шаг 5.1. Цвет картинки

По аналогии с "Фоном" задайте для выбранной картинки цвет, сперва выбрав режим ("1 цвет", "2 цвета" или "Без заливки") из соответствующего списка.

phpoo1Jh0

  • Для пункта "1 цвет" - выберите цвет (или укажите код) в палитре.

phpdmj0PX

  • Для пункта "2 цвета" - выберите два цвета и угол перехода между ними.

php1ICagz

  • Для пункта "Без заливки" никаких дополнительных настроек не потребуется.

Шаг 5.2. Рамка картинки

Для картинки вы также можете включить "Рамку" и выбрать цвет для нее.

php7opUao

Шаг 5.3. Тень картинки

При необходимости включите тень для картинки. Для этого отметьте соответствующую галочку.

php9SuNDM

Шаг 5.4. Поворот, размер и расположение картинки

Чтобы повернуть картинку вокруг своей оси под определенным углом - воспользуйтесь кнопками поворота вправо или влево.

phpzGPf2W

Чтобы увеличить или уменьшить картинку - воспользуйтесь кнопками "+" и "-".

phpGVvWT3

Вы также можете вручную перетаскивать изображение прямо на экране предпросмотра. Для этого просто наведите курсор на картинку, зажмите левую кнопку мыши и перетащите в нужное вам место фавикона.

Чтобы сбросить все изменения (поворот, размер, расположение), нажмите на крестик.

phphrXlMj

Шаг 6. Надпись

Теперь укажите текст для фавикона - он будет выводиться поверх выбранной выше картинки. В блоке настроек "Надпись" введите до 4-х символов в соответствующее поле.

phpG3AaYW

Шаг 6.1. Формат надписи

Вы можете изменить шрифт текста, а также выделить его полужирным или курсивом.

phpj9JJj5

Шаг 6.2. Расположение надписи

Отредактируйте положение надписи внутри фавикона с помощью кнопок-стрелок (кнопка с точкой - выравнивает текст по центру).

phpIPJVpz

Обратите внимание!

  • Вы также можете вручную перетаскивать текст прямо на экране предпросмотра. Для этого просто наведите курсор на надпись, зажмите левую кнопку мыши и перетащите текст в нужное вам место фавикона.

Шаг 6.3. Цвет надписи

Задайте цвет надписи, сперва выбрав режим - "1 цвет", "2 цвета", "Без заливки".

phpg3xWr6

  • Для пункта "1 цвет" - выберите цвет или укажите код цвета в палитре справа от списка выбора.

phprJkkG2

  • Для пункта "2 цвета" - укажите два цвета и градус перехода между ними.

phpvqhVFK

  • Для пункта "Без заливки" не потребуется никаких дополнительных настроек.

Шаг 6.4. Рамка надписи

При необходимости вы можете включить для текста рамку и указать цвет рамки.

phpk7GTsq

Шаг 6.5. Тень надписи

Также вы можете включить тень для надписи, активировав соответствующую галочку.

phpjkoQXe

Шаг 6.6. Поворот и размер надписи

Чтобы повернуть надпись вокруг своей оси под определенным углом - воспользуйтесь кнопками поворота вправо или влево.

phpRcRW1G

Чтобы увеличить или уменьшить размер надписи - воспользуйтесь кнопками "+" и "-".

php4d46tW

Чтобы сбросить все изменения (поворот, размер, а также расположение, заданное в шаге 6.2), нажмите на крестик.

phpT8tMv5

Шаг 7

При необходимости вы можете скрыть любой из слоев (фон, картинку или надпись). Для этого просто отключите его в списке слоев. Чтобы отобразить слой - переведите настройку в активное состояние.

phpBIpAdh

Шаг 8

После внесения всех необходимых изменений - нажмите "Сохранить". Созданный вами фавикон будет сохранен в списке готовых примеров.

php09vCx9

Шаг 9

Если же вы хотите разместить созданный вами фавикон у себя на сайте - нажмите на кнопку размещения.

phpNufTgC

Откроется окно размещения фавикона, нажмите на кнопку "Перейти к оплате" (услуга размещения фавикона осуществляется на платной основе), произведите оплату. После успешной оплаты фавикон сразу отобразится на сайте.

phpvmvogK

Как скачать фавикон

  • После создания и оплаты фавикона вы сможете скачать его в формате SVG с помощью соответствующей кнопки в карточке фавикона.

Мы занимаемся разработкой веб-сайтов для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.

Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.

Читайте также: