Favicon готовые: Коллекция favicon.ico (фавикон) на Favicon.by

Фавикон для сайта — ИТ Шеф

Статья, в которой рассмотрим, как сделать правильный favicon для сайта.

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Главная страница сайта inkscape.org

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

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

1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.Изображение двери, найденное через поиск «Google Картинки»
2. Открываем программу Inkscape и создаём в ней новый файл.
3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).Векторизованный растр двери
5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.Выравнивание изображения по центру содержимого страницы
6. Сохраняем файл (например, под именем door. svg).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Главная страница сайта realfavicongenerator.net

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

Настройка фавиконки сайта для iOS (Safari)Настройка иконки favicon для Android (Chrome)Настройка фавиконки сайта для операционных систем Windows 8 и 10Настройка favicon для закреплённых вкладок браузера SafariНастройка параметров генерации favicon для сайта

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

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

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

1. Скачивание сгенерированного пакета (favicons.zip).Содержимое пакета favicon (форматы png, svg, ico)
2. Распаковка его в корень сайта
3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:

   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" href="/favicon-32x32. png">
   <link rel="icon" type="image/png" href="/favicon-16x16.png">
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку «Check Favicon».

Валидация фавиконки сайта

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

Процесс индексации иконки у разных поисковых систем занимает разное время. Например, у Яндекса данный процесс может осуществляться несколько месяцев.

С помощью следующих URL можно проверить, как поисковые роботы видят иконку фавикон у сайта:

• Яндекс — https://favicon.yandex.net/favicon/имя_домена
• Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

что такое и как сделать для сайта

Инструкции

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

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

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

Фавикон (FAVoritesICON) — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.

Традиционно фавикон используется:

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

Пример расположения фавикона

Зачем сайту нужен фавикон

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

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

1. Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или любителя открывать более 50 вкладок. А значит, что благодаря фавикону, вы сможете упростить процесс возвращения на сайт, к примеру, увидев нужный значок, пользователь легко найдёт нужную страницу.
2. Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.
3. Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него можно, но с ним картина завершена и продумана.
4. Улучшите SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

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

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

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

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

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

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

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

Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop.

1. В меню выбора создайте новый файл размером 64х64 пикселя (на хосте покрупнее будет просто удобнее работать). Далее вставьте свой логотип в документ, добавьте или уберите детали. 
2. После внесения изменений, в папке «Изображение» найдите блок «Размер изображения», чтобы изменить его на 16х16 пикселей. 
3. Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось. Если результат вам нравится, нажмите «Сохранить как файл». 

Если не хочется возиться с программами, можно воспользоваться онлайн-сервисами. Например, Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.

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

А если нет возможности нанять профессионала, но и оставлять сайт без картинки не хочется, можно скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности и узнаваемости бренда можно забыть.

⌘⌘⌘

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

А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.

Создать сайт

Редакция

29 июня 2022

123

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

Если вы чем-то похожи на нас, у вас редко бывает открыто менее десяти (ладно, 20 ) вкладок одновременно. Но когда так много всего в пути — так много всего, что можно посмотреть, и так много сайтов, конкурирующих за одно и то же пространство браузера, — становится трудно перемещаться между ними.

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

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

Так что же такое , , фавикон, и зачем он нужен вашему бизнесу? Более того, как вы можете его создать и где?

Давайте узнаем.

Что на этой странице

• 1 Что такое фавикон? Перейти к разделу
• 2 Почему фавикон важен для моего онлайн-бизнеса? Перейти к разделу
• 3 Как создать значок Favicon Перейти к разделу
• 4 Онлайн-генератор Favicon: лучшие 5 Перейти к разделу

1

Следующий шаг

Что такое Favicon?

Фавикон (также известный как значок ярлыка, значок вкладки, значок веб-сайта, значок URL-адреса или значок закладки) — это небольшое изображение, обычно размером 16 x 16 пикселей, представляющее веб-сайт в браузере. Это может быть на вкладке, в списке закладок, в результатах интернет-истории или в строке поиска.

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

Для быстрой демонстрации взгляните на верхнюю часть экрана и на открытые в данный момент вкладки. Какие образы вы там видите?

Вот мой. В крайнем левом углу сразу узнаваемый логотип Gmail, затем синяя страница Документов Google. Далее вы видите наш логотип WBE (тада!), а также голову льва Премьер-лиги (потому что мне нужно следить за футбольными счетами, пока я пишу!).

Фавиконы также полезны при пролистывании панели закладок:


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

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

2

Следующий шаг

Почему фавикон важен для моего онлайн-бизнеса?

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

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

Хорошая иконка:

• Повышает узнаваемость вашего бренда и повышает уровень узнаваемости бренда
• Помогает стимулировать повторные посещения и повышает лояльность к бренду оптимизация) выгоды за счет повышения удобства использования и удобства сайта

3

Следующий шаг

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

• №1. Используйте существующий логотип или создайте новое изображение Перейти к разделу
• #2. Преобразуйте Image Jump в раздел
• #3. Загрузите свой новый фавикон на свой веб-сайт Перейти к разделу

Итак, теперь вы знаете что такое фавикон и почему они важны. Но как именно вы оборудуете свой сайт одним из них?

№1. Используйте свой существующий логотип или создайте новое изображение

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

Когда у вас есть это изображение — вы можете использовать фоторедактор, такой как Photoshop или Canva, — вам нужно сохранить его (форматы .png или .jpg лучше всего подходят) в идеальном размере 64 x 64 пикселей. Это облегчит редактирование, и вы сможете уменьшить его до идеального размера значка (16 x 16 пикселей) позже.

Тсс… ты уже создал логотип своей компании? Если нет, не расстраивайтесь — наше руководство по созданию логотипа поможет!

#2. Преобразование изображения

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

№3. Загрузите свой новый значок на свой веб-сайт

Затем вам нужно будет загрузить свой значок (в формате .ico) в корневой каталог вашего сайта, чтобы браузеры могли найти ваш файл значка и соответствующим образом отобразить изображение.

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

com/favicon.ico» />

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

4

Следующий шаг

Онлайн-генератор фавиконок: Топ 5

• #1. Favicon.io Перейти к разделу
• #2. RealFaviconGenerator.net Перейти к разделу
• #3. Favicon-generator.org Перейти к разделу
• #4. Favic-o-Matic Перейти к разделу
• #5. Favicon.cc Перейти к разделу

Онлайн-генераторы значков позволяют загружать изображения и превращать их в значки. Более того, некоторые из этих инструментов действуют как редактор изображений 9Генератор фавиконок 0003 и  – это означает, что вы можете создать свой логотип, а затем превратить его в красивый фавикон.

Вот наша пятерка лучших.

№1. Favicon.io

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

#2. RealFaviconGenerator.net

RealFaviconGenerator.net позволяет загрузить существующее изображение или нажать кнопку «Демо со случайным изображением» для быстрой и эффективной демонстрации. Удобно, что вы также можете использовать его функцию «Проверить свой значок», чтобы просмотреть, как выглядит существующий значок вашего сайта, и определить возможности для улучшения.

#3. Favicon-generator.org

С базовым стилем и рекламой, загромождающей его интерфейс, Favicon-generator.org выглядит немного более «грубым и готовым», чем первые два инструмента, которые мы уже упоминали. Но это не делает его менее эффективным – вы можете создавать значки избранного для Интернета, Android, Microsoft и iOS и даже сохранять исходные размеры изображения.

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

#4. Favic-o-Matic

Выбор хипстеров, Favic-o-Matic отличается причудливым продуманным дизайном, броским текстом и лозунгами, добавляющими нотку веселья. Он прост в использовании, но не лишен функциональности: его «расширенные настройки» позволяют изменять размер изображения, цвет фона и URL-адрес RSS-канала. Он также делает свою работу быстро, хотя непрерывная медийная реклама может немного раздражать!

#5. Favicon.cc

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

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

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

Фавиконы должны иметь размер 16 x 16 пикселей, когда они загружаются на ваш сайт. Тем не менее, мы рекомендуем сначала создать их немного большего размера (64 x 64 пикселя подойдет), чтобы упростить процесс редактирования. Вы можете уменьшить их позже!

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

• Favicon.io
• RealFaviconGenerator.net
• Favicon-generator.org
• Favic-o-Matic
• Favicon.cc

Эти инструменты просты и, как правило, бесплатны. использовать тоже. Иди проверь их!

советов, как сделать ваш сайт заметным — Go WordPress

Фавикон, сокращение от «любимый значок», представляет собой значок размером 16×16 пикселей (стандартный размер фавикона), который используется для представления веб-сайта или веб-страницы в веб-браузерах. Даже если вы не совсем уверены, что это такое, вы, вероятно, видите это каждый раз, когда просматриваете Интернет!

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

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

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

Зачем использовать фавикон

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

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

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

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

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

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

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

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

Размер фавиконки

Далее вам нужно определить размер фавиконки, которая вам нужна. Традиционно фавикон представлял собой значок размером 16 × 16 пикселей с типом файла ICO. Однако теперь более стандартным является прозрачный PNG размером 32 × 32 пикселя. Это связано с тем, что фавиконы становятся больше с увеличением приложений Интернета.

iOS позволяет добавить сайт на главный экран, сделав его похожим на приложение. Это называется значком Apple Touch. Для этого вашему фавикону понадобится значок размером до 180×180 пикселей. Точно так же Windows позволяет добавлять веб-страницы в виде значков ярлыков на рабочем столе или панели задач, размер которых может достигать 310 × 150 пикселей.

Вы всегда должны проверять, где может отображаться ваш значок, и оптимизировать его соответствующим образом. Например, если большинство посетителей вашего сайта используют мобильные устройства, вы должны убедиться, что у вас создан правильный размер фавикона. Если большинство ваших посетителей используют устройства iOS, такие как iPhone или iPad, вы захотите создать значки Apple Touch. Также важно, чтобы ваш фавикон был прозрачным в формате PNG. Таким образом, он не будет выглядеть блочным на вкладках браузера.

Со всеми перечисленными размерами, какой выбрать при создании фавиконки? На самом деле, ни один из них! Рекомендуемый размер фавикона 512×512 пикселей — лучший выбор. Это гарантирует, что все остальные размеры будут обработаны, как только вы загрузите свою фавиконку.

Советы по созданию великолепного фавикона

Теперь, если вам интересно, как мне создать запоминающийся фавикон? – не волнуйтесь!

Вот несколько практических советов, которым вы можете следовать:

1. Будьте проще. Помните, у вас не так много места для игр!
2. Сделайте его узнаваемым. Попробуйте разместить свой бренд на небольшом пространстве, с которым вам приходится работать. Если вы привыкли использовать логотип, который не является крошечным квадратом, попробуйте создать что-то, что напоминает этот логотип, вместо того, чтобы без необходимости пытаться втиснуть весь оригинал.
3. Используйте как можно меньше текста или надписей. Помните, что фавикон — это маленькое изображение. Даже если на вашем обычном логотипе написано название вашей компании, постарайтесь, чтобы оно было кратким в вашем фавиконе.
4. Подумайте о цвете. Различные веб-браузеры (например, Google Chrome, Android Chrome, Safari и Internet Explorer) используют разные цветовые палитры. И, с ростом популярности ночного режима , вы захотите убедиться, что ваш фавикон отлично выглядит независимо от браузера пользователя. Все, что вам нужно сделать, это убедиться, что значок выглядит хорошо и выделяется на не менее цветов на белом, сером и черном фоне.

Фавикон WordPress.com, например, использует только простая, узнаваемая буква W. Это заставляет пользователя думать о W ordPress, но занимает не так много места, как все слово. Идеально подходит для фавикона!

Создав значок, экспортируйте его как favicon.png или favicon.ico.

Загрузка фавикона на WordPress.com

Теперь вы создали и экспортировали изображение фавикона, осталось загрузить его на сайт WordPress.com. Это возможно без возни с кодом HTML или CSS или тегами href. Вот что вам нужно сделать:

Войдите в свою учетную запись WordPress.com и перейдите на страницу Мой сайт → Настройки . На вкладке Общие нажмите кнопку Изменить .

Вы будете перенаправлены в настройщик WordPress. Нажмите кнопку Select site icon , чтобы продолжить. Далее вы увидите свою медиатеку на экране. Отсюда вы можете либо выбрать существующее изображение, либо загрузить новое. Помните, что рекомендуемый минимальный размер фавикона — 512×512 пикселей.

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

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

Поскольку значок сайта (favicon) должен быть квадратным, вам будет предложено обрезать изображение по своему вкусу. Используйте угловые маркеры, чтобы изменить размер ограничивающей рамки или переместить рамку, перетащив ее.
Когда вы закончите обрезку, нажмите Готово , чтобы продолжить.

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

Чтобы удалить значок, вы можете просто перейти на Мой сайт → Настройки и на вкладке Общие нажать на кнопку Удалить кнопку .

Узнайте, как создать свой сайт с помощью WordPress.com, из нашего видеоурока.

Заключение

Фавикон — это неотъемлемая часть идентичности вашего бренда, поэтому важно, чтобы вы сделали это правильно. Он отображается на вкладке браузера, панели закладок, истории браузера, строке URL-адреса и строке поиска, а также в результатах мобильного поиска. Создав фавикон в прозрачном формате PNG или ICO, вы можете загрузить его на свой сайт WordPress, выполнив несколько простых шагов без использования кода HTML или CSS или тегов href.

Напомним, вот несколько советов, которые следует учитывать при создании фавиконки:

• Будьте проще
• Сделайте его узнаваемым
• Используйте как можно меньше текста или надписей
• Подумайте о цвете

Готовы создать свой веб-сайт и добавить на него фавиконку? Зарегистрируйтесь на WordPress.com сегодня!

Вам также может понравиться: 5 инструментов, которые помогут вам найти бесплатные иконки для вашего сайта

Нравится:

Нравится Загрузка.