Favicon ico сделать: Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

Содержание

Как сделать favicon.ico для сайта (фавикон)

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

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока:

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

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.

Список сервисов с готовыми favicon (фавикон)

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

iconj – Огромная база фавиконок;
favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
audit4web – Большое количество иконок для сайта.

Как сделать Favicon (фавикон) для сайта

После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:

Полученный favicon.ico скопировать в корень блога (т. е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
```
 	<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
 	<link rel="icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
```
Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.
У меня получилось следующее:
Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:

Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

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

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

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File
Formats. По умолчанию программа Photoshop CS под Windows устанавливается
в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла
плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов
появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

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

Файл не обязательно должен располагаться в корне сайта,
но тогда следует указать браузеру, где он находится. Это делается через тег <link>,
как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

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

Vasyl Holiney

Обновлено 28 февраля, 2021
Loading…

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

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

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

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

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

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

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

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

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

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

Доверие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The Favicon Gallery
Delta Tango Bravo
Fresh Favicons

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

Лучшие Генератори Фавиконов для Вашего Сайта

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

Вполне разумно предположить, что у большинства из нас одновременно открыты Facebook, Youtube и Google. Может быть, в вашем браузере также есть ваша электронная почта и ваш любимый новостной сайт.

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

Фавиконы.

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

Генератор фавиконов Zyro – это бесплатный инструмент с несколькими полезными функциями.

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

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

Более того, вы можете изменить цвет фона, чтобы он соответствовал эстетике вашего бренда.

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

Zyro — быстрый способ создать сайт

Favicon.ico & App Icon Generator может конвертировать форматы файлов изображений JPG, PNG и GIF в файл favicon. ico.

Генератор фавиконов также создаёт фавиконы всех размеров в соответствии с используемой платформой – сеть, Android, Microsoft и iOS.

Когда вы нажимаете Создать Фавикон, он создаёт код, который вы можете скопировать в заголовок вашего HTML-документа. Для справки, если вы всё сделали правильно, HTML-код для стандартного фавикона 16×16 будет выглядеть так:

Затем вы добавляете загруженную папку .zip в корневой каталог своего сайта.

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

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

FavIcon Generator идеально подходит для преобразования форматов изображений JPG, PNG и GIF в файлы favicon.ico. Однако, в отличие от Favicon. ico и App Icon Generator, у него нет редактора.

Этот генератор фавиконов предлагает множество вариантов размера изображения – 16×16, 32×32, 48×48, 64×64 и 128×128 пикселей.

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

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

Этот генератор фавиконов совместим с форматами изображений PNG, JPG, GIF и BMP. Он также принимает изображения с прозрачным фоном.

Размер файла favicon.ico по умолчанию составляет 16×16 пикселей. Тем не менее, у вас есть возможность загрузить иконки размером 32×32 и 48×48 пикселей.

Вы можете перейти в раздел Favicon Editor, чтобы создать свой фавикон с нуля. В качестве альтернативы можно импортировать изображение PNG размером 16×16 пикселей и использовать его в качестве базового дизайна.

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

Favicon CC принимает форматы изображений JPG, JPEG, GIF, PNG, BMP, ICO и CUR.

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

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

Вы можете бесплатно скачать файл ICO. Чтобы получить сценарий HTML, вы должны опубликовать иконку по лицензии Creative Commons.

Genfavicon поддерживает форматы изображений JPEG, GIF и PNG и создаёт фавиконы пяти разных размеров.

Импортируйте ваше изображение в генератор и выберите желаемый размер иконки. Вы можете обрезать её и просмотреть результат перед загрузкой файла ICO.

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

Подобно FavIcon.pro, Genfavicon предоставляет различные языковые настройки, чтобы помочь пользователям по всему миру.

Этот генератор фавиконов даёт вам возможность создать один файл favicon.ico. Но вы также можете массово загружать PNG изображения разного размера вместе с файлом ICO для различных платформ – и всё это одним щелчком мыши.

Favic-o-Matic также предоставляет вам HTML-код для всех сгенерированных файлов. Вы можете удовлетворить все потребности своего фавикона в одном месте.

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

Проверьте совместимость своего сайта с различными браузерами и устройствами с помощью Favic-o-meter — бесплатного инструмента для проверки фавиконов.

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

RealFaviconGenerator.net предлагает варианты модификации фавикона для повышения совместимости вашего фавикона с популярными платформами.

Он включает в себя параметры персонализации вашего фавикона для мобильных экранов, например Apple touch bar и главного экрана Android Chrome.

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

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

Конечный продукт включает файлы фавиконов PNG, ICO и SVG. Генератор предоставляет различные наборы кода фавиконов, совместимые с конкретными языками программирования.

Нужно больше вдохновения для дизайна сайта? Читайте:

X-Iconeditor – мощный онлайн генератор фавиконов. Это один из немногих сервисов, предлагающих инструменты карандаш, кисть, ластик и текстовый редактор для тех, кто хочет создать свой фавикон с нуля.

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

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

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

Чтобы определить фавикон и указать, что иконка доступна браузеру, используйте тег <link> в <head> элементе страницы, указывающий на расположение значка:

Это будет выглядеть примерно так:

<link rel=”shortcut icon” href=”favicon.ico”/>

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

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

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

Anti Favicon – один из самых уникальных фавикон генераторов, который определённо стоит попробовать.

Zyro — быстрый способ создать сайт

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

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

Генератор фавиконов Webestools предлагает только фавиконы размером 16×16 или 32×32, но он позволяет пользователям просмотреть свои фавиконы перед загрузкой файла ICO.

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

Генератор фавиконов Logaster всегда на шаг впереди конкурентов и является отличным выбором для тех сайтов, которые ещё не определились со своим брендом.

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

Logaster – это профессиональный сервис, который может создать фавикон нужного размеров (16-128 пикселей). Это один из немногих премиум-сервисов в этом списке, и важно отметить, что он не позволяет загружать собственное изображение.

Генератор фавиконов Logaster – отличный выбор для брендов, которым ещё предстоит создать собственный логотип.

Генератор фавиконов FavIco быстрый, бесплатный и простой в использовании. Используйте его для преобразования изображений GIF / JPG / PNG в формат ICO, который будет использоваться в качестве фавикона.

Это простой фавикон генератор с понятным пользовательским интерфейсом. Выберите изображение на своём компьютере для загрузки и размер фавикона, который вам нужен – в данном случае это либо 16×16, либо 32×32, и вы готовы к работе.

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

Favicon It предлагает несколько различных вариантов стандартного генератора фавиконов.

С Favicon It вы следуете стандартной процедуре загрузки изображений, но там, где многие сайты предлагают только фавикон размером 16 или 32 пикселей – Favicon It генерирует фавиконы, apple touch icon и HTML заголовки для всех устройств и браузеров.

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

Генератор фавиконов Prodraw – это бесплатный онлайн-инструмент, который поможет вам преобразовать файлы логотипов, изображений и фотографий в фавиконы.

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

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

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

Prodraw также объясняет, как лучше всего использовать каждый размер каждого фавикона. Например, от 32×32 – иконка для рабочего стола, от 48×48 – большая XP иконка, до 128×128 пикселей – размер иконки Windows Vista в формате значка * .ICO.

Хотя некоторые из этих форматов устарели, можно использовать те же размеры для современных инструментов. Например, 128 пикселей – это правильный текущий размер для фавикона веб-магазина Google Chrome.

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

ICO converter делает то, что обещает.

Это простой онлайн-конвертер изображений .ico и генератор фавиконов. Он возьмёт любое изображение и конвертирует его в файл ICO для использования в качестве фавикона сайта или приложения Windows.

ICO converter позволяет вам выбрать, какой размер фавиконов вы хотите включить в окончательный ICO. Он предлагает 16 пикселей, 32 пикселей, 48 пикселей, 64 пикселей, 128 пикселей и 256 пикселей.

В отличие от многих своих конкурентов, ICO converter также позволяет вам выбрать окончательную битовую глубину вашего фавикона. Выберите битовую глубину 8 бит (256 цветов, палитра) или 32 бита (16,7 млн цветов и альфа-прозрачность).

Таким образом, ICO converter обслуживает как более современные, так и классические стили фавиконов.

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

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

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

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

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

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

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

Преимущества добавления фавикона на ваш сайт:

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

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

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

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

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

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

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

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

link rel=”shortcut icon”

Если вы не знаете, что означает link rel =”shortcut icon” не волнуйся. Вы не одни.

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

Элемент LINK определяет ссылку на файл Фавикон, который вы загрузили.

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

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

Zyro — быстрый способ создать сайт

Какого размера должен быть фавикон?

Стандартные размеры фавиконов – 16×16 и 32×32 пикселей. Однако разные платформы, например, иконки приложений, обычно требуют фавиконы разных размеров для лучшей видимости.

Вот полный список нынешних размеров фавиконов и соответствующего их использования:

16×16 пикселей (стандартный браузер)
32×32 (иконки для рабочего стола)
128×128 (иконка Chrome Web Store)
152×152 (iPad тач-иконка)
167×167 (iPad Retina тач-иконка)
180×180 (iPhone Retina)
192×192 (Google Developer Web App)
196×196 (Chrome для иконки Android)

В нашем списке вы найдёте генератор фавиконов, способный создавать файлы любого из этих размеров.

Генератор фавиконов. Итоги

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

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

Каждый генератор фавиконов в этом списке – подходящий выбор для вашего сайта. Просто подумайте, какие функции вам понадобятся, и сделайте соответствующий выбор.

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

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

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

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

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

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

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

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

Windows

Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода:

<meta name="msapplication-config" content="browserconfig.xml" />

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />

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

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

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

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Затем добавим строку кода из предыдущего примера:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

<link rel="manifest" href="/manifest.json" />

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

Ещё о сайтостроении

- Что лучше хостинг или VPS
  
  Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…
- CodeLobster IDE – бесплатный PHP, HTML, CSS, JavaScript редактор…
  
  В этой статье мы рассмотрим бесплатный кросс-платформенный редактор для веб-разработки — CodeLobster IDE. Он уже долгое время присутствует на рынке и завоевал очень большое количество пользователей. CodeLobster IDE предназначен для…
- Зачем вебмастеру VPN?
  
  Повсеместная доступность Интернета привела к тому, что пользоваться им стало небезопасно. Мошенники превратили сеть в стабильный источник дохода. Они взламывают сайты, блоги, электронную почту, кошельки и все, что под руку попадет….
- Конструктор — как инструмент создания сайта…
  
  Вопрос о бесплатном создании собственного интернет – проекта до сих пор волнует многих пользователей. Все дело в том, что люди не всегда могут сразу определиться, для чего им необходим собственный интернет – проект, и как с ним нужно…
- Преимущества прокси-сервера
  
  Использование прокси-сервера не только дает анонимность вашему ИП-адресу, но также позволяет ограничивать доступ к разным ресурсам Интернета сотрудников компании. Прокси-сервер — это машина, которая функционируют в качестве посредника,…
- Основы юзабилити
  
  Высокая конверсия, или отношение численности посетителей сайта к фактическим покупателям, зависит от многих факторов. Веб проект может иметь идеальный дизайн, но не давать нужного уровня конверсии. Почему? Часто причиной становятся…

Как Добавить Favicon для Сайта

Введение

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

Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

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

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

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

Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных — convertico.com.
После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

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

Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл .ico на компьютере.
Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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

Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:

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

ВАЖНО! Измените png на формат вашего изображения в type=»image/png» и favicon.png на имя вашего изображения.

HTML код будет выглядеть примерно так:

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.

Заключение

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

Иконки для сайта, favicon ICO у нас сделать легко!

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator
поможет создать иконку ico или favicon онлайн

Что такое иконка – прекрасно известно не только любому владельцу или разработчику
сайта, но и обычному компьютерному пользователю. В какой бы программе вы не работали,
будь то специализированное приложение или обычный Word – вы везде можете увидеть
множество иконок, отображающих создание нового документа, удаление, сохранение и
прочие действия. Да что там! Взять даже обычный рабочий стол ПК – у каждого здесь
найдется пара иконок «Мой компьютер», «Мои документы», «Корзина» и т.д.

В Microsoft Windows для хранения иконок используется формат ICO.
ICO-файл содержит в себе один или несколько значков, для каждого из которых отдельно
задается цветность и размер. Как правило, можно задать любой размер, но чаще всего
используются иконки ICO 16х16, 32х32, 48х48 пикселов. Структура иконки ICO близка
к формату BMP, но имеет одно отличие – наличие дополнительного изображения-маски,
которая накладывается на задний план для прозрачности рисунка.

В общем, иконки ICO мы видим повсюду. Но у многих пользователей возникает резонный
вопрос: зачем эти значки нужны? Что такое favicon.ico? Какой программой воспользоваться
для создания иконки для сайта в формате ICO? Итак, обо всем – по порядку.

Для чего нужны иконки ICO?

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

Простота распознавания. Создать иконки для сайта ICO 16х16 или
48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях.
Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями
и иконками, стали плохо видны (для людей с плохим зрением это представить несложно).
И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически
все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с
легкостью делать в программе нужные действия благодаря привычным значкам.

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

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

Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать
на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку»
— размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил
название favicon.ico и позволил выделить определенный сайт из множества конкурентов.
Но подробнее об этом – в следующем пункте.

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

Favicon (сокращение от FAVorites ICON – «значок для избранного»)
– иконка для сайта. Решив создать иконку favicon.ico для сайта, получившийся значок
будет отображаться не только перед URL страницы в адресной строке, но и рядом с
закладкой, во вкладках, в выдаче поисковика и прочих местах.

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

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

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок
для сайта и рабочего стола

Чтобы конвертировать BMP, PNG в ICO онлайн , требуется
специальная
программа
для создания иконок для сайта. При этом, хочется найти приложение,
которое поможет перевести изображение в иконку ICO 16х16, 32х32 не только быстро
и качественно, но еще и бесплатно.
Наша программа Icon Generator (Генератор)
станет для вас идеальным решением!

Пользоваться нашей программой для создания иконки для сайта,
favicon.ico легко и просто. Все что от вас требуется, чтобы конвертировать
BMP, PNG в ICO онлайн – выполнить несколько простых действий:

выберите на компьютере нужное изображение;

загрузите его в нашу программу;

нажмите «Создать ICO».

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

Если вы хотите постоянно пользоваться нашей бесплатной программой для создания иконок
для сайта в формате ICO – просто зарегистрируйтесь
на нашем сайте!

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

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

Дизайн Favicon важнее, чем вы думаете. Размер здесь действительно имеет значение, поскольку хорошо продуманный логотип должен быть узнаваемым в любом размере. Его нужно масштабировать от огромных экранов до значка размером 16 x 16 пикселей, известного как значок. Отличный пример дизайна фавикона — логотип Google. Он идеально подходит для больших экранов с большой буквой G и характерным четырехцветным текстом. И он все еще так же узнаваем, когда его уменьшили до крошечной четырехцветной буквы G, видимой в адресной строке веб-браузера.

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

В этой статье мы рассмотрим процесс создания идеального значка. Мы включим конкретные советы по созданию значка для устройств Apple, Android, Chrome, Opera и Safari. Плюс удобное руководство по разным размерам и форматам значков, которые вам необходимо знать.Используйте быстрые ссылки (справа), чтобы перейти прямо к нужному разделу.

Дизайн фавикона: быстрые ссылки

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

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

Правила дизайна фавикона

01. Сделайте его узнаваемым

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

02. Используйте свой логотип

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

03. Держитесь подальше

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

04. Создайте две версии

Разные фоны хорошо подходят для разных контекстов (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Когда в Internet Explorer 5 впервые появились значки, они появлялись в строке URL и в списке закладок.Сегодня значки значков отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Это затрудняет прогнозирование того, как ваш значок будет отображаться для конечного пользователя.

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

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

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

Шпаргалка по размеру фавикона

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

Ранее значки должны были предоставляться в формате ICO.Сегодня можно предоставлять файлы в формате PNG (за исключением значка закрепленной вкладки Safari, который должен быть представлен как SVG).

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

Это наиболее распространенные размеры значков (Изображение предоставлено: emergeinteractive)

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

Фавиконы настольного браузера

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

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

Фавиконы в классическом стиле, отображаемые на панели закладок и в строке URL в Google Chrome (Изображение предоставлено Майклом Фларупом / Apply Pixels)

Вам необходимо предоставить этот тип значка трех размеров, все в формате PNG с прозрачный фон .

Apple

Как создавать значки Apple Touch

Apple iOS использует значки Apple Touch для представления веб-сайтов, которые были сохранены на главном экране iOS в виде закладок.Это означает, что значок Apple Touch будет округлен до прямоугольной маски значков приложений iOS.

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

Этот значок будет отображаться на фоне рабочего стола пользователя (Изображение предоставлено Майклом Фларупом / Apply Pixels)

Значки Apple должны быть представлены в формате PNG .Вы можете обойтись без значка Apple Touch 180×180 , который автоматически масштабируется для различных размеров iPhone и iPad. В большинстве случаев это сработает.

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

60×60
76×76
120×120
152×152
180×180

Android, Chrome и Opera

Как создать значок для Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome- 512×512.png , который рекомендует Google

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

Значки здесь будут замаскированы в разные формы в соответствии с предпочтениями пользователя (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Вам нужно создать значок PNG с сплошным фоном , при 192×192 и 512×512 .

Реализуйте эти значки, добавив на свой сайт файл manifest.json и сделав ссылку на него в тегах:

Вот код для файла manifest.json :

  {" name ":" "," short_name ":" "," icons ": [{" src ":" / android -хром-

192x192.png "," sizes ":" 192x192 "," type ":" image / png "}, {" src ":" / android-
chrome-512x512.png "," sizes ":" 512x512 "," type ":" image / png "}]," theme_color ":
"#ffffff", "background_color": "#ffffff", "display": "standalone"}

Safari

Как создать значок для закрепленной вкладки Safari

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

В отличие от всех других значков, этот значок создается из изображения SVG (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Этот значок должен быть 100% черным файлом SVG с прозрачным фоном . SVG может быть только одним слоем, и safari требует, чтобы для атрибута viewBox SVG было установлено значение « 0 0 16 16» .

Другие типы значков

Есть некоторые размеры и форматы значков, которые не были включены в эту статью, например, Google TV, Интернет-магазин Chrome и значки Apple Touch до iOS 7. Почему? Потому что они устарели или потому что они редко бывают актуальными для среднего веб-разработчика

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

Подробнее:

Как создать файл ICO Favicon из изображения PNG, JPG или SVG

Значок веб-сайта является неотъемлемой частью фирменного стиля, как и логотип веб-сайта. Однако обычно это файл ICO по сравнению с обычными форматами изображений, такими как PNG, JPG или SVG. В этой статье мы увидим, как преобразовать обычное изображение в значок.ico без использования какого-либо программного обеспечения для редактирования фотографий, такого как Photoshop или GIMP.

Понимание истории Favicon.ico

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

Файл favicon изначально задумывался как файл favicon.ico в корне вашего домена. Например, http: // вашдомен.com / favicon.ico. Позже W3C определил стандартную реализацию файлов значков, используя элемент HTML в разделе с атрибутом href, определяющим расположение файла значков. Согласно новой схеме этот файл значка может находиться в любом каталоге веб-сайта и иметь любой формат файла изображения. Однако IE поддерживал только формат файла ICO от версии 5 до версии IE 10.

Таким образом, несмотря на то, что форматы файлов PNG и JPG поддерживаются другими браузерами, для обеспечения совместимости со старыми версиями Internet Explorer рекомендуется указать значок веб-сайта как.ico файл. Позже мы увидим, как вы также можете указать значки в метатегах для Android и iOS, и они будут использоваться, когда пользователь прикрепит ваш веб-сайт к своему домашнему экрану.

Создание логотипа и значка

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

Создание логотипа и фавикона с помощью Logaster

Создание фавикона из изображения

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

Шаг 1. Получите начальное изображение для Favicon

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

Это изображение является частью набора векторных элементов поп-арта и доступно для бесплатной загрузки с нашего сайта в форматах AI, EPS, SVG, PSD и PNG.

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

Шаг 2. Создайте значок Favicon из изображения

После того, как у вас будет начальное изображение, перейдите на сайт realfavicongenerator.net и загрузите свое изображение с помощью кнопки «Выберите свое изображение Favicon». Этот веб-сайт поможет вам создать значок, совместимый практически со всеми браузерами и платформами.

Затем веб-сайт попросит вас настроить значок для различных устройств, включая iOS, Android, Windows и macOS.Эти конфигурации необходимы для отображения вашего значка на главном экране пользователя этих устройств. Убедитесь, что вы изменили настройки, такие как цвет фона, размер полей, цвет темы и т. Д., В зависимости от цветов вашего значка. Можно увидеть предварительный просмотр в реальном времени, который поможет вам настроить эти значения.

Шаг 3: Создайте Favicon

После того, как вы выбрали параметры по своему вкусу, нажмите кнопку «Создать ваши значки и HTML-код», и веб-сайт создаст пакет значков вместе с HTML-кодом, подобный следующему:

Шаг 4. Добавьте значок на веб-сайт

Вам нужно будет загрузить пакет значков, созданный веб-сайтом, и извлечь его содержимое в корень вашего веб-сайта.После извлечения вы обнаружите, что ваше изображение было преобразовано в favicon.ico вместе с изображениями значков различных размеров, файлом browserconfig.xml и файлом manifest.json. Эти дополнительные файлы необходимы для указания значка веб-сайта на различных устройствах, таких как iOS, Android и Windows 10.

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

Надеюсь, вы нашли этот урок по созданию значка из изображения полезным. Если вы хотите, вы также можете создать значок из текста с помощью Google Fonts. Сообщите нам, если у вас возникнут какие-либо проблемы, и мы постараемся помочь в максимально возможной степени.

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

Статус этого документа

Проект в разработке; может кардинально измениться в любой момент.

Значок — это графический
изображение (значок), связанное с определенной веб-страницей и / или веб-
сайт. Многие недавние пользовательские агенты (например, графические браузеры и
программы чтения новостей) отображают их как визуальное напоминание о веб-сайте
идентичность в адресной строке или во вкладках. Википедия включает
статья о
favicons [FAVICON-WIKIPEDIA].

Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и
для указания того, что изображение будет использоваться в качестве значка. Этот
документ объясняет метод, предпочитаемый W3C для указания
значок.Существует еще один распространенный метод, который проиллюстрирован ниже.
с объяснением того, почему этот метод несовместим с некоторыми
принципы веб-архитектуры. Оба метода применимы только к HTML и
XHTML, одно из обсуждаемых ограничений
ниже.

В этом документе не обсуждается подробно, как создать значок.
изображение. Однако формат изображения, который вы выбрали, должен быть 16×16.
пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В
формат изображения должен быть одним из PNG (
Стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

rel
определяется в профиле

Первый подход к указанию значка — использовать rel
значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно
ниже. В этом примере HTML 4.01 значок, идентифицированный через URI
http://example.com/myicon.png как значок:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

Версия XHTML 1.0 очень похожа:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Второй метод указания значка основан на использовании
предопределенный URI для идентификации изображения: «/ favicon», относящийся к
корень сервера.Этот метод работает, потому что некоторые браузеры были
запрограммирован на поиск значков с использованием этого URI. Такой подход
несовместимы с некоторыми принципами веб-архитектуры и в настоящее время
обсуждается группой технической архитектуры W3C
(TAG) как их сайт проблемы Data-36.
Подводя итог проблемы: веб-архитектура разрешает администраторам сайтов
для управления своим пространством URI (для данного доменного имени), как они видят
соответствовать. Соглашения, которые не представляют собой согласия сообщества и которые
уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут
привести к конфликту (так как нет общеизвестного списка этих
предопределенные URI).Одно практическое соображение иллюстрирует проблему:
у многих пользователей есть веб-сайты, хотя у них нет собственных
доменное имя. Эти пользователи не могут указывать значки, используя второй
метод, если они не могут писать в корень сервера. Однако они могут использовать
метод один для указания значка, поскольку он более гибкий и не
запретить менеджеру сайта использовать один значок в одном месте
на сайте.

Есть несколько других хорошо известных посягательств на пространство URI,
в том числе «robots.txt «и расположение конфиденциальной информации P3P.
политика. Группа технической архитектуры изучает альтернативы
которые не вторгаются в пространство URI без лицензии.

Использование профилей для определения терминов, таких как «значок»

Грубо говоря, профиль — это определение набора
термины. В идеале профиль включает в себя как машиночитаемую информацию
и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько
атрибуты, такие как атрибут rel , не имеют предопределенного набора
значения.Вместо этого автор может предоставить значения в соответствии с потребностями, и
затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы
рекомендуют авторам использовать значение «icon» и профиль, который
объясняет, что «когда мы говорим« значок », мы имеем в виду« это значок »».

В способе 1 выше мы используем атрибут rel с
ССЫЛКА НА САЙТ
элемент и выберите профиль с атрибутом profile
на элементе HEAD.

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

Ограничения

Есть несколько ограничений для описанных выше подходов,
включая предпочтительный метод (поэтому TAG продолжает работать
по вопросу):

Подходы работают только в HTML или XHTML
Предпочтительный подход связывает значок с HTML-документом,
не набор документов (т.е. сайт)
Предлагаемый профиль для определения значения «пиктограммы» не является
признанный стандарт, что означает, что могут возникнуть проблемы с совместимостью
на практике.
Нет стандарта (по крайней мере, определено HTML 4.01)
для машиночитаемых профилей, которые
позволить браузеру знать, что «это означает, что изображение является значком». Таким образом,
браузер должен быть запрограммирован заранее, чтобы распознавать этот конкретный
значение отн. . Для получения дополнительной информации об использовании профилей
в HTML и XHTML см. GRDDL
[GRDDL].

Список литературы

FAVICON-WIKIPEDIA: Favicon , Википедия, Доступно на
http: // ru.wikipedia.org/wiki/Favicon.
GRDDL: Собирать
Ресурсные описания диалектов языков , D.
Хазаэль-Массиё, Д. Коннолли, редакторы, материалы, представленные командой W3C, 16 мая
2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия
доступно по адресу http://www.w3.org/TeamSubmission/grddl/.
HTML401: HTML
4.01 Спецификация , Д. Рэггетт, А. Ле Хорс, И. Якобс,
Редакторы, Рекомендация W3C, 24 декабря 1999 г.,
http: // www.w3.org/TR/1999/REC-html401-19991224. Последняя версия
доступно по адресу http://www.w3.org/TR/html401.
СИТЕДАТА-36: Улучшение метаданных веб-сайтов в robots.txt, w3c / p3p и favicon
и т. д. , TAG, Доступно по адресу
http://www.w3.org/2001/tag/issues.html#siteData-36.
XHTML1: XHTML ™ 1.0 The
Расширяемый язык разметки гипертекста (второе издание) , S.
Пембертон, редактор, Рекомендация W3C, 1 августа 2002 г.,
http: // www.w3.org/TR/2002/REC-xhtml1-20020801. Последний
версия доступна по адресу http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники группы QA Interest Group и сотрудники W3C имеют
внесли значительный вклад в содержание этого документа:
Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и
Оливье Теро (W3C).

Как сделать значок значка маленьким и кэшируемым

Автор: Брайан Джексон

Обновлено 4 марта 2019 г.

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

Что такое значок?

Фавикон или фавикон.ico — это небольшой файл значка изображения, связанный с вашим сайтом. Когда браузер попадает на ваш веб-сайт, он выполняет в фоновом режиме тихий поиск вашего favicon.ico (примечание: вы можете не увидеть этого в некоторых инструментах тестирования скорости веб-сайта. WebPageTest действительно показывает favicon.co в своем каскадном анализе). Затем он отображается в различных местах, таких как вкладки в вашем браузере, а также на панели закладок. Обычно favicon.ico хранится в корне вашего веб-сайта.

Однако это больше не ограничивается значками веб-браузера для настольных ПК.Теперь у нас есть устройства iOS, устройства Android, устройства Windows 10, и все они имеют свои собственные размеры и типы файлов, которые они поддерживают для связывания значка. Устройства iOS используют сенсорный значок Apple с высоким разрешением для отображения закладок и ярлыков на главном экране. IPhone требуется изображение 57×57, тогда как новому iPad с экраном Retina требуется изображение 152×152. Android Chrome также использует эти изображения, если находит их. А Windows 10 идет совершенно другим путем со специальным набором значков и деклараций HTML.

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

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

Фавикон на самом деле может быть файлом PNG, GIF или ICO.Однако файлы ICO обычно используются чаще других, поскольку размер файла меньше, и он поддерживается во всех основных браузерах. PNG чаще всего используются на устройствах с iOS, Android и Windows 10. Сегодня мы сосредоточимся в первую очередь на создании favicon.ico для вашего сайта.

Шаг 1

Значок обычно должен иметь размер 16×16 пикселей или 32×32 пикселя. И также рекомендуется держать его меньше 1 КБ или как можно меньше. Вы можете создать свой значок в любой программе, которую вы предпочитаете, будь то Photoshop, Illustrator, Gimp, Paint или Sketch.Просто сохраните файл или переименуйте его в файл ICO, когда закончите. Он должен называться favicon.ico. (Подсказка: лучшая стратегия для сохранения небольшого размера — это использовать векторы при работе с вашим логотипом / значком, прежде чем сохранять его.)

Вы также можете использовать онлайн-инструмент, такой как настоящий генератор значков, в который вы можете загрузить PNG , JPG или SVG (векторный тип файла), и он сгенерирует для вас файлы ICO. Инструмент также имеет несколько отличных генераторов для встраивания ваших иконок в статические сайты и проекты, такие как:

Step 2

Затем вам нужно загрузить его на свой сайт.Просто загрузите его через FTP в корневой каталог вашего веб-сайта, и веб-браузеры, поддерживающие значки, найдут его. Если вам нужно или вы хотите поместить свой значок в другой каталог, вы можете просто добавить следующее в раздел своего веб-сайта с указанием пути к нему. Например, приведенный ниже фрагмент будет, если у вас есть значок в папке с именем images.

Favicon в WordPress

Если вы работаете на сайте WordPress, вы можете просто выполнить описанные выше шаги или также использовать бесплатный плагин Favicon от RealFaviconGenerator.Обязательно ознакомьтесь с официальной документацией WordPress Favicon.

Favicon в Joomla

Если вы работаете на Joomla, вам необходимо загрузить favicon.ico в каталог / joomla / templates / . Обязательно ознакомьтесь с официальной документацией Joomla Favicon.

Favicon в Drupal

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

Перейдите на страницу admin / build / themes / settings / THEME или на страницу Drupal 7 admin / appearance / settings / THEME в области администрирования сайта (замените THEME названием вашей темы по умолчанию).
Выберите файл favicon.ico в разделе «Настройки значка ярлыка» на странице конфигурации темы и загрузите файл. (Можно указать путь для сохранения значка в папке темы).

Оптимизируйте свой значок

Оптимизируйте значок, сделав его кешируемым, чтобы избежать частых запросов на него.Поэтому важно использовать кеширование браузера, добавляя заголовки с истекающим сроком действия и используя управление кешем. Еще одна рекомендация — загрузить свой значок с вашего CDN. YSlow также рекомендует стараться, чтобы размер вашего значка не превышал 1 КБ. Во всяком случае, просто постарайтесь, чтобы ваша иконка была как можно меньше. Ниже вы можете увидеть, что наш значок на нашем тестовом сайте находится прямо под отметкой 1 КБ на 925 байтах.

Добавить Истекает срок действия заголовков в Apache, добавляя его в файл .htaccess .Обратите внимание на строку с изображением / значком x .

  ## СРОК КЭШИНГА ##

    ExpiresActive On
    ExpiresByType image / jpg «доступ на 1 год»
    ExpiresByType image / jpeg "доступ на 1 год"
    ExpiresByType image / gif "доступ на 1 год"
    ExpiresByType image / png "доступ на 1 год"
    ExpiresByType text / css "доступ на 1 месяц"
    ExpiresByType text / html "доступ на 1 месяц"
    Заявление ExpiresByType / pdf "доступ на 1 месяц"
    ExpiresByType text / x-javascript "доступ на 1 месяц"
    Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
    ExpiresByType изображение / значок x "доступ на 1 год"
    ExpiresDefault "доступ 1 месяц"

## СРОК КЭШЕНИЯ ##

Добавьте заголовки Expires в Nginx, добавив в конфигурацию вашего сервера.Обратите внимание, что включен тип файла ico .

  сервер {
    слушать 80;
    имя_сервера example.com;

    место расположения / {
        корень / var / www / example;
        index index.html index.htm;
    }

    расположение ~ * \. (jpg | jpeg | gif | ico | png) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 30 дней;
    }
}

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

Cache-Control

Вы также можете использовать Cache-Control . Следующий фрагмент можно добавить в файл .htaccess в Apache, чтобы сервер установил заголовок Cache-Control max-age на 84600 секунд и на public для перечисленных файлов. Обратите внимание, что включен тип файла ico .

  
    Заголовочный набор Cache-Control "max-age = 84600, общедоступный"

Этот следующий фрагмент можно добавить в файл конфигурации Nginx.В приведенном ниже примере используются директивы заголовка Cache-Control public и no-transform с параметром срока действия, установленным на 7 дней. Обратите внимание, что включен тип файла ico .

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | ico) $ {
    истекает 7 дней;
    add_header Cache-Control «общедоступный, без преобразования»;
}

Прочтите наш более подробный пост о том, как использовать Cache-Control .

Загрузите ваш значок с CDN

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

Чтобы загрузить значок с вашего CDN, вы можете просто обновить фрагмент в заголовке. Ниже приведен пример на нашем тестовом сайте. Мы указываем на наш значок, который находится на нашем CDN. Сделав это, вы также можете воспользоваться Cache-Control и истекает срок действия заголовков на пограничных серверах CDN, и вам не нужно беспокоиться о них на исходном сервере.

А вот пример того, что мы запускаем на сайте KeyCDN, с парой вариантов значков и значка касания яблока.

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

Сводка

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

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

Imagemagick для создания favicon.ico с размерами 16×16 и 32×32 в нем · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Imagemagick для создания favicon.ico с размерами 16×16 и 32×32 в нем

	# IE все еще безрассудный, так что используйте значок favicon.ico

	convert -resize x16 -gravity center -crop 16×16 + 0 + 0 -flatten -colors 256 input.png output-16×16.ico
	convert -resize x32 -gravity center -crop 32×32 + 0 + 0 -flatten -colors 256 input.png output-32×32.ico
	преобразовать вывод-16×16.ico вывод-32×32.ico favicon.ico

	# Затем HTML должен указать size = «XxY» как наибольший размер из-за ошибок браузера

	<ссылка rel = "ярлык" href = "/ favicon.ico ">

	# Создаем яблочные

	convert -resize x152 input.png apple-touch-icon-152×152.png
	convert -resize x120 input.png apple-touch-icon-120×120.png
	convert -resize x76 input.png apple-touch-icon-76×76.png
	convert -resize x60 input.png apple-touch-icon-60×60.png

	# HTML для apple

Вы не можете выполнить это действие в настоящее время.

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

Информация о favicon.ico

Обновлено: 08.05.2020, Computer Hope

Что такое favicon.ico?

favicon.ico — это небольшой значок, который можно найти в адресной строке URL и в закладках, созданных веб-браузерами.

Например, на изображении выше есть маленький значок () перед URL-адресом Computer Hope.

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

Значок может быть создан с помощью любого бесплатного генератора значков или в бесплатном онлайн-генераторе значков, таком как favicon.cc. Файл favicon.ico должен иметь размер 16×16, иметь 16 цветов и сохраняться как файл .ico.

Наконец, файл favicon.ico должен быть загружен в корневой каталог на сервере, на котором размещена ваша веб-страница.

Можно ли анимировать значок?

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

Можно ли назвать файл другим именем, кроме favicon.ico?

Да, в вашем HTML-коде добавьте тег ниже в раздел вашего кода.

В этом примере браузер будет искать файл favicon2.ico и использовать его вместо favicon.ico. Если используется старый браузер или браузер, который не поддерживает эту функцию, тег игнорируется.

Значок также можно загрузить с другого веб-сайта.Например, чтобы использовать значок Computer Hope на своем сайте, вы можете добавить тег ниже в разделе.

Кончик

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

Что такое favicon.gif?

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

Почему в моем браузере не отображается значок?

Значок может не отображаться по любой из указанных ниже причин.

Если вы или кто-то другой, использующий ваш компьютер, недавно очистили ваш интернет-кеш, значки будут потеряны, поскольку они хранятся во временном кэше.
Страница не загружалась в последнее время или браузер не ищет значок в правильном месте. Попробуйте обновить страницу браузера (нажатие F5 на клавиатуре — это обычная комбинация клавиш для обновления страницы).
Если вы веб-мастер веб-страницы и не можете отобразить favicon.ico, убедитесь, что значок находится в корневом каталоге с соответствующими разрешениями.Если это подтверждено и страница находится в другом каталоге, попробуйте поместить файл favicon.ico в этот каталог.
Наконец, в более ранних версиях браузеров были и другие проблемы, связанные с файлом favicon.ico. Убедитесь, что у вас установлена последняя доступная версия интернет-браузера для вашей операционной системы.

Лучший генератор фавиконов — Favic-o-Matic

Lazy preset для ленивых

в том числе следующих размеров:

16×16 + 32×32 пикселей (крат.ico + .png)
144×144 пикселей
152×152 пикселей

Obsessive пресет для одержимых людей

в том числе следующих размеров:

16×16 + 32×32 пикселей (несколько файлов .ico + .png)
57×57 пикселей
72×72 пикселей
114×114 пикселей
120×120 пикселей
144×144 пикселей
152×152 пикселей

Апокалипсис сейчас

в том числе следующих размеров:

Предупреждение: косая черта в конце не найдена!

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

Почему абсолютные пути?

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

Цвет фона значка плитки Metro в IE 10 (эквивалент значка apple-touch-icon в метро)

Заголовок плитки Metro (при желании можно оставить поле пустым)

RSS-канал

Metro tile (при желании можно оставить пустым)

Стандарт интернета для (почти) каждого браузера

IE9 Интерфейс браузера закрепленного сайта

Страница новой вкладки в IE, кнопка панели задач в Win 7+, боковая панель списка чтения Safari

Значок сенсорного экрана iPhone (без сетчатки — iOS7)

Значок сайта Windows, боковая панель списка чтения Safari в HiDPI / Retina

Стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G)

Победа 8.

Favicon ico сделать: Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

Как сделать favicon.ico для сайта (фавикон)

Как создать Favicon (фавикон) с нуля

Создание favicon (фавикон) из готового изображения

Список сервисов с готовыми favicon (фавикон)

Как сделать Favicon (фавикон) для сайта

Как добавить иконку сайта в адресную строку браузера?

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

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

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

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

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

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

Лучшие Генератори Фавиконов для Вашего Сайта

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

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

Какого размера должен быть фавикон?

Генератор фавиконов. Итоги

О favicon и не только

Форматы favicon

Favicon.ico

Favicon.png

Favicon.svg

Favicon – устройства, ОС, технологии

Windows

Mac OS и Safari

Apple (iOS)

Android

Заключение

Ещё о сайтостроении

Что лучше хостинг или VPS

CodeLobster IDE – бесплатный PHP, HTML, CSS, JavaScript редактор…

Зачем вебмастеру VPN?

Конструктор — как инструмент создания сайта…

Преимущества прокси-сервера

Основы юзабилити

Как Добавить Favicon для Сайта

Иконки для сайта, favicon ICO у нас сделать легко!

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator поможет создать иконку ico или favicon онлайн

Для чего нужны иконки ICO?

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

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок для сайта и рабочего стола

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

Правила дизайна фавикона

01. Сделайте его узнаваемым

02. Используйте свой логотип

03. Держитесь подальше

04. Создайте две версии

Шпаргалка по размеру фавикона

Фавиконы настольного браузера

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

Apple

Как создавать значки Apple Touch

Android, Chrome и Opera

Как создать значок для Android, Chrome и Opera

Safari

Как создать значок для закрепленной вкладки Safari

Другие типы значков

Как создать файл ICO Favicon из изображения PNG, JPG или SVG

Понимание истории Favicon.ico

Создание логотипа и значка

Создание фавикона из изображения

Шаг 1. Получите начальное изображение для Favicon

Шаг 2. Создайте значок Favicon из изображения

Шаг 3: Создайте Favicon

Шаг 4. Добавьте значок на веб-сайт

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

Статус этого документа

Метод 1 (предпочтительный): использование значения атрибута

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Использование профилей для определения терминов, таких как «значок»

Ограничения

Список литературы

Благодарности

Как сделать значок значка маленьким и кэшируемым

Что такое значок?

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

Шаг 1

Step 2

Favicon в WordPress

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator
поможет создать иконку ico или favicon онлайн

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок
для сайта и рабочего стола