Нарисовать фавикон: Нарисовать Favicon онлайн — katvin.com

Как Сделать Фавикон — Что Можно И Чего Нельзя Делать

Эта крохотная деталь выделит ваш бизнес в глазах клиентов. Не стоит забывать о скромном фавиконе, когда вы создаёте свой бренд.

Создание фавикона требует минимальных усилий.

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

Итак, что такое фавикон?

Фавиконы — это маленькие значки, которые отображаются на вкладках и в списках избранного или закладок в таких браузерах, как Chrome, Mozilla и Safari.

Слово «фавикон» — это сокращённая версия «избранного значка», но у него есть и другие названия:

• Значок ярлыка
• Значок сайта
• Значок закладки

Однако все они означают одно и то же.

Появившись на свет ещё в 1999 году, фавиконы были представлены пользователям Интернета с запуском Internet Explorer 5.

В качестве фавикона компании обычно используют мини-версию своего логотипа, уменьшенного до размера 16 × 16 пикселей.

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

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

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

Конечно, рядом с каждым фавиконом есть мета-заголовки, которые вы можете прочитать. Но у кого есть время, чтобы постоянно это делать?

Как сделать фавикон

Теперь, когда вы знаете, что такое фавикон, вы, вероятно, захотите разместить его на своём сайте.

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

Если вы хотите узнать, как сделать фавикон, — то в этом нет ничего сложного.

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

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

1. Создайте изображение

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

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

• Оно соответствует вашему бренду. Используйте те же цвета, типографику и формы.
• Оно выделяется. Ваши клиенты должны легко запоминать изображение.
• Оно не похоже на другие фавиконы или изображения. Вас не должны путать с другими брендами.

Вы можете создать изображение для фавикона с помощью редактора, например Photoshop, или программного обеспечения с открытым исходным кодом, например Canva. Если позволяет бюджет, вы можете даже нанять профессионального дизайнера.

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

Убедитесь, что вы не нарушаете эти негласные правила фавиконов:

• Никаких фото. Ни одна фотография не будет достаточно чёткой в том размере, который поместится на вкладке браузера.
• Никаких слов. Конечно, вы можете использовать одну, две или даже три буквы в своем фавиконе, особенно если это часть вашего логотипа. Но отдельные слова? Забудьте об этом.
• Никаких маркетинговых уловок. Хотя фавикон отлично подходит для брендинга и дополняет общую картинку, он не является местом для рекламных инструментов, таких как «новые» или «распродажные» баннеры.

Используйте правильный размер

Хотя вкладки браузера отображают фавиконы размером 16 × 16 пикселей, они могут отображаться на сайте с разрешением до 32 × 32 или даже 64 × 64 пикселей.

Убедитесь, что ваш фавикон будет идеально выглядеть на любом сайте, а также создайте его в более крупном формате. Его всегда можно будет уменьшить до 16 × 16 пикселей.

Используйте правильный формат

Хотя раньше фавиконы приходилось сохранять как . ico файлы, теперь .png формат тоже принимается. Вы также можете использовать такие инструменты, как например, faviconer.com, для преобразования файлов в формат .ico.

Однако, если вы хотите, чтобы ваш фавикон отображался как значок закреплённой вкладки Safari, вам необходимо сохранить его как файл .svg.

Используйте правильный стиль

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

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

2. Загрузите изображение на свой сайт

Как только у вас появится готовый значок, следующий шаг будет относительно легким.

Просто переименуйте файл изображения .png или .ico в «favicon» и загрузите файл в корневой каталог своего сайта.

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

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

3. Добавьте базовый HTML-код

Скорее всего, вам не понадобится добавлять какой-либо код, чтобы современные браузеры могли найти ваш фавикон. Большинство из них автоматически обнаруживают favicon.png или favicon.ico и устанавливают его в качестве вашего фавикона.

Тем не менее, стоит добавить базовый код, чтобы значок был виден в любом браузере.

Вы можете создать HTML-код «link rel= shortcut icon», открыв файл header.php и набрав его ниже или после тега:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

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

4. Сделайте фавикон универсальным

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

Хотя не у всех в мире есть устройства Apple, вам нужно будет создать Apple Touch значок, если вы хотите, чтобы ваш фавикон работал правильно для этих пользователей.

Значки Apple Touch представляют собой сайты, которые были сохранены на главном экране телефона или планшета Apple.

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

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

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

Наконец, стоит добавить на свой сайт отдельный HTML-код для значков Apple Touch. Кодировка будет выглядеть примерно так:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Как сделать фавикон еще проще

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

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

Войдите в конструктор сайтов.

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

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

Итак, давайте рассмотрим шаги по созданию и загрузке фавикона на ваш сайт с помощью инструмента-генератора, на примере Zyro.

1. Выберите шаблон

Вы можете выбрать один из предустановленных шаблонов Zyro или загрузить собственное изображение.

2. Настройте до идеала

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

3. Сохраните и действуйте

Готово — пора загрузить фавикон в виде файла .png или .ico и опубликовать его на своём сайте.

Когда придёт время загрузки созданного вами фавикона на ваш сайт Zyro, вам не придётся писать код или конвертировать. Нужно всего несколько кликов.

Просто зайдите в редактор Zyro. Если у вас несколько веб-сайтов, выберите тот, на который хотите загрузить фавикон.

Выберите Общие настройки в выпадающем меню настроек, найдите значок Фавикон и разверните доступные вам параметры.

Перейдите в Обзор файлов, чтобы найти изображение фавикона, созданное с помощью инструмента Zyro, и дважды щёлкните по нему, чтобы загрузить.

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

Если вас это устраивает, нажмите Сохранить изменения, и ваш фавикон будет загружен.

Теперь вы знаете как сделать фавикон!

Руководство по созданию Favicon для всех платформ в 2019 году

Добро пожаловать в руководство по проектированию favicon. В этой статье мы подробно расскажем, как создать идеальный favicon, с конкретными советами по созданию иконок для Apple Touch, Windows 8, Android, Chrome, Opera и Safari. Также вы найдете удобное руководство по различным размерам и форматам favicon.

Итак, во-первых, что такое favicon? Сокращенно от англ. FAVorite ICON — «иконка для избранного» – это маленькие символы, которые появляются в строке URL и списке закладок. Сегодня favicon расширяет бренд сайта за пределы окна браузера во многих контекстах, но мы вернемся к этому позже.

На заре Интернета, создание favicon заключалось в прикреплении ссылки на файл иконки размером 16x16px, и на этом все. В настоящее время все немного сложнее – существуют разные размеры и процессы для разных контекстов. Создание правильного favicon – это наука.

В этой статье вы узнаете, как создать favicon. Мы начнем с советов о том, как он должен выглядеть, а затем перейдем к конкретным советам о том, как создать favicon для различных контекстов.

Мы будем использовать шаблон Apply Pixels, чтобы легко генерировать различные требуемые размеры иконок, а в качестве примера – иконку Apply Pixels.

Логотип Apply Pixels, который используется в качестве примера favicon в этой статье

1. Сделайте его узнаваемым

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

2. Используйте свой логотип

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

3. Он должен быть понятным

Есть также несколько моментов, которые вы должны избегать. Не используйте favicon в качестве маркетингового инструмента – это означает отсутствие ценников, баннеров «new» или «updated» и т. д. На самом деле, вообще не помещайте текст в favicon. Текст плохо масштабируется, и высока вероятность, что он будет неразборчивым. Наконец, не используйте фотографию – она ​​будет размытой и неузнаваемой в таком мелком размере.

4. Создайте две версии

Когда в Internet Explorer 5 впервые появились favicon, они появились в строке URL-адреса и в списке закладок. Сегодня они также отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Из-за этого довольно трудно прогнозировать, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваш favicon выглядел хорошо в различных контекстах, вы должны предоставить его в двух стилях:

• Логотип на прозрачном фоне. Эта версия отображается в строке URL-адреса, списках закладок и в других местах, где favicon отображается рядом с URL-адресом или именем вашего веб-сайта.
• Логотип на фоне со сплошной заливкой: эта версия используется в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, для достижения единообразного контекста.

5. Создание favicon для десктопного браузера

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

Favicon в классическом стиле отображается на панели закладок и в строке URL в Google Chrome

Вам нужно будет предоставить этот тип иконки в трех размерах, все в формате PNG с прозрачным фоном:

• 16×16
• 32×32
• 48×48

Добавьте этот favicon в HTML

, как показано ниже:

6.

Создание иконки Apple Touch

Apple iOS использует иконки Apple Touch для представления веб-сайтов, сохраненных на домашнем экране iOS, в качестве закладок. Это означает, что иконка Apple Touch, как все иконки приложений iOS, будет округлена c помощью маски в форме суперэллипса, называемого сквиркл (squircle).

Он также будет отображаться на любом фоне, который пользователь

выбрал для своего домашнего экрана. Поэтому ваша иконка Apple Touch должна иметь сплошную заливку фона.

Вы можете использовать иконку Apple Touch 180×180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев. Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple

Favicon Apple должна быть в формате PNG. Вы можете использовать иконку Apple Touch 180x180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180 (Обязательно)

Добавьте этот favicon в HTML

, как показано ниже:

7. Плитка Windows 8 и файл browserconfiguration.xml

Хотя Windows 8 больше не поддерживается Microsoft, многие пользователи планшетов продолжают работать на этой ОС. В зависимости от вашей пользовательской базы, вы можете также создать favicon для этой платформы.

Вот как могла бы выглядеть favicon Apply Pixels, в качестве плиток Windows 8:

Плитка Windows 558×270 является единственным не квадратным favicon.

Windows 8 использует плитки для представления веб-сайтов в пользовательском интерфейсе. Всего поддерживается пять размеров, один размер для Windows 8.0 и четыре размера для Windows 8. 1.

Плитка Windows 8 состоит из двух компонентов:

• Передний план: ваш favicon с прозрачным фоном.
• Фон: фон плитки, сгенерированный Windows.

Все плитки Windows должны быть в формате PNG с прозрачным фоном. Это размеры, которые вам нужно использовать.

Для Windows 8:

• 144×144

И для Windows 8.1:

• 128×128
• 270×270
• 558×270
• 558×558

Windows 8.0

Цвет фона указывается в HTML-тегах и файле browserconfig.xml, которые необходимо предоставить:

Windows 8.1

Включает browserconfiguration.xml в корневой каталог вашего сайта:

<?xml version=»1.0″ encoding=»utf-8″?>

#2b5797

Примечание: Указанные размеры favicon в файле browserconfiguration. xml не соответствуют размерам, указанным выше. Это связано с тем, что в целях масштабирования Microsoft рекомендует предоставлять изображения, размер которых превышает стандартные размеры плитки.

8. Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google.

С момента появления в Android адаптивных иконок к иконкам веб-сайтов, добавленных на домашний экран Android, будет применена маска 192×192. Поэтому иконка приобретает форму предпочитаемого пользователем стиля маскирования. Это может быть сквиркл, эллипс, прямоугольник, прямоугольник с закругленными углами или каплевидная фигура.

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

Вам необходимо создать favicon в формате PNG со сплошным фоном следующих размеров:

• 192×192
• 512×512

Установите эти иконки, добавив файл site. webmanifest на свой сайт и разместив ссылку на него в тегах

:

Ниже приведен код для файла site.webmanifest:

{
«name»: «»,
«short_name»: «»,
«icons»: [
{
«src»: «/android-chrome-192×192.png»,
«sizes»: «192×192»,
«type»: «image/png»
},
{
«src»: «/android-chrome-512×512.png»,
«sizes»: «512×512»,
«type»: «image/png»
}
],
«theme_color»: «#ffffff»,
«background_color»: «#ffffff»,
«display»: «standalone»
}

9. Закрепленная вкладка Safari

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

В отличие от остальных favicon, этот создается из изображения в формате SVG

Эта иконка должна быть 100% черным SVG-файлом с прозрачным фоном. SVG может быть только одним слоем, и Safari требует, чтобы атрибут viewBox для SVG был установлен в «0 0 16 16».

Добавьте этот favicon в HTML

, как показано ниже:

10. Как насчет Google TV, Chrome Web Store и иконок Apple Touch для версий предшествовавших iOS 7?

А что насчет Google TV, Chrome Web Store и иконок Apple Touch для версий, предшествовавших iOS 7? Существует ряд размеров и форматы favicon, которые не были включены в эту статью, либо потому, что они практически устарели, либо потому, что они редко актуальны для обычного веб-разработчика. В общем, разработчики и дизайнеры должны стремиться поддерживать как можно более широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла.

Например: Google TV был заменен на Android TV в 2014 году, а SDK был вовсе упразднен. Chrome Web Store, вероятно, имеет значение только в том случае, если вы создаете приложение, расширение или тему Chrome, а процент устройств iOS работающих под управлением iOS 7 или более ранней версии сейчас менее, чем ~1 %.

Шпаргалка

Итак, если вы хотите поддерживать полный набор устройств и браузеров, в таблице ниже указаны соответствующие размеры. Ранее favicon должен был быть предоставлен в формате ICO. Сегодня можно использовать файлы в формате PNG (за исключением иконки закрепленной вкладки Safari, которая должна быть представлена в формате SVG).

Если хотите узнать простой способ проектирования и экспорта всех размеров favicon, взгляните на наш шаблон.

Размеры

Фон

Формат

Классические десктопные браузеры

16×16

Прозрачный

PNG

32×32

Прозрачный

PNG

48×48

Прозрачный

PNG

Apple iOS

180×180

Сплошная заливка

PNG

Windows 8.0

144×144

Прозрачный

PNG

Windows 8.1

128×128

Прозрачный

PNG

270×270

Прозрачный

PNG

558×270

Прозрачный

PNG

558×558

Прозрачный

PNG

Google Android и Chrome

192×192

Сплошная заливка

PNG

512×512

Сплошная заливка

PNG

Opera Coast

228×228

Сплошная заливка

PNG

Safari Pinned Tab

Vector

Прозрачный

SVG

---

Перевод статьи applypixels. com

Что такое фавикон сайта (favicon), зачем нужен и как сделать

---

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

Вы знаете, что вам нужен фавикон, но не уверены, что это такое? Или, может быть, прекрасно осведомлены, что такое фавикон и зачем он нужен, но не в курсе, как и каким его сделать?

А что, если вы даже не уверены, что оно вам надо, но вроде “так говорят”, и вроде “у всех есть”?..

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

Содержание статьи:

• Что такое фавикон
• Зачем нужен фавикон
• Каким должен быть фавикон
  • Визуальная составляющая
  • Технические требования
• Как сделать фавикон для сайта
  • Пример создания фавикона из логотипа

---

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

Начнём, конечно, с азов. Если вы знаете, что такое фавикон (favicon, фавиконка, favicon-ка (да, и такое написание встречается)), смело пропускайте этот раздел.

В марте 2020 года фавикону исполняется 21 год, он становится совсем взрослым… Впервые он появился в 1999-м году вместе с выпуском пятой версии известного (и на тот момент самого популярного) браузера Internet Explorer.

Само слово #favicon — это сокращение от “favorite icon”, что значит “иконка избранного”. Исторически такое название вполне оправдано, так как изначально фавикон сайта показывался только при добавлении этого сайта в “избранное” пользователя. Сейчас же фавикон отображается на вкладке любого сайта (при его наличии) почти во всех современных браузерах, и даже в поисковой выдаче, например, в Яндексе и  с недавнего времени в Гугле. Это хоть и основные, но далеко не единственные места обитания современных фавиконов!

Они везде:

---

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

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

Но перейдем к следующим разделам, а то уже обо всём по чуть-чуть рассказал…

---

Зачем нужен фавикон?

---

Фавикон повышает узнаваемость сайта и бренда

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

По хорошему фавикону сразу становится ясно, что за сайт за ним скрывается (конечно, если вы уже знакомы этим с сайтом).

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

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

---

Увеличивает кликабельность

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

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

Посмотрите на эти примеры:

Во втором случае кому-то может показаться, что информация с сайта 2GIS — это продолжение “пункта” о Яндекс.Еде.

Я честно пытался найти реальный пример, чтобы в выдаче поисковика у сайта не было фавикона, но пролистав по 15 страниц по нескольким запросам, так ничего и не нашёл. Это ещё раз подтверждает необходимость наличия фавикона.

---

Вызывает доверие

Сайт с фавиконом вызывает доверие пользователя, так как сайт выглядит более закончено и профессионально, нежели веб ресурс с «пустым листом» или стандартным фавиконом той CMS, на которой сделан сайт.

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

---

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

Правильный фавикон должен:

1. Быть хорошо различимым в малом размере.
2. Соответствовать фирменному стилю компании.
3. Отвечать современным техническим требованиям: размеры и форматы файлов.

Чуть подробнее об этих правилах.

---

Визуальная составляющая фавикона

Как я уже говорил, фавикон можно считать особой версией логотипа. Особая она потому, что должна быть хорошо различима в очень маленьком размере — 16х16 px.

Возможно, вы где-то слышали, что “любой хороший логотип должен одинаково хорошо смотреться и в очень большом и в очень малом размере”.

Но, во-первых, это не всегда так, а, во-вторых, 16 пикселей — это просто крайне малый размер. И иконка сайта — это буквально единственное место, где вам потребуется логотип такого размера.

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

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

1. Взять из основной версии логотипа только какой-то фрагмент:

Желательно, чтобы этот фрагмент был наиболее узнаваемым.

2. Значительно упростить графический знак логотипа:

Мелкие детали могут “замусорить” фавикон.

3. Изменить пропорции элементов знака:

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

 

4. Сделать совсем новый значок:

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

---

Технические требования к современным фавиконам

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

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

Формат ico морально устарел. Его главным преимуществом перед другими форматами (например, тем же png) было в том, что один файл содержал несколько иконок разных размеров (на все случаи жизни). Но браузеры уже давно научились брать иконку нужного размера из разных файлов.

Как это ни банально прозвучит: чем больше различных иконок содержит в себе файл ico, тем больше он “весит”, а это тормозит работу вашего сайта.

В современных реалиях качественный фавикон — это отдельные файлы:

• разных размеров (от 16х16 до 512х512 px),
• разных форматов (png, svg, ico),

подходящие под все браузеры (Chrome, Firefox, Safari, Internet Explorer и др.) и операционные системы (Android, iOS, Windows, MacOS).

Поэтому так важно создать файлы для каждого конкретного случая, а не загружать на сайт одну иконку размера 16х16 формата png и надеяться на лучшее

Более того некоторые системы, например, браузер Safari, не поддерживает формат ico, и для отображения фавиконов ему нужен векторный формат svg.

Но и ico пока что не стоит списывать со счетов — есть работа специально для него. Устаревшие браузеры, например, Internet Explorer версии 10 и ниже (а ими всё ещё пользуется большая часть населения) поддерживает только этот формат. Также ico-файл пригодится для того, чтобы у сайта была персональная иконка в Windows при сохранении его на рабочий стол или в панель задач.

Чтобы не писать полотно текста, состоящее из повторяющихся слов и цифр, покажу наглядно набор favicon-иконок, необходимый вам для сайта, подходящий для 99,9% случаев (вдруг уже есть какие-то новые стартапы, использующие что-то совсем другое):

Страшно? Мне тоже… 

Но, к счастью, есть специализированные сервисы, которые значительно упрощают подготовку всех этих файлов!

---

Как сделать фавикон для сайта

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

Например, с моим лого (монограмма 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, можете воспользоваться сервисом www.favicon.cc — в этом плане он весьма хорош и полезен, но больше ни на что не годится.

Если остались какие-то вопросы по созданию фавиконов, отпишитесь в комментариях!

---

Буду благодарен, если поделитесь записью в соцсетях  

Как создать фавикон: Полное руководство

(Изображение предоставлено Майклом Фларупом)

Дизайн Favicon важнее, чем вы думаете. Размер здесь действительно имеет значение, так как хорошо разработанный логотип должен быть узнаваем в любом размере, в котором он виден. Он должен масштабироваться от огромных экранов до значка размером всего 16 x 16 пикселей, известного как фавикон. Отличным примером дизайна фавикона является логотип Google. Он идеально подходит для больших экранов благодаря крупной букве «G» и четкому четырехцветному тексту. И он по-прежнему узнаваем, когда уменьшен до крошечной четырехцветной буквы «G», видимой в адресной строке веб-браузера.

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

В этой статье мы рассмотрим процесс создания идеального фавикона. Мы включим конкретные советы по созданию фавикона для устройств Apple, Android, Chrome, Opera и Safari. Плюс удобное руководство по различным размерам и форматам значков, которые вам необходимо знать. Используйте быстрые ссылки (справа), чтобы сразу перейти к нужному разделу.

Дизайн фавикона: Быстрые ссылки

— Правила дизайна фавикона
— Шпаргалка по размерам фавикона
— Фавиконы браузера для ПК
— Фавиконы Apple Touch
— Android, Chrome и Opera
— Закрепленная вкладка Safari

• Ищем другой вид значка ? См. наш путеводитель по лучшим бесплатным наборам иконок (открывается в новой вкладке)

На заре Интернета фавикон представлял собой просто файл значка размером 16×16 пикселей, но в настоящее время он немного сложнее. Существуют разные размеры значков и процессы для разных контекстов. Создание правильного фавикона — это целая наука.

Итак, мы начнем с нескольких основных советов о том, как должен выглядеть ваш значок, а затем перейдем к конкретным советам о том, как создать значок для разных контекстов. Мы будем использовать шаблон, доступный в Apply Pixels (открывается в новой вкладке), чтобы легко создавать значки разных размеров, и в качестве примера — значок из Apply Pixels.

Правила дизайна фавикона

01. Сделайте его узнаваемым

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

02. Используйте свой логотип

Рассматривайте значки избранного как трезвые указатели, которые помогают пользователям узнавать ваш веб-сайт при просмотре списков закладок и домашних экранов. Поэтому вы хотите использовать свой логотип или любой другой символ, который позволяет пользователю легко распознать ваш веб-сайт. Если у вас нет логотипа, подходящего для квадратного холста, используйте наиболее узнаваемую часть вашего логотипа.

03. Соблюдайте ясность

Есть также несколько вещей, которых вам следует избегать. Не используйте фавикон в качестве маркетингового инструмента — это означает отсутствие ценников, «новых» или «обновленных» баннеров и т. д. На самом деле, вы вообще не хотите размещать текст внутри значка. Текст плохо масштабируется, и есть вероятность, что он все равно будет неразборчивым. Наконец, не используйте фото — оно будет грязным и неузнаваемым при таком размере.

04. Создайте две версии

Разные фоны хорошо подходят для разных контекстов (Изображение предоставлено: Michael Flarup / Apply Pixels)

Когда значки избранного впервые появились в Internet Explorer 5, они появились в адресной строке и в списке закладок. Сегодня значки отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Это затрудняет прогнозирование того, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваша иконка хорошо выглядела во множестве различных контекстов, в которых она будет отображаться, в идеале вы должны предоставить два стиля фавиконки:

Логотип на прозрачном фоне
Эта версия отображается в адресной строке, списках закладок и других местах, где значок значка отображается рядом с URL-адресом или названием вашего веб-сайта.

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

Шпаргалка по размеру фавиконки

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

Раньше фавиконки нужно было предоставлять в формате ICO. Сегодня можно предоставлять файлы в формате PNG (за исключением значка закрепленной вкладки Safari, который должен быть предоставлен в формате SVG).

Если вам нужен простой способ создания и экспорта значков всех размеров, взгляните на шаблон значков (откроется в новой вкладке) в разделе «Применить пиксели».

Это наиболее распространенные размеры фавиконки (Изображение предоставлено emergeinteractive)

(открывается в новой вкладке)

Теперь давайте подробнее рассмотрим конкретные требования для различных вариантов использования.

Фавиконка браузера для ПК

Как создать фавиконку браузера для ПК

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

Фавиконы в классическом стиле, отображаемые на панели закладок и адресной строке в Google Chrome (Изображение предоставлено Michael Flarup / Apply Pixels)

Вам нужно будет предоставить значок этого типа в трех размерах, все в формате PNG с прозрачным фоном .

• 16×16
• 32×32
• 48×48

Apple

Как создать Apple Touch Favicons

Apple IOS Используется Apple Touch Icons для представления веб -сайтов, которые были спасены на IOS. В качестве ios. Это означает, что значок Apple Touch будет округлен до квадратной (открывается в новой вкладке) маски значков приложений iOS.

Он также будет отображаться на любом фоне, который пользователь выбрал для своего рабочего стола. Имея это в виду, ваша иконка Apple Touch должна иметь стиль сплошной заливки .

Этот значок будет отображаться на фоне домашнего экрана пользователя (Изображение предоставлено Michael Flarup / Apply Pixels) Вы можете обойтись без иконки Apple Touch 180×180 , которая будет автоматически масштабироваться для различных размеров iPhone и iPad. Это будет работать нормально в большинстве случаев.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180

Android, Chrome и Opera

Как создать значок для Android, Chrome и Opera

Android, Chrome и Opera используют файлы android-chrome-192×192. png и android-chrome-512×512.png , которые Google рекомендует (откроется в новой вкладке).

С момента появления адаптивных значков в Android веб-сайты, добавленные на главный экран Android, будут маскировать дизайн 192×192, поэтому значок принимает форму в соответствии с предпочтительным стилем маскирования пользователя. Это может быть квадрат, многоточие, прямоугольник, прямоугольник со скругленными углами или каплевидная форма.

Фавиконы здесь будут замаскированы в разные формы, в соответствии с предпочтениями пользователя (Изображение предоставлено Michael Flarup / Apply Pixels) .

Внедрите эти значки, добавив файл manifest.json на свой сайт и связав его с тегами:

Вот код для manifest.json файл:

 { "имя": "", "short_name": "", "icons": [ { "src": "/android-chrome-
192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-
chrome-512x512. png", "sizes": "512x512", "type": "image/png" } ], "theme_color":
"#ffffff", "background_color": "#ffffff", "display": "standalone" } 

Safari

Как создать значок для закрепленной вкладки Safari

Это лишний и единственный favicon, который должен быть предоставлен в векторный формат в виде файла SVG . Он отображается в виде значка эскиза, когда пользователь закрепляет вкладку в окне браузера Safari.

В отличие от всех других фавиконов, этот значок создается из изображения SVG (Изображение предоставлено Майклом Фларупом / Apply Pixels)

Этот значок должен быть на 100% черным SVG-файлом с прозрачным фоном . SVG может быть только одним слоем, и Safari требует, чтобы для атрибута viewBox SVG было установлено значение « 0 0 16 16» 9.0052 .

Другие типы значков

Существуют некоторые размеры и форматы значков, которые не были включены в эту статью, например. Google TV, Интернет-магазин Chrome и значки Apple Touch до iOS 7. Почему? Потому что они устарели или потому что они редко актуальны для среднего веб-разработчика.

В общем, разработчики и проектировщики должны стремиться поддерживать максимально широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла. Но если вы хотите увидеть более полный список изображений фавикона, обязательно взгляните на эту шпаргалку фавикона (откроется в новой вкладке) на GitHub.

Подробнее:

• Лучшие тенденции дизайна на 2020 год (открывается в новой вкладке)
• 15 профессиональных шрифтов для дизайнеров  (открывается в новой вкладке)
• 27 лучших наборов бесплатных иконок (открывается в новой вкладке)

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь и получите неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Майкл — датский дизайнер, предприниматель и основной докладчик. Он любит что-то мастерить, участвовать в приключениях и рассказывать истории.

Нарисуйте фавиконку в виде буквы V | Фрилансер

• Номер: Закрыто
• Цена: €80
• Спасение предложений: 100
• Ганант: АшимСен9551

Победитель

Привет,
Мне нужен логотип с буквой «V» для моего веб-сайта.
Хочу что-то современное, светлое, с градиентом цвета (см.примеры во вложении).
Он должен быть легким, как в примерах, с 1 или 2 деталями, которые делают его уникальным.
Буква «V» должна быть легко читаемой, когда логотип очень маленький (как на вкладке браузера).
Основной цвет: Розовый #E52A64 (Используйте цветовой градиент, близкий к этому цвету).
Формат: SVG

Победитель

Publiez un concours comme celui-ci

«Он прислушивается к вашим потребностям и выполняет то, что вы хотите. Рекомендую.”

Verriick , Швейцария.

• АшимСен9551 Бангладеш

• ахсанабир00 Бангладеш

• алисоджибсаджу Бангладеш

• мишуонфриланс Бангладеш

• МааАРТ Бангладеш

• шайкатемон Бангладеш

• шайкатемон Бангладеш

• МДРАЙДМАЛЛИК Бангладеш

• денисмузия Украина

• денисмузия Украина

• имран783347 Бангладеш

• имран783347 Бангладеш

• Ахи99 Бангладеш

• шайкатемон Бангладеш

• АнмолАди Пакистан

• Нахидхасанри54 Бангладеш

Дополнение плюс предложения

• Публичное голосование Быстро и легко

• Получение предложений De partout dans le monde

• Attribuez la meilleure proposition Télécharger les fichiers — Facile!

Издатель, участвующий в сопровождении, rejoignez-nous maintenant!

10 сервисов для создания фавиконки из текста онлайн бесплатно

Рейтинги редактора:

Рейтинги пользователей:

[Всего: 0 В среднем: 0]

В этой статье вы прочтете о лучших бесплатных веб-приложения, которые позволяют создавать Favicon из текста и изображений онлайн.

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

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

1. Ionos Favicon Editor

Ionos от 1&1 — это простое веб-приложение для создания фавиконок, которое помогает создавать фавиконки тремя способами. К ним относятся редактор Favicon, который позволяет вам рисовать свой favicon, генератор писем, который помогает вам преобразовать набранное письмо в favicon, и Image Favicon, который помогает вам создавать favicon с использованием изображения.

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

Попробуйте этот сайт здесь.

2. Favicon.io

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

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

Попробуйте этот сайт здесь.

3. Prepostseo Favicon Generator

На этом сайте есть много инструментов, которые могут помочь вам с вашим сайтом. Одним из таких инструментов является создание фавикона для вашего сайта. Этот веб-сайт поможет вам создать свой любимый фавикон, используя текст или изображение. Вы также можете создать фавикон, используя смайлики. Вам просто нужно ввести букву или выбрать изображение и настроить фавиконы в соответствии с вашими потребностями. Затем вы можете напрямую загрузить на свой компьютер различные версии. Эта платформа предоставляет возможность загрузки фавиконов в разных разрешениях, от 48 до 1024 пикселей.

Попробуйте этот сайт здесь.

4. Генератор фавиконок

Генератор фавиконок поможет вам создать фавикон для просмотра веб-страниц, а также для приложений Android, iOS и Microsoft. Это веб-приложение создает фавиконку, используя изображение. Следовательно, вы просто загружаете изображение и создаете нужный значок за считанные минуты. Для упрощения это веб-приложение преобразует выбранное вами изображение в формат favicon, ICO, чтобы его можно было применять во всех типах браузеров.

Попробуйте это веб-приложение здесь.

5. Real Favicon Generator

Опять же, это веб-приложение позволяет вам создавать favicon без входа в систему или регистрации. Наряду с созданием значка, он также позволяет вам протестировать текущий значок, который вы должны использовать для своего веб-сайта. Вам просто нужно ввести URL-адрес вашего веб-сайта, и веб-приложение автоматически проверит текущий значок.

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

Попробуйте этот сайт здесь.

6. Genfavicon

Это веб-приложение позволяет бесплатно конвертировать изображение в фавикон. Эти инструменты помогают вам обрезать и изменять размер изображения и предоставлять результат в формате ICO для использования на веб-сайте. Вы также можете просмотреть предварительный просмотр значка перед загрузкой файла.

Попробуйте этот сайт здесь.

7. X-icon Editor

Этот веб-сайт является отличным инструментом, если вы хотите создать значок с нуля. Это веб-приложение поможет вам разработать инструмент с нуля и впервые попробовать свои силы в создании значка без какой-либо регистрации. Это веб-приложение предоставляет вам инструмент «Текст», кисть, карандаш, ластик и многие другие инструменты, которые вы можете использовать для создания фавикона. Вы можете свободно использовать свое творчество в этом веб-приложении.

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

Попробуйте это веб-приложение здесь.

8. Logaster

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

Вам просто нужно нажать «Создать логотип», ввести название компании и выбрать вид деятельности компании. Затем веб-приложение сгенерирует множество готовых шаблонов, которые можно настроить. Как только логотип будет готов, веб-приложение создаст фавиконку.

Попробуйте этот сайт здесь.

9. Favicomatic

Favic-o-matic позволяет сразу создать формат ICO изображения. Кроме того, вы также можете выбрать вариант создания значка для всех типов браузеров, если вы не уверены в формате. Веб-сайт прост в использовании, и вы можете получить доступ к параметрам с самой домашней страницы. Просто загрузите изображение и выберите один из двух вариантов: просто конвертируйте его в формат .ico или сгенерируйте фавиконку для каждого веб-сайта.

Попробуйте это веб-приложение здесь.

10. Red Ketchup Favicon Generator

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

Попробуйте это веб-приложение здесь.

Коротко

Использование веб-приложения для создания фавикона — это быстрый и простой способ обновления вашего веб-сайта.

No related posts.