Содержание

Как создать фавикон для сайта. Пошаговая инструкция от А до Я

Содержание:
1.Что такое фавикон?
2.Почему фавикон важен?
3.Как создать фавикон?
4.Как установить фавикон на сайт?

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

Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

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

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

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

Фавикон выполняет следующие функции:
— Брендинг.
— Идентификация сайта пользователем (удобство использования).
— Придает сайту профессиональный вид.

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

Узнаваемость бренда

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

Доверие

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

Повторные посещения

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

Экономит время пользователя

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

Преимущества для SEO

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

Как создать фавикон?

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

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать логотип»

Шаг 2. Создайте логотип

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

Шаг 3. Выберите понравившийся логотип

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

Как выбрать правильный дизайн?

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

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

Шаг 5. Создайте и скачайте дизайн фавикона

На странице бренда выберите “Фавикон”.

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

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

Найти вдохновения для фавиконки можно на сайтах:

The Favicon Gallery
Delta Tango Bravo
Fresh Favicons

Шаг 6. Скачайте фавикон

Вы можете скачать фавикон совершенно бесплатно в формате PNG и ICO.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— на сайте;
— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;
— программах и приложениях для РC/Mac.

Как установить фавикон на сайт?

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

Шаг 1.
Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla.

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

Шаг 2.
Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

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

Откройте файл index.html в текстовом редакторе — блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

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

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

Как создать онлайн favicon.ico и установить фавикон на сайт

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

Что такое фавикон для сайта и зачем он нужен?

Favicon (фавиконка) — это картинка, изображение которой показывается перед адресом сайта в адресной строке, а также слева от названия сайта на вкладке браузера. Размеры favicon 16 на 16 пикселей. Наглядно смотрите на картинке:


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

к оглавлению ↑

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

Чтобы создать иконку ico онлайн, переходим на сервис генератор favicon из подобранной картинки  — favicon.

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

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

к оглавлению ↑

Где скачать готовый favicon.ico для сайта

Если Вы не хотите самостоятельно создавать иконку  favicon, то Вы можете скачать готовые фавиконы из следующих сайтов:

  • iconj.com — для скачивания favicon нажмите ICO напротив выбранной картинки.
  • findicons.com — введите в поле поиска ключевое слово по тематике, на понравившуюся картинку нажмите правой кнопкой мыши, скачанную картинку переименуйте, как favicon.ico
  • faviconka. ru — еще один сервис, содержащий множество иконок favicon для скачивания. Аналогично предыдущему сайту, сохраните картинку на компьютер и переименуйте ее.
к оглавлению ↑

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

Того, чтобы поставить иконку favicon, необходимо полученный  файл favicon.ico загрузить на хостинг. Для этого через FTP клиент загрузите файл иконки в корневую папку Вашего сайта(это папка в которой находятся файлы index.php, sitemap.xml, а также основные папки wp-admin, wp-content). Подробно, где найти корневую папку сайта на хостинге читайте в статье по ссылке https://inetsovety.ru/kornevoy-katalog-sayta/

После этого в админке выберите из меню Внешний вид — Редактор. Откройте файл header.php, так как именно он отвечает за верхнюю часть сайта.  В этот файл необходимо вставить следующий код:

<link rel=»shortcut icon» href=»http://inetsovety.ru/favicon.ico» type=»image/x-icon» />

<link rel=»icon» href=»http://inetsovety.ru/favicon. ico» type=»image/x-icon» />

Замените адрес моего блога inetsovety.ru, адресом своего блога. Данный код вставляйте то место, где увидите такие строчки <link rel=……./>

Сохраните изменения в файле шаблона header.php. Обновите страницу и фавикон должен поставиться. Если в текущем браузере фавикон не отобразился, то попробуйте открыть свой сайт через другой браузер. У меня, например, в браузере Мозилла иконка отобразилаь только после перезапуска браузера, хотя у других браузерах все работало сразу же после установки. Если же favicon не отображается ни в одном из браузеров, значит Вы сделали что-то не так.

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

С уважением, Виктория – блог inetsovety.ru

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

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

Сегодня поговорим о важном элементе — favicon. В статье поделимся советами и проанализируем креативные примеры.

Допустимые форматы и размеры

Favicon — значок, который отображается в адресной строке браузера. Визуальный элемент появился в 1999 году в Internet Explorer. В то время можно было отследить, сколько юзеров добавили страницу в закладки по количеству обращений к фавикону. Сейчас такой возможности нет.

Компания Microsoft создала веб-стандарты, и с того времени иконка постепенно начала появляться в разных браузерах. Favicon отображается в закладках, истории просмотра и результатах поиска Яндекса.

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

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

Список расширений:

  1. ICO. Самый популярный вариант. Главная особенность — хранение в файле нескольких размеров.
  2. PNG. Современный стандарт. Поддерживается всеми браузерами, в том числе и капризным Internet Explorer.
  3. GIF. Анимированный фавикон выглядит круто, но используется редко.
  4. SVG. Единственное решение для Safari под iOS и maCOS. Векторные картинки мало весят и хорошо масштабируются, но пока что не получили широкого распространения.
  5. JPEG. Проигрывает PNG по четкости. Никаких плюсов не даёт, использовать не рекомендуется.

С форматами разобрались — надо использовать PNG, SVG или GIF. Теперь перейдём к другому важному атрибуту.

Чаще всего фавиконы делают в размерах 16×16 или 32х32. Раньше можно было сделать значок в PNG или ICO и установить на сайт. Сейчас этого недостаточно. Надо учитывать особенности разных платформ.

Платформа
 Допустимые разрешения, px
Веб-браузеры 16×16, 32×32, 48×48
ОС Windows 144х144
Android 192×192, 512х512
iOS 180×180
macOS зависит от изображения

Без знаний и опыта легко запутаться в форматах, разрешениях и отличительных чертах Android, Windows Phone и iOS. В решении задачи поможет специальный генератор.

Пошаговая инструкция:

  1. Заходим на RealFaviconGenerator.
  2. Загружаем файл в разрешении 260х260.
  3. Проверяем отображение.
  4. Меняем настройки до оптимального результата.
  5. Нажимаем на кнопку генерации.
  6. Сохраняем архив.
  7. Интегрируем код в шаблон веб-страницы.

Инструмент даёт возможность экспериментировать с вариантами под разные платформы. Для браузеров под десктопы все стандартно. В Chrome под Android можно задать цвет фона и изменить размер в визуальном редакторе. Windows 8 и 10 с плиточным интерфейсом поддерживает аналогичные функции. Кстати, в последних редакциях Windows фавикон показывается крупным планом в «плитке» на панели «Пуск».

После настройки и установки обязательно проверьте корректность с помощью Favicon Checker.

На этом технические нюансы заканчиваются.

Выбираем картинку

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

Преимущества значка:

  1. Вызывает доверие. Посетители оценивают логотип, дизайн и часто смотрят на изображение в браузере. Если оно сделано нестандартно — проект получает плюс один балл в глазах аудитории.
  2. Повышает узнаваемость. Иногда юзеры сохраняют полезный контент в закладки и через время при поиске находят её именно по узнаваемому фавикону.
  3. Увеличивает кликабельность. Необычная картинка привлекает внимание в результатах поисковиков.
  4. Даёт преимущество над конкурентами. Если потенциальный клиент ищет услугу или выбирает товар, каждый необычный элемент влияет на его опыт и будущую конверсию.

Многие проекты игнорируют favicon или просто берут логотип и подгоняют его под размер. Этот вариант сработает только для картинок в виде символа. К примеру, если взять лого корпорации Microsoft в стандартном формате и уменьшить до 32х32 пикселей, результат будет ужасным. Именно поэтому компания сделала иконку в виде 4 плиток разных цветов. Она гармонично смотрится в миниатюрном квадрате.

Посетители без труда узнают фирменный значок Microsoft и выделят его из тысячи других вариантов.

Советы по выбору иконки:

  1. Тематичность.
    Фавикон должен ассоциироваться с брендом. Идеальный вариант — урезанная версия логотипа или первая буква названия фирмы.
  2. Контрастность. Используйте яркие цвета. Если выбрать нежные тона, элемент будет сложно разглядеть из-за маленького размера. Оптимально подойдет красный, оранжевый, темно-синий.
  3. Чёткость. Изображение в плохом качестве выглядит неуместно. Лучше отрисовать картинку в векторе и подогнать под квадратный формат.
  4. Простота. Слоган или широкий логотип испортят впечатление. Сделайте упрощенную версию с элементами фирменного стиля бренда.
  5. Креативность.
     Не используйте варианты из стандартных наборов. Поставьте задачу дизайнерам, они воплотят в жизнь необычную концепцию.

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

Используем анимацию с умом

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

На портале для веб-мастеров MB4 установлен динамический фавикон. Для разработки проекта использована ракета из логотипа. Из хвоста вырывается разноцветное пламя. В Яндексе отображается красивый статический вариант.

Учитываем разные платформы

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

В структуре главной страницы проекта о пластиковых окнах из примера выше задан один размер 48х48 пикселей. Несложно представить, как обстоит ситуация с отображением на Android, iOS, macOS и Windows Phone.

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

3 креативных примера фавикона

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

Mixcloud

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

Юзер может даже не открывать вкладку Mixcloud, чтобы узнать, сколько осталось до конца подкаста. Эта мелочь экономит время и создает положительные ассоциации.

Trello

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

Пользы от такой фишки нет, но аудитории наверняка нравится эстетика и креатив.

Google Календарь

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

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

Креативный favicon можно сделать для любого сайта. Обращайтесь в студию IDBI за помощью в этом вопросе.

как создать и установить на собственном сайте

Фавикон – это маленький значок, который высвечивается во вкладке браузера. Впервые он появился в 1999 году у браузера Internet Explorer. Для того, что бы такой фавикон появился рядом с названием сайта необходимо было загрузить его в виде файла с именем favicon.ico в корневую папку.

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

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

Причем, предлагается загрузить изображение размером 512х512 px. Сделать это можно в опции Внешний вид – Настроить – Свойства сайта.

Просто заходите в Яндекс или Google картинки, задаете параметры фильтра и получаете готовый фавикон.

Желательно сделать его ярким и отличающимся от остальных сайтов, что бы иконка сразу бросалась в глаза пользователю. Зачем?

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

Требования Поисковика Яндекс

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

Если фавикон будет не найден, вас обязательно об этом известят в кабинете вебмастера.

Что бы понять свои ошибки. пройдите по ссылке – Как исправить и внимательно прочитайте требования к фавикону.

Обратите внимание на расширение изображения. Расширение ico теперь не принимается. И обязательно поправьте размеры иконки. Тото, который нам предложил загрузить WordPress не проходит. Необходим 16х16, 32х32, 120х120. Связано это с тем, что теперь ваш сайт ищут на мобильных устройствах. А они отображают только выше перечисленные размеры.

Кстати, не обращайте внимание на ограничения размера WP. Он воспринимает нормально и 120х120 и 32х32

Как создать уникальный фавикон

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

Давайте приступим к его созданию. Способов очень много. Я покажу Вам самый простой, благодаря которому  Вы создадите его сами.
Выходим на  http://www.favicon.cc/. Это очень простой и удобный ресурс создания фавиконов.

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

Чем удобен ресурс. Вы сразу же видите его генерацию  на ярлыке вкладки браузера.

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

Теперь переходим на страницу загрузки архива плагина All in one Favicon. Это универсальный плагин, благодаря которому,  вы можете загрузить на свой блог, созданные вами в различных форматах  (например – GIF или PNG), рисунки в размере 16Х16.

Для этого  привычным для вас способом загружаем плагин  на блог. Находим его в разделе – Параметры. Открываем. Интерфейс очень прост.


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

Вот и все! Ваш ресурс теперь имеет уникальный логотип!

Ну вот и все, пожалуй. Как видите нет ничего сложного!

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

Что такое Favicon? Подробное руководство по фавикону для сайта

Содержание

Что такое Favicon?

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

Обычно favicon создают в классическом формате ICO. Стандартный размер иконки составляет 16 x 16 пикселей с 16, 24 или 32-битной поддержкой цвета и прозрачности. Намного позже, стали появляться новые расширения, которые зависят от типа и операционной системы устройства: 32 x 32, 48 x 48, 96 x 96 и другие. Но обычно браузеры отображают иконки в формате 16 x 16.

Основная функция favicon – это визуальное представление сайта в одном небольшом изображении. Поэтому, чем больше общего у вашего сайта и иконки, тем лучше. Чаще всего favicon создают на основе логотипа компании или цветовой гаммы бренда. Данный значок должен быть релевантным и четким: пользователь должен сразу понять, что на нем нарисовано, и легко запомнить его.

Почему favicon очень важен?

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

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

В некоторых поисковых системах favicon отображается в результатах поисковой выдачи напротив каждого сайта. Яндекс уже давно реализует данную функцию, в то время как Google начал тестировать ее внедрение только в 2019 году (в десктопной версии Google фавиконов пока нет, при этом в мобильной выдаче они присутствуют).

Пример отображения фавикон в выдаче поисковой системы Яндекс:

Пример отображения фавикон в мобильной выдаче Google:

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

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

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

Примеры Favicon

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

Чтобы узнать больше информации о том, как иконка отображается на разных устройствах или браузерах, воспользуйтесь нашей SEO-проверкой.

Как создать favicon для сайта?

Существует несколько способов создать favicon:

1. Нарисовать его самостоятельно в графическом редакторе.
2. Нарисовать иконку в специальном онлайн-сервисе.
3. Найти и скачать иконку, воспользовавшись бесплатным стоком (Findicons. com или Iconizer.net).
4. Загрузить имеющийся логотип или любое другое изображение в онлайн-генератор favicon, представленных ниже, а затем сохранить его:

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

Как создать иконку в Photoshop?

Photoshop – популярная графическая программа для создания изображений любых форматов, но есть одна проблема – она не поддерживает полноценную работу с файлами формата «.ico». Поэтому вам потребуется скачать и установить его плагин от Telegraphics.

Однако, лично я рекомендую использовать связку: Photoshop + программа Art Icons Pro – это популярный редактор иконок (российская разработка), который позволяет создавать и редактировать иконки. Программа поддерживает экспорт и импорт множества графических форматов.

Работать в «Art Icons» просто. Как делаю обычно лично я, когда хочу создать favicon:

  • Захожу на сайт, для которого нужно сделать иконку.
  • Делаю скриншот места на сайте, где размещен логотип.
  • Открываю Photoshop, вставляю изображение из буфера обмена.
  • Обрезаю изображение скриншота так, чтобы логотип был в его центре + нужно иметь в виду, что после обрезки само изображение должно быть квадратной формы.
  • Далее сохраняю его в PNG. Закрываю Photoshop.
  • Затем открываю сохраненную картинку в «Art Icons».
  • Уменьшаю изображение до размера 16 x 16 пикселей: «Инструменты -> Конвертировать формат…» и выбираю размер 16 на 16 и цвета «True Color + Apha (32 бит)».
  • Затем выбираю «Файл -> Сохранить как…» и выбираю формат «Icon (*.ico)».
  • Все.

Ну и самый простой вариант – онлайн-генераторы Favicon. Примеры подобных онлайн-сервисов:

Как добавить иконку на сайт?

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

  • Загрузите favicon.ico на ваш сервер в корневую папку.
  • В блоке HEAD вашего сайта пропишите ссылку на favicon в виде:
    • <link href=»/favicon.ico» rel=»shortcut icon»>.
  • Все!

Вот видите – все просто!
Создайте свой favicon и убедитесь в этом сами!

Favicon (иконка сайта) | SEO-портал

Автор: Нотан Ройамов

Создано:

Обновлено:

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках д.).<div class="seog-tooltip-more-link"><a href="/terminy/brauzer">Подробнее</a></div> »>браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Favicon: отображение в элементах интерфейса браузеров, облегчающее их использование.

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку <div class="seog-tooltip-more-link"><a href="/terminy/sajt">Подробнее</a></div> »>сайта во вкладках:

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

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

Кроме отображения во вкладках, <div class="seog-tooltip-more-link"><a href="/baza/kartinki/favicon">Подробнее</a></div> »>иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

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

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

  • отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
  • способствует узнаваемости сайта,
  • облегчает работу пользователей в браузере,
  • является визитной карточкой сайта в браузере,
  • отображается в сниппетах поисковой выдачи,
  • может влиять на кликабельность Существует 3 вида <span>сниппетов</span>: контекстные объявления, стандартные <span>сниппеты веб-страниц</span>, а также <span>особые сниппеты</span> (колдунщики, навигационные ответы и т. д.).<div class="seog-tooltip-more-link"><a href="/terminy/snippet">Подробнее</a></div> »>сниппета,
  • может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца.

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс. Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

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

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

Если иконка сайта не проиндексирована, и (или) в Яндекс.Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.

Яндекс.Помощь

Требования к иконке сайта

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

Для фавиконок существуют требования:

  • к названию файла,
  • к геометрическому размеру,
  • к формату файла,
  • к размещению,
  • к HTML-разметке.

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

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла.

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.

Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Как отмечалось ранее, если пиктограмма сайта будет создана не в формате ICO, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

  • имя файла: favicon,
  • формат файла: ICO,
  • размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
  • размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

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

Используйте уникальную фавиконку
Пользователи не любят плагиат и копирование: заимствование иконки сайта другого популярного ресурса в большинстве случаем негативно отразится на поведенческих факторах.
Фавиконка должна быть контрастной
Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.
Подумайте об использовании анимации
Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.
Учитывайте возможность применения прозрачности
Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

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

Контрастность

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

Исходное изображение

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

Статичная иконка

Анимированная иконка

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

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне:

Можно заметить, что все крупные популярные сайты (в том числе Яндекс и Google) используют фавиконки с прозрачным фоном вместо белого. Непрозрачный белый фон практически не применяется, т. к. слишком выделяется на сером фоне неактивных вкладок браузера.

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

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

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Перейти к генератору favicon.cc
Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

  • отсутствие русской версии,
  • экспорт файлов только в формате ICO.
Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

  1. кликните Create New Favicon,
  2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
    • палитра цветов — для определения цвета карандаша,
    • Transparency — ползунок определения степени прозрачности,
    • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
    • transparent — устанавливает прозрачный цвет («стирка»),
    • move — позволяет переместить все пиксели в редакторе.
  3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
  4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
  5. скачать готовую фавиконку можно по клику на Download Favicon.
Создание Favicon в онлайн-генераторе
Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

  1. кликните Use Animation под окном редактора,
  2. раскроются дополнительные инструменты для работы с кадрами:
    • номер кадра указан прямо под редактором Favicon,
    • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
    • Clear Frame — очистка окна редактора (текущего кадра),
    • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
    • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
    • Delete Frame — удаление текущего кадра,
    • animate preview — активация демонстрации анимации в области «Preview»,
    • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.
Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

  1. кликните Import Image,
  2. выберите файл для преобразования размером не более 5 Мб,
  3. определите способ преобразования размера изображения до квадратных пропорций:
    • Keep Dimensions — с сохранением пропорций исходного изображения,
    • Shrink to square icon — сжимая или растягивая изображение.
  4. кликните Upload для конвертации.
Онлайн-конвертер favicon.cc
Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

  1. чтобы перейти к списку готовых фавиконок кликните:
    • Latest Favicons — последние созданные иконки,
    • Top Rated Favicons — самые популярные иконки,
  2. кликните по названию понравившейся фавиконки,
  3. кликните:
    • Download Favicon чтобы скачать копию фавиконки,
    • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

  • Сложный многофункциональный интерфейс

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

  • Нет возможности сохранять файлы в формате ICO

    Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

  • Нет возможности создавать анимационные Favicon в формате ICO

    Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

  1. открываем программу,
  2. кликаем Файл → Создать,
  3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
  4. для удобства рисования:
    • масштабируем изображение (клавиши CTRL + + и CTRL + -),
    • включаем сетку: (клавиши CTRL + '),
    • настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты…),
    • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Favicon Generator — Текст в Favicon

Почему favicon.io?

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

Начало работы с генератором значков

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

Создание простого фона

Далее выберите форму фона.Есть три простых Доступные формы: квадрат, круг и закругленные. Это самые общие формы, используемые для создания значка. Вы можете увидеть примеры эти формы с ProductHunt, Инди-хакеры и HackerNews.

Выбор шрифта для фавикона

Генератор favicon использует Google шрифты в котором доступно более 800 шрифтов.Это полезно для соответствия шрифту используется на вашем собственном веб-сайте. В будущем появится специальный страница шрифтов, чтобы помочь вам выбрать шрифт. В нем будут фильтры для языки, стили и часто используемые шрифты. Вы можете редактировать шрифт размер после выбора шрифта. Постарайтесь занять как можно больше места насколько возможно.

Пошив цветов

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

Favicon Generator — Генерация изображений favicon и HTML

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

Без изменений, сохраните эталонное изображение как есть.

Добавьте сплошной простой фон, чтобы заполнить прозрачные области. Добавьте поля и простой фон.

Фоновый цвет Совет: вы можете выбрать цвет прямо из предварительного просмотра.

Размер поля (для значка 96×96)

Примените небольшую тень, как в официальных приложениях Google (Gmail, Play Store, YouTube…).

Название приложения

Цвет темы Начиная с Android Lollipop, вы можете настроить цвет панели задач в переключателе.

Android Chrome M39 представляет собой манифест, который поможет вам уточнить поведение ссылки «Добавить на главный экран».

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

Автономный. В этом режиме Android Chrome придает открываемой странице более «родной» стиль. В частности, он позволяет указать начальный URL-адрес и ориентацию экрана. Он также удаляет панель навигации и дает вашему веб-сайту отдельную вкладку в переключателе задач.

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

Ориентация

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

Установить книжную ориентацию экрана.

Установить альбомную ориентацию экрана.

Современные версии

Android Chrome 39 и более поздние версии

Создавайте только рекомендуемые значки с высоким разрешением

Создать все задокументированные значки

Устаревшие версии

Android Chrome 38 и более ранние версии

Объявите значок в HTML-коде Если вы этого не сделаете, Chrome использует значок Apple Touch.

Если ваше основное изображение не подходит для Android, вы можете отправить изображение, разработанное специально для Android.

Выберите картинку для Android Chrome

Мастер изображение
Посвященная картина
Генератор Favicon

для ASP.NET Core

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

Без изменений, сохраните эталонное изображение как есть.

Добавьте сплошной простой фон, чтобы заполнить прозрачные области. Добавьте поля и простой фон.

Фоновый цвет Совет: вы можете выбрать цвет прямо из предварительного просмотра.

Размер поля (для значка 96×96)

Примените небольшую тень, как в официальных приложениях Google (Gmail, Play Store, YouTube …).

Название приложения

Цвет темы Начиная с Android Lollipop, вы можете настроить цвет панели задач в переключателе.

Android Chrome M39 представляет собой манифест, который поможет вам уточнить поведение ссылки «Добавить на главный экран».

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

Автономный. В этом режиме Android Chrome придает открываемой странице более «родной» стиль. В частности, он позволяет указать начальный URL-адрес и ориентацию экрана. Он также удаляет панель навигации и дает вашему веб-сайту отдельную вкладку в переключателе задач.

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

Ориентация

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

Установить книжную ориентацию экрана.

Установить альбомную ориентацию экрана.

Современные версии

Android Chrome 39 и более поздние версии

Создавайте только рекомендуемые значки с высоким разрешением

Создать все задокументированные значки

Устаревшие версии

Android Chrome 38 и более ранние версии

Объявите значок в HTML-коде Если вы этого не сделаете, Chrome использует значок Apple Touch.

Если ваше основное изображение не подходит для Android, вы можете отправить изображение, разработанное специально для Android.

Выберите картинку для Android Chrome

Мастер изображение
Посвященная картина

Как создать значок

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

1) Общие правила

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

2) Использование онлайн-генераторов.
Онлайн генератор Логастер — очень удобный сервис. Функционал сайта прост и интуитивно понятен, нет необходимости иметь какие-либо навыки работы с графическими редакторами. Перед созданием фавикона вам необходимо создать логотип.Но этот дополнительный шаг оправдан тем, что вы получаете не только возможность выбирать из множества изображений, сгенерированных службой, но также получаете фавикон в том же стиле, что и логотип.
Когда элементы созданы, вы можете легко загрузить файлы из своей учетной записи в Logaster и загрузить их на свой сайт.

3) Использование Photoshop (пропустите этот пункт, если вы не используете Photoshop)

Adobe Photoshop

— вероятно, лучшая альтернатива хорошо продуманному значку.Стандартный Photoshop не поддерживает .ico, поэтому первым делом необходимо загрузить подключаемый модуль Windows Icon Photoshop (его можно скачать здесь).

После того, как вы установили плагин, вы должны создать холст размером 64 x 64 пикселя и начать играть с ним. После того, как вы закончите разработку значка, вам нужно будет изменить размер изображения. Перейдите в меню «Размер изображения» и нажмите «Изменить размер изображения». Этот процесс гарантирует, что изображение не будет размытым при его уменьшении. Наконец, просто сохраните изображение 16 x 16 как «favicon.ico »Â.

4) Использование MS Paint и веб-инструментов

Favicons — это очень простые значки изображений, а это означает, что даже Microsoft Paint должно быть достаточно, чтобы создать красивый. Самый простой способ — создать изображение JPEG размером 32 x 32 пикселя с помощью Paint, а затем использовать онлайн-сервис «Favicon from Pics» Â для преобразования изображения JPEG в файл favicon.ico.

5) Загрузка файла favicon.ico

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

6) Замена жатки

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

Обратите внимание, что этот код будет работать, только если значок favicon.ico находится в корневом каталоге.

7) Тестирование

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

.