Фавикон - это крутое маленькое изображение рядом с адресной строкой в браузере. Это то, что выделяет ваш сайт на вкладке закладок и может быть использовано для повышения узнаваемости бренда. Если у вас есть сайт, но вы никогда не задумывались о создании значка, вам следует пересмотреть свое решение. Разработчики программного обеспечения все чаще используют значки для различных аспектов своих приложений, например для значков на главном экране планшетов. К счастью, проектирование, создание и реализация значка - это то, что может сделать почти каждый, если он будет следовать правильным шагам.
Шаги
Метод 1 из 3: создание вашего фавикона
Шаг 1. Создайте значок, представляющий ваш веб-сайт
Тип вашего веб-сайта должен определять внешний вид вашего значка. Постарайтесь создать что-то, что будет соответствовать имиджу вашего бренда, будет узнаваемым и запоминающимся для людей. Ваш значок будет первым, что увидят люди, когда смотрят на вкладки в своем браузере, а также появится в закладках людей.
- Например, если у вас есть веб-сайт о еде, выбор значка с фруктами или овощами в качестве дизайна может сделать его более запоминающимся.
- Если ваш веб-сайт предназначен для юридической фирмы или инвестиционной компании, лучше всего подойдет традиционный и элегантный значок.
- Если ваш сайт ориентирован на молодежь, попробуйте создать игривый и красочный значок.
Шаг 2. Решите, нужен ли вам прозрачный фон
Если вы не укажете фон, он станет белым, что может не соответствовать вашему бренду. Прозрачный фон приобретет цвет браузера пользователя и в некоторых случаях будет выглядеть более рационально. В других случаях наличие цвета для фона заставит выделяться буквы или графику на переднем плане. Решите, что лучше всего подойдет для вашего дизайна, и помните об этом в процессе создания.
Самый простой значок - это квадрат 16x16 с цветом фона
Шаг 3. Создайте значок, который будет легко читать
Поскольку изображение значка, которое вы будете использовать, невелико, важно, чтобы вы могли рассказать о своем бренде, не вводя посетителей в заблуждение. Фавикон, который трудно читать, оставляет негативное впечатление и может вызвать у посетителя вопросы о качестве работы, которую вы можете предоставить. Слишком сложные изображения и логотипы не выглядят хорошо при уменьшении до 16x16 или 32x32 пикселей.
- Если ваш существующий логотип слишком сложен, вы можете использовать тактику, чтобы упростить его, чтобы его можно было узнать по размеру значка. Используйте инициалы вместо полного названия компании или создайте простой значок вместо изображения.
- Если у вас уже есть простой логотип, вы можете уменьшить изображение и установить его в качестве своего значка. Возможно, вам придется изменить его перед преобразованием в файл значка.
- Вы также можете использовать изображение объекта, которое описывает общую тему вашего сайта.
Шаг 4. Создайте эстетически приятный фавикон
Структура вашего фавикона называется его формой. Фавиконы обычно принимают форму круга или квадрата. Когда вы разрабатываете свой значок, обычно лучше, если он может вписаться в одну из этих основных форм, потому что формы произвольной формы часто могут запутаться или запутаться при разрешении 16x16 пикселей. Еще один важный аспект вашего дизайна - эстетическое единство. Эстетическое единство включает детали и размеры различных компонентов в вашем фавиконе, а также то, как ваш фавикон сбалансирован. Чем более однородными будут детали, тем более связным будет выглядеть ваш значок. Например, использование разных типов или размеров шрифтов в вашем значке не радует глаз и может сделать ваш значок запутанным или беспорядочным.
- Еще один пример эстетического единства - сохранение закругленных углов во всех фигурах вашего значка.
- Хорошим примером значка, изменившего форму, является значок Google. Он превратился из квадрата в круг.
Шаг 5. Используйте цвета, соответствующие вашему бренду
Когда вы создаете свой значок, вы должны создать его с глубиной цвета 8 бит (256 цветов) или 24 бит (16,7 миллиона цветов), так как это будет работать в современных браузерах. Убедитесь, что выбранные вами цвета можно найти в другом месте на вашем веб-сайте или каким-либо образом связаны с вашим брендом. Значок с цветами, которых нет на вашем веб-сайте, логотипе или приложениях, не запомнится, и люди не смогут связать значок с вашим брендом.
- Некоторые творческие варианты использования цвета значков включают GitHub, который меняет цвета в зависимости от состояния вашей системы, и Trello, который изменяется в зависимости от цвета вашего фона.
- Чаще всего в значках используются красный и синий цвета.
Шаг 6. При разработке значка учитывайте свою аудиторию
Помимо идентификации вашего бренда, ваш значок должен выглядеть привлекательно для ваших посетителей. Люди с разными вкусами, интересами и социальными нормами будут смотреть на разную иконологию с разных точек зрения. В нашем обществе существуют культурные различия, которые могут сбить с толку или оттолкнуть аудиторию, которую вы пытаетесь привлечь.
Например, Mac Os X использует штамп, который является универсальным символом для почты. Использование почтового ящика не будет таким эффективным, потому что почтовые ящики различаются в разных частях мира
Шаг 7. Узнайте мнение друзей и коллег
Хотя это не невероятно графически насыщенный значок, он является важной частью вашего бренда. Например, подумайте о своих любимых веб-сайтах, таких как Twitter, Gmail, Facebook или wikiHow, и о том, насколько вы ассоциируете значок с брендом. Если вы не разбираетесь в дизайне или не знаете, какой дизайн выбрать для своего сайта, посоветуйтесь с друзьями, которые разбираются в дизайне или работают с графическим дизайном.
- Спросите в кругу друзей, может ли кто-нибудь бесплатно дать совет по дизайну.
- В более крупных компаниях есть штатные графические дизайнеры, которые могут создать изображение значка.
Метод 2 из 3: создание фавикона
Шаг 1. Используйте программное обеспечение для редактирования фотографий, чтобы создать свой значок
Вы можете использовать программное обеспечение для редактирования фотографий, такое как Adobe Photoshop или Illustrator, чтобы создать изображение для своего значка. Эти программные приложения также позволяют изменять размер и экспортировать изображение в нужном формате. Некоторое программное обеспечение позволяет вам создать свой значок вручную.
- Существуют также специальные программы для редактирования значков, которые вы можете найти в Интернете.
- Воспользуйтесь поисковой системой и введите «редакторы значков».
- Сделайте размер холста 512x512 пикселей, потому что это число разбивается на наиболее применимые размеры значков и по-прежнему достаточно велико, чтобы вы могли эффективно редактировать.
- Другое популярное программное обеспечение для редактирования фотографий включает GIMP, PhotoScape и Paint. NET.
- При использовании этого программного обеспечения вы не сможете напрямую редактировать файлы.ico, но вы можете использовать файлы.png,-j.webp" />
Шаг 2. Измените размер и сохраните значок
32x32 пикселей - это размер элементов рабочего стола Windows, а 16x16 пикселей - это размер значков на вкладке вашего браузера. После того, как вы создадите свой значок в большем формате, важно уменьшить его размер, чтобы вы могли видеть, как он будет выглядеть в браузерах людей. Если он нечитабелен или не эстетичен, начните заново с оригинального дизайна. Подумайте о платформах, на которых, скорее всего, будет использоваться ваш веб-сайт или приложение, а затем создайте значок для всех ваших баз.
- Важно отметить, что разное оборудование и программное обеспечение используют разные размеры значков.
- Некоторые другие размеры значков включают 57x57 пикселей для стандартного домашнего экрана iOS, 72x72 пикселей для iPad, 96x96 пикселей для Google TV, 128x128 пикселей для Интернет-магазина Chrome и 195x195 пикселей для быстрого набора Opera.
- Если вы хотите охватить все свои базы, вы можете создать версии своего значка в каждом из этих размеров.
- Сохраняйте отдельные версии своего фавикона, чтобы не потерять проделанную работу.
Шаг 3. Объедините ваши файлы с помощью конвертера
Самое замечательное в файлах.ico заключается в том, что вы можете объединить более одного файла для его создания. Это полезно, потому что разным браузерам и программному обеспечению требуется значок значка разного размера. Чтобы ваш значок выглядел хорошо на всех платформах, конвертируйте файлы с помощью онлайн-конвертера. Введите «конвертер иконок» в свою любимую поисковую систему, чтобы найти для этого бесплатные онлайн-приложения. Сохраните объединенный файл как «favicon.ico».
- Вы также можете использовать такую программу, как GIMP, которая имеет встроенную функцию, или загрузить плагин под названием ICO FORMAT для Adobe Photoshop.
- Создайте новую папку, чтобы вы могли хранить новые значки или незавершенные работы.
- Введите в поисковой системе «.ico converter» или «favicon generator», чтобы найти различные инструменты, которые вы можете использовать.
Метод 3 из 3: реализация вашего Favicon
Шаг 1. Загрузите свой значок, если вы используете редактор веб-сайтов
Многие редакторы веб-сайтов имеют встроенную форму, которая позволяет автоматически загружать значок на свой веб-сайт. Если вы пользуетесь встроенным редактором веб-сайтов, поищите варианты с надписью «Загрузить значок» или «Добавить значок» в меню настроек вашего веб-сайта. Выберите файл favicon.ico и загрузите его на свой сайт.
Если вы не можете найти место для загрузки своего значка в редакторе веб-сайта, вам придется сделать это вручную
Шаг 2. Загрузите файл в корневой каталог вашего сайта
Если ваш веб-сайт поддерживает протокол передачи файлов или FTP, вы можете использовать свой FTP-клиент для загрузки нового файла favicon.icon в свой корневой (индексный) каталог. В противном случае вам придется перейти на страницу своего веб-хостинга и загрузить изображение вручную. Не забудьте заменить существующий файл favicon.ico новым.
Шаг 3. Добавьте файл в шапку
Найдите место, где вы можете получить доступ к файлам PHP и CSS для вашего сайта. Перейдите в файл header.php вашего сайта и отредактируйте его. Под типом тега"
-
. Это должно связать ваш сайт с вашим значком.
Поскольку вы используете PHP, это означает, что все сайты, использующие ваш файл заголовка, теперь будут иметь такой же значок
Создайте свой собственный значок Favicon Шаг 14 Шаг 4. Обновите ваш браузер
После того, как вы закончите загрузку значка, вы можете обновить свой браузер, чтобы увидеть новое изображение рядом с адресной строкой. Чтобы перейти непосредственно к изображению обновленного значка, введите «https://www.yourdomain.com/favicon.ico».
- Если ваш значок не отображается изначально, возможно, вам придется сбросить кеш браузера.
- Чтобы очистить кеш, перейдите в настройки браузера и удалите временные интернет-файлы, файлы cookie и историю.
