- Что такое favicon?
- Что такое формат favicon .ico (ICO)?
- Как подключить favicon?
- Размещение favicon.ico в корне сайта
- Как сделать иконку для сайта
- Как добавить иконку на сайт? Установка иконки на сайт
- Html код иконки для сайта
- Как установить фавикон на сайт?
- Как Яндекс работает с фавиконами?
- Программы: как сделать favicon
- Как поступаю я?
- Как быстро создать фавикон для сайта
- Самостоятельно создать мини-логотип
- Создать значок с помощью онлайн-сервиса
- Рисуем фавинкон: Favicon.by
- Как создать Favicon
- Формат фавикон
- Размер фавикон
- Зачем создавать фавикон
- Иконки для сайта: размер 16х16 или 32х32?
- О выборе картинки
- Создание иконки для сайта
- Зачем нужен фавикон?
- Фавикон = логотип?
Что такое favicon?
Favicon — это небольшой значок, который помогает идентифицировать страницу. Это концепция брендинга веб-сайта, о которой часто забывают. Они дополняют представление о UX в нескольких ключевых областях. В зависимости от браузера и контекста может появиться следующее:
Рядом с названием сайта во вкладке браузера
В списке закладок
Как значок запуска на главном экране устройства и на рабочем столе
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере создания веб-приложения
В той же адресной строке (я не уверен, но современные браузеры этого не делают. На вкладке браузера отображается значок)
Firefox отображает большой значок на главном экране и небольшой значок на вкладке
Фавикон традиционно ассоциировался с сайтом, но, поскольку он добавляется с помощью разметки, вы можете разместить свой фавикон на каждой странице, если хотите. Вы также можете настроить отдельный значок для всех запросов страниц.
Обычно браузеры кешируют значки. Поэтому, если вы собираетесь развлечься с несколькими значками на сайте, вам нужно отключить кеширование. Один из способов — добавить метку времени к URL-адресу значка.
Мы не тратим время на кеширование вашего браузера. Давайте будем простыми. Оказывается, что по мере увеличения количества платформ и клиентов, поддерживающих веб-страницы, возрастает сложность добавления небольшого значка, чтобы он отображался правильно и отвечал требованиям всех платформ.
Что такое формат favicon .ico (ICO)?
Прежде чем мы углубимся в подробности, давайте кратко рассмотрим формат ICO.
ICO — это формат изображения для отображения значков. Он берет свое начало от первой версии Windows — Microsoft Windows 1.0 — выпущенной в 1985 году. Фактически, это контейнерный формат для хранения одного или нескольких файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Далее была поддержка PNG.
В 1999 году Microsoft добавила в IE5 формат ICO для создания закладок и определения сайта — и появился значок.
Первоначально значок в сети был размером 16×16 пикселей, но со временем в файле ICO появилась поддержка различных размеров (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).
Возникает вопрос: если favicon.ico может хранить несколько измерений, какие из них следует использовать? Мы скоро вернемся к этому.
Как подключить favicon?
Часто термины «значок» и «значок» взаимозаменяемы. Однако значок не обязательно должен быть в формате ICO. Часто встречаются форматы GIF, PNG, JPG.
Начнем с самого старого и простого способа добавить значок на сайт.
Размещение favicon.ico в корне сайта
Изначально Microsoft разработала способ добавления значка на сайт для Internet Explorer 5. Для этого необходимо было сохранить файл значка в корневой папке сайта с именем favicon.ico. Это все, что нужно, без HTML. Большинство браузеров по-прежнему проверяют корневую папку на наличие файла favicon.ico.
Позже, когда значок стал частью стандартов HTML 4.01 и XHTML 1.0, для размещения значка было рекомендовано использовать тег ссылки. Рассмотрим этот способ.
Как сделать иконку для сайта
Есть несколько распространенных схем рендеринга. Используйте специальный плагин или программы Photoshop для создания значков, резких для рисования иконок для сайтов любой тематики.
Генераторы фавиконов онлайн
Самый доступный и простой способ — загрузить изображение в специальный конструктор. Автоматический генератор сам создаст иконку из предложенного вами изображения с учетом требований к фавиконам. Конечный результат будет выглядеть намного лучше, если вырезать донор в форме квадрата.
Фотошоп
Функциональная и профессиональная версия. Есть только одно ограничение: нужно уметь пользоваться фотошопом. Воспользуйтесь любым инструментом, вы можете внести изменения, чтобы получить оптимальный результат.
Фавиконы готовы бесплатно
Скачайте Яндекс.Изображения или воспользуйтесь другим понравившимся ресурсом поиска картинок. В строке поиска введите запрос «готовый фавикон». После нажатия кнопки «Поиск» выберите вариант из тысяч предложений. Простой, бесплатный и далеко не идеальный метод работы. Рекомендуем как временное — другой веб-мастер может скачать похожее изображение (или это уже было сделано и не раз).
Лучше потратить время и создать уникальный фавикон.
Как добавить иконку на сайт? Установка иконки на сайт
Первое, что нужно сделать — это добавить на сайт иконку в прямом смысле этого слова. Вам необходимо загрузить изображение значка, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Сделать это можно с помощью специальных программ, помогающих подключиться по FTP, или в файловом менеджере, через панель управления сайтом.
После того, как иконка была размещена на сайте, вам нужно сделать так, чтобы изображение появилось в браузере. Чтобы установить значок на сайт (просматриваемый в браузере), вам нужно написать специальный код и разместить его в нужном месте.
Html код иконки для сайта
Обратите внимание на тип изображения иконки, он должен быть прописан в «типе».
Например, если изображение значка в формате GIF, код будет выглядеть так:
Этот Html-код значка сайта должен быть размещен в произвольном месте между тегами и в файле страницы, на которой должен быть размещен значок.
Если вам нужен значок сайта в wordpress, то вам необходимо отредактировать файл header.php, в который вставлен такой же код.
Итак, теперь вы знаете, как самостоятельно установить иконку на сайт.
Как установить фавикон на сайт?
Самый простой способ — передать его разработчикам сайта. Они знают, что делать.
Некоторые системы управления контентом позволяют загружать значок в свой интерфейс.
В общем, вам нужно поместить его в корень сайта и добавить следующие строки после тега в исходном тексте страницы или шаблона:
Как Яндекс работает с фавиконами?
Значок не появится сразу в результате вывода PS. Новый фавикон индексируется Яндексом через 2-3 недели после того, как поисковые роботы нашли ссылки на изображение в коде. Роботы загружают значок в свою лабораторию, проверяют его и добавляют в общую базу данных значков через 10–14 дней.
Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса — сервер должен вернуть 200 OK. Внимательно проверьте, есть ли запрет на индексирование в robots.txt.
Программы: как сделать favicon
На первый взгляд, самый простой способ создать значок — просто переименовать файл в желаемый формат. Давайте посмотрим на пример. У вас есть файл favicon.png, но вам нужен файл favicon.ico. Надо просто переписать расширение и все. Но это не лучший вариант. Простое переименование приводит к тому, что значок отображается с ошибкой или вообще не отображается во многих браузерах. Не торопитесь и создайте иконку в специальном сервисе. Популярный:
- Realfavicongenerator.net — создавайте в сети значки разных размеров. Загрузить исходник 260 * 260 пикселей, желательно квадратный, но это не строгое ограничение. Затем выберите настройки для всех популярных операционных систем: Safari, Windows Phone, Android, iOS. Программируйте степень сжатия — возможно несколько вариантов. В результате вы получите набор иконок разного типа, код для вставки в адресную строку.
- Favicon.ru — здесь удобнее рисовать иконки от руки, есть большой выбор готовых решений (использовать как есть или редактировать). Одним щелчком мыши вы можете преобразовать файл в указанный формат. За дополнительную плату предоставляются профессиональные дизайнерские услуги.
- Pr-cy.ru: в сервисе много разделов, выбирайте фавиконы и обрабатывайте изображения под иконки сайта. Укажите формат, размер, сохраните результат.
- Favicon.cc — программа для создания фавиконов в формате ICO. Загрузите готовое изображение или нарисуйте самостоятельно, используя стандартный набор инструментов в графическом редакторе.
На каждом сайте есть инструкция, как сделать иконку самостоятельно. Если вам не нравятся текстовые инструкции, поищите видеоуроки на YouTube.
Как поступаю я?
Если позволяет логотип, использую уменьшенную версию, сначала кардинально упростил, чтобы мелкие детали не портили впечатление от иконки:
Если логотип достаточно сложный, я использую его узнаваемый фрагмент:
Или я создаю фавикон на основе первой буквы имени:
А иногда даже логотип не использую:
Как быстро создать фавикон для сайта
Иконку рекомендуется создавать в той же цветовой гамме, что и сам сайт. Так страницы будут выглядеть более гармонично. Не забывайте, что значок должен отражать суть вашего актива.
Не раскрашивайте слишком много деталей. Значок очень маленький (32×32 пикселя), поэтому маленькие тени вообще не будут видны читателям.
Вот несколько хороших примеров значков. Все они контрастные, используют условный логотип или символ, обозначающий тематику ресурса.
Самостоятельно создать мини-логотип
Открываем любой графический редактор, например Photoshop и творим. Если на значке есть текст, размер шрифта следует установить на 8-10 пикселей. В Photoshop есть специальный плагин для создания иконок: «Favicon.ico».
Здоровый! Если у вас не получается сохранить файл в формате .ico. Таким образом, вы можете сохранить его в формате PNG или JPEG, а затем найти любой конвертер изображений в Интернете. В поиске пишем «PNG в ICO Converter».
Создать значок с помощью онлайн-сервиса
Заходим в поисковик и пишем запрос «создать фавикон онлайн», выбираем один из множества сервисов. Ниже приведены некоторые из самых популярных.
Рисуем фавинкон: Favicon.by
Сразу после перехода на этот интернет-ресурс мы попадаем на страницу, где уже есть «пустое место» будущей иконки нужного размера.
Слева цветовая палитра, несколько кистей и другие полезные вещи. Рисуем простые символы, которые отражают суть нашего проекта и просто смотрим ниже, как значок будет отображаться на вкладке.
Получаем отличный результат и нажимаем «Скачать». Файл будет сохранен в нужном формате с правильным именем.
Как создать Favicon
1. Используйте пространство с умом
Не создавайте значок, который занимает так мало места, что пользователи его не увидят.
Многие компании используют свой логотип в качестве значка на своем сайте. Это отличная идея для брендинга. Но ваш логотип может не изменяться в размере и выглядеть некрасиво в виде значка.
В этом случае вам нужно создать новый значок, который будет занимать предоставленное пространство в пикселях, не переполняя его или не пустая.
2. Будьте проще
Создавая значок, будьте проще. Фавикон делает ваш бизнес узнаваемым, но не ошеломляет пользователя замысловатым дизайном. Единственная цель значка — укрепить ваш бренд для вашей аудитории и помочь им найти вас.
Если вы создадите значок со сложным дизайном, он будет выглядеть неаккуратно. Зрителям будет труднее запомнить ваш бренд и найти вашу страницу.
Лучше всего, чтобы он был простым, брендированным и узнаваемым.
3. Отражайте свой бренд
Убедитесь, что значок отражает ваш бренд. Люди используют этот значок, чтобы найти вашу компанию в Интернете и в закладках.
Яркий пример фавикона, отражающего деятельность компании.
Компания использует отпечатки лап как значок. Отличная ассоциация с их бизнесом и отражение бренда. Простой значок помогает людям быстро узнать вас.
Используйте правильные символы в вашем значке. В этом примере люди ассоциируют отпечатки лап с животными. Когда пользователь видит следы, он предполагает, что компания имеет какое-то отношение к животным.
Если вы используете цвет для своего значка, придерживайтесь цветов своей компании. Ваш значок должен быть того же цвета, что и ваш бренд, чтобы поддерживать узнаваемость бренда.
Формат фавикон
favicon.ico — формат значков, разработанный Microsoft. Все браузеры его поддерживают. Файл ico может содержать несколько изображений разного размера.
Значок находится в корневом каталоге вашего сайта. Чтобы убедиться, что он находится в нужном месте, введите домен своего сайта, а затем /favicon.ico в адресной строке браузера.
С появлением HTML 5 формат favicon.ico устарел. Несмотря на это, он по-прежнему поддерживается браузерами. Формат ico предназначен для более ранних версий IE.
Для других браузеров и более новых версий IE используйте формат значка PNG.
Какой формат подходит для мобильных устройств: смартфонов и планшетов?
Значки PNG, значки Apple Touch, плитки Windows 8 и browserconfig.xml.
Зачем так много?
Мобильные платформы более разнообразны, чем настольные браузеры. Размеры и разрешение экранов сильно различаются, доминирующей операционной системы нет. Поэтому при создании мобильного фавикона вы не сможете использовать единое универсальное изображение и рекламу в HTML-коде.
Размер фавикон
Значок появляется на вкладках браузера, в списках закладок, в виде ярлыка на рабочем столе пользователя и т.д. Поэтому важно знать правильный размер значка, чтобы он легко помещался в этих случаях и не выглядел размытым.
Возьми книгу
Следовательно, размер значка должен быть 48×48 пикселей или 144×144 пикселей. Независимо от используемого размера изображение будет изменено до 16×16 пикселей (пикселей).
Размер значка зависит от браузера, CMS сайта, используемого хоста, мобильных платформ и т.д. Например, WordPress требует 512 × 512 пикселей для значка, для других CMS требуется 300 × 300 пикселей.
- 96 × 96 пикселей — Google TV.
- 196 × 196 пикселей — Android Chrome.
- 228 × 228 пикселей — Побережье Оперы.
Размер значка для Apple Touch:
В результате мы получаем 9 изображений фавиконов разных форматов. Все ли они необходимы? Размер основного значка Apple Touch должен составлять 152×152 пикселей. Маленькие устройства смогут изменять его размер до желаемого размера.
Значок Apple Touch должен быть написан в HTML-коде. Устройства iOS точно соответствуют значку стиля Apple Touch: apple-touch-icon.
Размер для плиток Windows 8
Для Windows 8.0 и IE 10 написан следующий код:
Для Windows 8.1 и IE 11 создается файл browserconfig.xml
Microsoft рекомендует использовать большие значки: 270 × 270 пикселей
Зачем создавать фавикон
Рассмотрим преимущества фавикона:
- Favicon повышает узнаваемость бренда
Когда вы используете значок, отражающий ваш бизнес, люди лучше видят и запоминают компанию. В следующий раз, когда они увидят только значок, они сразу вспомнят вас.
- Favicon добавляет легитимности вашему сайту
Ваш сайт будет отображаться вместе с значком. Это позволяет сайту выглядеть профессионально в онлайн-пространстве.
- Favicon помогает с поисковой оптимизацией (SEO)
Favicon — важный компонент SEO. Это повысит узнаваемость бренда, побудит людей вернуться на ваш сайт и совершить конверсию.
- Favicon помогает найти вашу страницу, если пользователи добавили ее в избранное
Значок позволяет вашей аудитории легко найти ваш сайт, если они добавят его в закладки. Люди не всегда запоминают бренды, но узнают ваш бизнес по значку.
- Favicon помогает людям найти ваш сайт с несколькими открытыми вкладками
Люди часто открывают несколько вкладок браузера одновременно. Вместо того, чтобы нажимать на каждую вкладку, чтобы найти страницу вашей компании, они могут узнать ее по значку.
Добавив значок на свой веб-сайт, вы получите эти преимущества и расширите свой бизнес в Интернете.
Иконки для сайта: размер 16х16 или 32х32?
Размер иконки сайта обычно составляет 16х16 пикселей, также допускается использование размера 32х32. Но стоит учесть, что в браузере в любом случае изображение будет уменьшено и доведено до формата 16х16 пикселей, поэтому не стоит даже пытаться втиснуть туда высокохудожественное изображение, на экране оно все равно не будет видно маленькая иконка, разборчивые буквы и логотипы будут смотреться намного лучше.
О выборе картинки
Вы можете выбрать несколько изображений. Все зависит от личных предпочтений и ваших задач:
- Контраст. Если раньше какая-то иконка бросалась в глаза, так как мало сайтов ее ставили, то теперь все по-другому. Отличиться от конкурентов непросто, нужно экспериментировать. Самый простой способ привлечь внимание — установить яркую контрастную иконку. Это также может быть стрелка, указывающая на сайт.
- Тематический. Представительский ресурс (корпоративный сайт компании, интернет-магазин) наилучшим образом дополнит логотип бренда. Если весь логотип не подходит, используйте фрагмент, этот совет полезен для удлиненных, подробных и сложных изображений. Когда нет логотипа, стоит поискать изображение, которое будет ассоциироваться по цвету с тематикой сайта.
- Упрощенный. Фавикон на вкладках и в поисковой выдаче очень маленький. Детально рассмотреть изображение не получится, поэтому вы можете сделать снимок с минимумом деталей, состоящий из 2-3 оттенков. Главное в этом случае — лаконичность, уважение к теме, однозначное прочтение.
- Оригинал. Значок не будет выделять ваш актив в поисковой выдаче, если у конкурентов одинаковые изображения. Так что банальных и популярных фото лучше не брать.
Что лучше выбрать — смотрите сами. Можно использовать разные варианты, посмотреть, как они выглядят в браузере или на рабочем столе смартфона. Ваша задача — выделиться и привлечь внимание. Если вы видите, что один из значков выглядит лучше, не стесняйтесь размещать на нем такой значок.
Группировка недвижимости + подсказки с описанием 3500 руб. 3500 руб
Создание иконки для сайта
Есть несколько способов создать иконку для вашего сайта. Самый простой вариант — с помощью онлайн-сервисов создать иконку для сайта, в которую загружается квадратное изображение, из которого система автоматически формирует изображение выбранного размера в нужном формате. Один из таких сервисов для создания значков онлайн находится здесь.
Как еще создать иконку для сайта? Очень популярно создание иконки для сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются друг от друга инструментами, встроенными функциями и, конечно же, пользовательским интерфейсом. Некоторые программы для создания значков на сайте позволяют редактировать несколько изображений одновременно, другие позволяют использовать градиентную заливку или 3D-эффекты, а третьи имеют простой и интуитивно понятный интерфейс. Вы можете скачать программу для создания иконок либо здесь, выбрав одну из предложенных, либо выполнив поиск в поисковых системах:
- Создавайте иконки;
- Этюд икон.
Вы также можете сами нарисовать иконку для сайта в фотошопе. Эта универсальная программа для редактирования изображений позволяет рисовать практически все. Можно нарисовать логотип компании, написать буквы со спецсимволами и так далее, главное помнить, что нарисованный значок сайта должен как-то ассоциироваться с общим дизайном ресурса или его содержанием, потому что тогда он будет лучше запоминаться ваши посетители.
Чтобы сохранить нарисованный для сайта значок в Photoshop, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы еще не открыли для себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop не включает его. Но добавить его очень просто, достаточно скачать плагин ico-формата и распаковать его в папку C: ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» строка ICO (Windowsicon) (* .ICO) появится в списке доступных форматов).
Зачем нужен фавикон?
Маленькое изображение на карточке часто запоминается лучше, чем текст на ней. Поэтому, когда в браузере открыто много вкладок, значок помогает пользователю быстро найти нужную.
Но главное преимущество сайта со значком фавикона в другом: он увеличивает посещаемость сайта! Дело в том, что поисковик Яндекс показывает в поисковой выдаче такие значки:
Обнаруженные значки в текстовой «листе» Интернет-ресурсов неизбежно привлекают внимание пользователя. Специалисты по продвижению сайтов эмпирически доказали, что ссылки с фавиконом в Яндексе переходят чаще, чем ссылки без него.
Следовательно, на хорошем сайте должен быть фавикон.
Фавикон = логотип?
Чаще всего в качестве фавикона используется небольшая графическая часть логотипа:
Но этот способ подходит не всегда.
Во-первых, 16 x 16 — это очень маленький размер, и если знак достаточно сложный, его механическое уменьшение даст неудовлетворительный результат: на иконке будет невозможно что-либо различить.
Во-вторых, если логотип чисто шрифтовой или знак интегрирован в надпись, он не может быть вписан в квадрат значка.
Вот как популярные сайты решают эти проблемы:
Википедия использует первую букву своего названия вместо чрезмерно сложного знака. Facebook делает то же самое со своим шрифтовым логотипом.
На Youtube есть кнопка воспроизведения, которую можно узнать по логотипу как значок. Flickr использует два кружка в цветах логотипа — этот элемент можно увидеть на сайте в анимированном виде при загрузке большой фотографии.