Нарисовать favicon: Как сделать favicon для своего сайта

Содержание

что это такое, размер, зачем нужен favicon в 2023 году

Статья обновлена 03.11.2022

Часто при создании и продвижении ресурса можно встретить английский термин favicon. Что это такое? Фавикон является сокращённым сочетанием двух слов: favorites и icon. Что в переводе означает “любимая иконка”. Это изображение действительно важно, потому что отображается как в поисковой выдаче, так и на вкладках браузера. О том, как сделать этот значок для сайта мы и расскажем в этом материале.

Зачем нужна пиктограмма картинки — фавикон

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

1. Поисковая выдача Яндекс.

2. Вкладки браузера.

3. Панель закладок.

4. История браузера.

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

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

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

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

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

При создании фавиконки необходимо учитывать следующие моменты:

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

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

Размер фавикона для сайта

Фавикон бывает в нескольких стандартных размерах, которые объединяет одно — изображение должно быть квадратным. Пиктограмма может быть загружена как иконка для сайта 16х16, 60х60, 32х32 и так далее. Основная масса плагинов и систем самостоятельно подгоняет загруженный файл под необходимый размер.

Основное требование к загружаемому файлу — это разрешение ICO. Итоговое его название должно выглядеть следующим образом «favicon.ico».

Создание фавикон онлайн

Иконку можно создать при помощи графических редакторов, а для упрощения процесса можно воспользоваться одним из онлайн-генераторов. Например favicon.by. Тут можно загрузить уже имеющееся изображение в формате png, самостоятельно нарисовать фавикон или воспользоваться базой изображений.

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

Готово! Теперь пользователям просто ориентироваться во вкладках и ваш ресурс точно не останется незамеченным.

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

Закажите презентацию с нашим экспертом. Он просканирует состояние вашего маркетинга, продаж и даст реальные рекомендации по её улучшению и повышению продаж с помощью решений от ROMI center.

Запланировать презентацию сервиса

Попробуйте наши сервисы:

Импорт рекламных расходов и доходов с продаж в Google Analytics
Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов
Попробовать бесплатно
Импорт рекламных расходов и доходов с продаж в Яндекс Метрику
Настройте сквозную аналитику в Яндекс.Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов
Попробовать бесплатно
Система сквозной аналитики для вашего бизнеса от ROMI center
Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.
Попробовать бесплатно

Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.
Подробнее → Попробовать бесплатно
Сквозная аналитика для Яндекс.Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.
Подробнее → Попробовать бесплатно
Сквозная аналитика от ROMI позволит высчитывать ROMI для любой модели аттрибуции Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.
Подробнее → Попробовать бесплатно

Что такое Favicon, и как его сделать.

Фавикон – favorite icon (иконка для избранного) – это маленькое изображение, которое отображается в результатах поисковой выдачи около названия сайта, а также в закладках браузера.

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

Размеры фавикона могут быть разные – 16х16px, 32х32px, 120х120px. Зачастую используется первый размер – 16×16 пикселей, так как остальные размеры редко где отображаются. Формат иконок тоже можно выбрать из нескольких – ICO, JPEG, PNG, BMP. Мы рекомендуем использовать формат ICO, так как он создан специально для создания и отображения иконок. Они не размываются, остаются чёткими, ведь при таком маленьком размере очень важно то, чтобы пользователь мог различить хотя бы очертания рисунка фавикона, а не видел кашу из пикселей.

Фавикон, как уже говорилось, отображается в поисковой выдаче слева от названия сайта. За индексацию иконок отвечает YandexFavicons, который собирает и обновляет по мере необходимости всю информацию об иконках интренет-ресурсов. Если вы сегодня установили на свой сайт favicon, и не увидели его в поисковой выдаче – не пугайтесь. Индексация занимает от нескольких дней до нескольких месяцев. Но на практике это, конечно же, быстрее.

После того, как сервис YandexFavicons найдёт вашу иконку, он добавит её к себе в базу. Проверить это можно по ссылке

https://favicon.yandex.net/favicon/ (адрес вашего сайта)

Как самостоятельно создать фавикон?

Наконец, вы решились на этот шаг – создание Favicon для вашего сайта, значит у него уже есть узнаваемый стиль и дизайн.

При создании старайтесь соответствовать единому стилю сайта. Когда у сайта есть фавикон, то это даёт следующие преимущества –

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

Путей создания фавиконов три –

Нарисовать самому в Photoshop. Если вы хороший дизайнер и умеете рисовать, или просто решили попробовать свои силы в создании Favicon, вы можете воспользоваться графическим редактором. Самый популярный – Adobe Photoshop. В интернете есть множество уроков по рисованию иконок.

Воспользоваться специальными сервисами. На просторах интернета существует множество специальных сервисов, так называемых Генераторов фавиконов. К одному из самых популярных относят Faviсon.cc. У него понятный на интуитивном уровне интерфейс, он может сохранять иконки в разных форматах.

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

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

Ну, и самый простой вариант – вы можете найти уже готовый Favicon на просторах интернета, благо их скопилось великое множество.

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

последних фавиконов — Faviconer

Создать новый фавикон
Загрузить — Импортировать изображение
Последние файлы Favicon .ICO
О Faviconer

Просмотр 1-11 из 225460 фавиконов

Дата создания: 23 июля 2023 г.

Автор: Mary Seigenfeld

Страна: Goleta, United States, US

3240 КБ

Глубина цвета: 8 бит

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

Дизайн 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 лет.0171 на вашем сайте или в закладках. Так что нет необходимости пытаться привлечь пользователя своим фавиконом.

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

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

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

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

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

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

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

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

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

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

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

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

Если вам нужен простой способ разработки и экспорта значков всех размеров, взгляните на шаблон значков на странице Apply Pixels.

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

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

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

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

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

16×16
32×32
48×48

Apple

Как создавать фавиконы Apple Touch

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

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

180×180

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

60×60
76×76
120×120
152×152
18 0x180

  png">

Android, Chrome и Opera

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

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

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

Внедрите эти значки, добавив файл 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

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

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

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

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

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

Подробнее:

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

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

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

У вас уже есть аккаунт? Войдите здесь
*Читайте 5 бесплатных статей в месяц без подписки
Присоединяйтесь сейчас, чтобы получить неограниченный доступ
Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро
У вас уже есть аккаунт? Войдите здесь
Ежедневные новости дизайна, обзоры, практические советы и многое другое, выбранное редакторами.

Штирлиц — Сеть печатных салонов в Перми

Нарисовать favicon: Как сделать favicon для своего сайта – База знаний Timeweb Community