Конвертирование графических файлов в значки формата ico онлайн

Что такое favicon

Favicon (или фавиконка) — это специальный значок, который используется для отображения в некоторых элементах браузера. Каждый отдельный веб-ресурс имеет (или должен иметь) свою отдельную фавиконку, которую, к примеру, можно увидеть рядом с адресом сайта в названии вкладки браузера, в поисковой выдаче и в списке избранных сайтов. Именно из-за подобного использования в качестве символа для закладки и родилось название этого значка — FAVourite ICON, то есть иконка для избранного, так как изначально фавиконка использовалась только для этого.
В настоящее время фавиконка — это, во-первых, мини-символ сайта, который повышает узнаваемость ресурса; во-вторых, ее наличие положительно влияет на положение сайта в поисковой выдаче.

Конвертация PNG в ICO

PNG или переносимая сетевая графика — это формат изображения, который содержит растровое изображение, сжатое без потерь. Этот формат в основном используется для сохранения изображений в Интернете. Профессионалы в области графики обычно используют этот формат для сохранения своей работы и передачи ее без потери качества. Файл ICO содержит значок, который используется для программы, папки или файла. В этом формате хранится одно или несколько изображений различных размеров, поэтому его можно соответствующим образом масштабировать в зависимости от использования. Все значки в Windows сохраняются в формате ICO, а сохраняемые изображения будут иметь размер от 16 × 16 до 256 × 256 пикселей.

Есть несколько методов, с помощью которых вы можете конвертировать один из другого. Ниже мы предоставили несколько полезных методов.

Изменяем меню “пуск”

Следующий вариант развития событий – это изменение иконки “Пуск”. Для этого потребуется специализированный софт. Например, программа Windows 7 Start Button Changer. С ее помощью воплощение задумки в жизнь отнимет всего несколько минут.

Действовать предлагается следующим образом:

1. Запустить Windows 7 Start Button. Необходимо начать работу с утилитой от имени администратора.
2. Выбрать в появившемся меню изображение, которое будет отображаться в меню “Пуск”.
3. Осуществить подтверждение операции.

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

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

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

Выделяет сайт в выдаче

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

Сайт без фавикона в выдаче среди прочих

С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе

Упрощает поиск нужного сайта

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

Закладки в Google Chrome

Избавляет от ошибки в лог-файлах

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

К примеру, такую:

С чего начать? Первым делом разбираемся с расширениями

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

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

Основные форматы под favicon и их особенности

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

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

.SVGПерспективный, но в настоящее время малоподдерживаемый векторный формат изображений. Его основное преимущество — возможность вариативного разрешения под нужды конкретного интерфейса. Настраивается через CSS. Масштабирование SVG-фавиконов происходит без потери качества. Данный тип файлов не поддерживается в старых десктопных браузерах и на некоторых Android-платформах.

Отдельно отметим, что иконки можно загружать и в любых других форматах, например, .jpeg, .bmp или. gif, но на практике этого стараются не делать из-за все той же проблемы — отсутствия широкой поддержки. Узнать, какие именно расширения отображают те или иные браузеры, помогают специальные инструменты, например, сервис caniuse.com.

Благодаря сервису Сan I Use мы видим, что у PNG-фавиконов поддержка в браузерах заметно шире, чем у расширения .SVG

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

Размеры иконок

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

рекомендует использовать размеры иконок, кратные 48 пикселям: 48×48, 96×96, 144×144. Для SVG-файлов кратность не имеет значения, поскольку, как было упомянуто выше, у них вариативное разрешение.

В браузерах загруженный значок будет ужат до размера 16×16 пикселей. Поэтому вы обязательно должны убедиться, насколько читаем ваш мини-логотип в таком масштабе, но загружать столь маленький размер файла не нужно (по крайней мере, на этом сделан акцент в справке Google). Минимальное разрешение — 48×48 пикселей.

Яндекс дает следующие рекомендации: оптимальный размер —  120×120, также допускается использование изображений 32×32 и 16×16 пикселей. Рекомендуемый формат — SVG, как гарантирующий максимальную четкость и заметность. Но это необязательно. По желанию можно использовать любой вышеописанный тип расширения.

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

Создание ico-контейнера не требует каких-либо специальных навыков. Для этого используют бесплатные онлайн-сервисы. Достаточно загрузить исходное изображение и указать перечень нужных размеров — ico-файл будет готов к скачиванию через несколько секунд. Чем создавать такие контейнеры — рассказываем дальше.

Icon library

Библиотека значков — это способ установки иконок Windows. Обычно это исполняемый 16-или 32-разрядный двоичный файл, имеющий расширение .ICL. Он имеет файлы значков, используемые как иконки. Windows Vista и более поздние версии не поддерживают просмотр иконок ниже 16-разрядных.

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

Отдельно стоит отметить значки, содержащие только ссылки на приложения или данные, известные как ярлыки. Они тоже в настоящее время обозначаются файлами формата ICO. Чем же еще примечательна эта разновидность файлов?

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

Что такое ICO простыми словами? на News4Auto.ru.

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

Оптимизация пикселей

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

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

Как уже упоминалось, идеальным является угол 45° (безусловно, после прямых линий), потому что пиксели располагаются относительно друг друга строго по диагонали. То же самое можно сказать об углах и кривых: чем математически более точно они выполнены, тем лучший результат вы получите при сглаживании.

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

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

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

Фавиконы сайтов на экране смартфона

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

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

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

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

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

Как изменить иконку файла

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

Чтобы поменять значок для определенного типа файлов

в Windows XP1

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

см. рисунок2

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

3

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

Чтобы поменять значок для определенного типа файлов

в Windows Vista / 7 / 8

понадобится специальная утилита, поскольку необходимые штатные средства в этих версиях Windows отсутствуют.

Утилита называется

Default Programs Editor

Восстановление старых изображений

А как поменять иконки в Windows 7 обратно? Нередко пользователи модернизируют операционные системы, а потом не знают, как вернуть начальные параметры “Виндовс”. Справиться с поставленной задачей иногда бывает непросто. Особенно если не знать, где хранятся архивы с системными (начальными) иконками.

Стандартные картинки можно отыскать по следующим путям:

• C:WindowsSystem32shell32.dll;
• C:WindowsSystem32imageres.dll;
• C:WindowsSystem32ddores.dll.

Именно по этим адресам можно найти стандартные иконки “Виндовс”. Восстанавливаются они по представленным ранее принципам.

Важно: если не хочется искать соответствующие архивы картинок, можно просто кликать в меню “Изменить иконку. ” по кнопке “Восстановить умолчание”

Тогда параметры операционной системы будут восстановлены.

Экспорт (сохранение) иконки в нужном формате

Это всё, но осталось правильно сохранить. В «Gimp 2.8» нужно экспортировать, это можно сделать нажав на верхнем баре кнопку «Файл» и выбрав «Экспортировать».

Открывается окно с сохранением работы

Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте

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

То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.

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

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

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

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

Количество битов

Классический формат растрового изображения BITMAPINFOHEADER поддерживает его сохранение с 32 битами на пиксель. При записи в качестве автономного файла BMP его разделение не используется. Однако когда эти же данные хранятся внутри файла ICO или CUR, Windows XP (первая версия «Виндовс» для поддержки формата файлов ICO/CUR с более чем 1 бит прозрачности) и выше интерпретирует этот байт как альфа-значение.

Хотя в технической документации Microsoft указано, что это значение должно быть нулевым, кодировщик значков, встроенный в .NET (System.Drawing.Icon.Save), устанавливает его как 255. Похоже, что операционная система на практике полностью игнорирует это значение.

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

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

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

История

Иконки, представленные в Windows 1.0, имели размер 32 × 32 пикселя и были монохромными. Поддержка 16 цветов была введена в Windows 3.0 .

Win32 представила поддержку хранения изображений значков до 16,7 миллиона цветов (TrueColor) и размером до 256×256 пикселей. Windows 95 также представила новый механизм Device Independent Bitmap (DIB). Тем не менее, 256 цветов было глубиной цвета значков по умолчанию в Windows 95. Можно было включить значков, изменив значение Shell Icon BPP в реестре или купив Microsoft Plus! для Windows 95. Значение размера значка оболочки позволяет использовать значки большего размера вместо значков 32 × 32, а значение размера значка оболочки небольшого размера позволяет использовать пользовательские размеры вместо значков 16 × 16. Таким образом, в одном файле значков можно хранить изображения любого размера от 1 × 1 до 256 × 256 пикселей (включая неквадратные размеры) с 2 (редко используются), 16, 256, 65 535 или 16,7 миллионами цветов; но оболочка не могла отображать значки очень большого размера. Область уведомлений на панели задач Windows по умолчанию была ограничена 16 цветными значками до Windows Me, когда она была обновлена ​​для поддержки значков с высоким цветом.

В Windows XP добавлена ​​поддержка (16,7 миллиона цветов плюс прозрачность альфа-канала) изображений значков, что позволяет рисовать в значке полупрозрачные области, такие как тени , сглаживание и эффекты стекла. Windows XP по умолчанию использует значки размером 48 × 48 пикселей в проводнике Windows . Windows XP можно заставить использовать значки размером до 256 × 256, изменив значение размера значка оболочки, но это приведет к увеличению масштаба всех значков 32 × 32 в оболочке. Microsoft рекомендовала для Windows XP только значки размером до 48 × 48 пикселей. Windows XP может уменьшить размер значков 256 × 256 и более, если более близкий размер изображения недоступен.

Windows Vista добавила в проводник Windows вид значков размером 256 × 256 пикселей, а также поддержала сжатый формат PNG . Хотя сжатие не требуется, Microsoft рекомендует сохранять все значки размером 256 × 256 в файлах ICO в формате PNG, чтобы уменьшить общий размер файла. Проводник Windows Vista поддерживает плавное масштабирование значков до нестандартных размеров, которые отображаются на лету, даже если изображение такого размера отсутствует в файле значков. Оболочка Windows Vista добавляет ползунок для увеличения и уменьшения размеров значков. Пользователям, использующим более высокое разрешение и режимы с высоким разрешением, рекомендуется использовать значки большего формата (например, 256 × 256).

Особенности и значение favicon.ico

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

Решив создать favicon.ico, иконки для сайта, вы получаете возможность придать вашему
ресурсу индивидуальность, сделать его более узнаваемым и популярным. Но
как
сделать иконку favicon.ico для сайта?
Какую прогу использовать, чтобы
конвертировать BMP, PNG в иконку ICO онлайн?

15 копий слоя

После создания картинки нужного нам размера, нужно откопировать слой 15 раз, то есть что бы было 15 одинаковых слоёв в панели «Слои-Кисти». Да, это не опечатка, именно 15, потому что мы будем создавать качественный «.ico» файл.

Для начала я объясню, что мы будем потом делать с этими пятнадцатью слоями. В файле «.ico» структура слоёв будет состоять из трёх разных по качеству «отделений» (в каждом из них будет по 5 разных размеров иконки), что бы файл было видно везде.

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

2.1 Копируем

Создаём 15 копий. При помощи панели «Слои-Кисти», кликаем на слой правой кнопкой мыши и выбираем «Создать копию слоя».

И делаем так пока не будет 15 слоёв в списке.

Я растянул панель, что бы вы увидели, что слоёв именно 15. Это делать не обязательно, но это удобно. Так же, для простоты понимания, я переименовал слои с учётом их «отделений», опять же не обязательно, но удобно.

2.2 Масштабируем

С помощью инструмента «Масштаб» изменяем слой который назван у меня «2», не нарушаем структуру строения. Устанавливаем значение высоты и ширины 48, то есть слой должен получиться 48×48. Слой «3» должен быть размером 32×32. Слой «4» — 24×24 и наконец слой «5» должен быть 16×16. У вас получится что-то похожее.

Так же делаем с остальными «отделениями».

И последний рывок.

В итоге у нас получается:

Ноты

1. Классический формат растрового изображения BITMAPINFOHEADER поддерживает сохранение изображений с 32 битами на пиксель. При сохранении в виде отдельного файла .BMP «старший байт в каждом не используется». Однако, когда эти же данные хранятся в файле ICO или CUR, Windows XP (первая версия Windows, поддерживающая файлы ICO / CUR с прозрачностью более 1 бита) и выше интерпретируют этот байт как альфа-значение.
2. Хотя в технической документации Microsoft указано, что это значение должно быть нулевым, встроенный в .NET кодировщик значков (System.Drawing.Icon.Save) устанавливает это значение на 255. Похоже, что операционная система полностью игнорирует это значение.
3. Установка цветовых плоскостей на 0 или 1 обрабатывается операционной системой эквивалентно, но если цветовые плоскости установлены выше 1, это значение следует умножить на количество битов на пиксель, чтобы определить окончательную глубину цвета изображения. Неизвестно, устойчивы ли различные версии операционной системы Windows к разным значениям цветовой плоскости.
4. Число битов на пиксель может быть установлено равным нулю, но это можно сделать из других данных; в частности, если растровое изображение не сжато PNG, то количество битов на пиксель может быть вычислено на основе длины данных растрового изображения относительно размера изображения. Если растровое изображение сжато PNG, биты на пиксель сохраняются в данных PNG. Неизвестно, содержат ли различные версии операционной системы Windows логику для определения битовой глубины для всех возможностей, если это значение установлено на ноль.

Корзина и ее коррекция

Как поменять иконку корзины в Windows 7? Этот вопрос интересует лишь отдельных пользователей. Обычно корзина остается без каких-либо корректировок. Это очень удобно.

Если хочется изменить картинку службы “Корзина”, можно справиться с поставленной задачей при помощи ранее предложенного алгоритма действий. Но после 3 шага придется выделить “Корзину”, только потом кликать по “Изменить значок”.

Проделанные действия помогают менять изображение корзины в Windows 7. Рекомендуется не экспериментировать – пользователю привычнее видеть обычное мусорное ведро в качестве “Корзины”.

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега < head>.

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

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

Недостаточно сделать фавикон чисто «для галочки»

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

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

1. Favicon.cc — один из самых простых и популярных сервисов не только в России, но и за рубежом. Программа позволяет создать фавикон с нуля, прорисовав буквально каждый пиксель. Любые изменения вы можете посмотреть в онлайн-режиме в специальном окне предпросмотра.
2. IconJ.com — объединяет в себе функции генератора и каталога фавиконов, в котором можно найти более 18 тысяч иконок.
3. Logaster.ru — превосходный генератор логотипов и фавиконов. В отличие от других сервисов, здесь вы можете быстро отыскать картинку, соответствующую тематике вашего проекта. Для этого достаточно указать название сайта и выбрать тему, которой он посвящен. После этого сервис предложит вам несколько десятков подходящих шаблонов значков. Вот пример для сайта, посвященного животным.

И это далеко не все генераторы и каталоги, так что современный веб-мастер без проблем найдет тот favicon, который будет ему по душе.

Внешний вид значка

Стандартный размер favicon составляет 16×16 пикселей. Есть еще размеры 24×24, 32×32, 48×48 и 64×64. Нужно понимать, что иконка сайта – это его лицо, от которого в определенной степени зависит трафик. Поэтому к созданию фавикона необходимо подойти грамотно

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

• Стиль, соответствующий тематике сайта. В изображении должны преобладать такие же цвета и элементы, которые используются и в дизайне интернет-ресурса или его эмблемы. По сути, это и есть главная задача фавикона – соответствовать сайту.
• Простой к восприятию. Не стоит рисовать изобилие элементов и лепить их друг на друга. Пользователь, взглянув на значок, должен понять, что на нем изображено, а не пытаться разгадать ваш «скрытый смысл». Разумный минимализм – залог успеха.
• Запоминающееся изображение. Этот пункт тесно связан с предыдущими двумя. Соответствие тематике и простота фавикона гарантируют вам то, что пользователи быстрее и легче запомнят его. Попытайтесь использовать образ, взглянув на который, человек сможет описать его каким-то словом. К примеру, тот же поисковик «Яндекс» подошел к этому вопросу идеально, и теперь, увидев логотип в форме буквы «Я», вы сразу же вспомните об этой поисковой системе.

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

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

1. Загрузите изображение favicon.ico в корневую папку вашего веб-сайта;
2. Пропишите в HTML коде самого сайта, в мета-теге head, следующий код:

<link rel="shortcut icon" href="/favicon.ico" type="image/ico">

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