Фавикон коллекция: Коллекция favicon

08.11.1970 Разное

Содержание

Bog BOS: sitelife: favicon.ico — занесение логотипа сайта в избранное

Последнее изменение файла: 2007.08.08
Скопировано с www.bog.pp.ru: 2021.12.29

MS IE (начиная с версии 5.0) при занесении сайта в избранное (favorites) извлекает значок (логотип, иконку) сайта и помещает его в список избранных сайтов и окно адреса (address bar), откуда их можно перетащить на поверхность стола и некоторые другие места. Konqueror и Mozilla (относительно надежно работает начиная с версии 0.9.7) запрашивают значок сайта не дожидаясь действий посетителя. Mozilla затем показывает его в URL Bar, Tab, Personal toolbar, меню bookmarks (закладки). Почему-то значки не показываются в отдельном окне закладок и Sidebar.

Формат значков соответствует формату файлов .ico MS Windows и представляет собой несколько DIB-изображений (см. формат BMP) в одном файле. Значки могут быть либо в отдельном файле, либо включены в .dll или .exe файлы. DIB-изображения бывают с индексированными цветами (до 256 цветов, палитра 16 или 24 бита) или RGB (24 бита). Могут иметь прозрачный фон (XOR маска и AND маска (1bpp)). Описание можно взять на The Programmer’s File Format Collection.

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

Получение .ico файлов в linux:

преобразование с помощью convert из ImageMagick (версия 5.3.8 не работает)
xpm2wico делает замечательные .ico файлы (идентифицируются программами file, identify и ee), но Mozilla не воспринимает их в качестве значков сайтов (м.б. из-за того, что они имеют 256 цветов?)

pngtoico (всего 7kB!) делает . ico файлы только с индексированными цветами, но для изготовления значков сайтов именно это и нужно.
www.favicon.com — профессиональное изготовление значков сайтов и продажа программ для этого (бесплатный вариант на Java на сайте)

Можно явно указать браузеру на расположение значка поместив в заголовок страницы строку:
<link rel=»SHORTCUT ICON» href=»URL-адрес«>

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

Если браузер не встретил указания о местонахождении значка в заголовке страницы, то он пытается взять его из файла favicon.ico в корневой директории сайта (так описано в документации MS). На практике, файл favicon.ico тянется не только из корневой директории, но и из других директорий (не забудьте также о redirect-ах).

К сожалению, для значков сайтов не определен MIME код. Поэтому различные сайты возвращают различные значения заголовка Content-Type: text/plain, imag/x-icon (subscribe. ru), image/x-icon (narod.yandex.ru), application/octet-stream. Использовать типы text/* в русском apache нельзя (по умолчанию, файлы с незнакомыми серверу суффиксами получают тип text/html), т.к. они подвергаются преобразованию кодировки, как и все текстовые файлы. Проще всего поменять тип можно внеся в файл apache/conf/mime.types строку (не забудьте перезапустить сервер):
image/ico ico

Bog BOS: sitelife: favicon.ico — занесение логотипа сайта в избранное

Создаем favicon для сайта | Вебмастеру

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

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

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

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

Выглядит фавикон в поисковой выдаче так:

Online сервисы и готовые коллекции favicon

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

Можно воспользоваться несколькими способами:

скачать уже готовое мини-изображение из специальной галереи;
создать самостоятельно при помощи генератора фавикон;
сделать иконку из готового изображения при помощи favicon generator’а.

Скачать уже готовое мини-изображение из специальной галереи можно на следующих сайтах: thefavicongallery.com; iconj.com; favicon.co.uk или favicon-generator.org. На данных ресурсах представлено огромное количество различных иконок, поэтому каждый сможет найти ту, которая подойдет ему больше всего.

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

«favicon.cc» является одним из самых популярных и простых сервисов, который позволяет быстро справиться с поставленной задачей. С его помощью у вас есть возможность нарисовать самостоятельно каждый пиксель вашей будущей фавиконки. Всего их насчитывается 256.

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

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

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

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

На данном ресурсе вы можете создавать множество различных favicon в режиме реального времени.

Это один из многих онлайн-генераторов, который находится в свободном доступе. Существует также множество других. Вот некоторые из них: amichurin.appspot.com; favicon-generator.org/editor. Принцип их работы аналогичен приведенному примеру.

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

Создав мини-иконку, остается только ответить на вопрос о том, как установить favicon на сайт?

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

Для этого достаточно вставить ваш файл в «корень» сайта или блога. Как правило, папка называется «DOCUMENT ROOT». После выполнения этих действий пауки и браузеры самостоятельно определят новую информацию о том, что появился новый файл favicon.ico.

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

Добавление значка сайта — Commerce | Dynamics 365

Статья
08/20/2021
Чтение занимает 2 мин

Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

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

Отправить

В этой статье

Важно!

Dynamics 365 Retail теперь называется Dynamics 365 Commerce — это универсальное многоканальное решение для электронной коммерции, магазинов и центров обработки вызовов. Дополнительные сведения об этих изменениях см. в разделе Microsoft Dynamics 365 Commerce.

В этой теме объясняется, как добавить значок сайта к сайту.

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

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

Отправка значка сайта в коллекцию активов вашего сайта

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

В левой области переходов выберите Библиотека мультимедиа.
На панели команд выберите пункт Отправить > Отправить элементы мультимедиа

.
В окне проводника перейдите к файлу изображения значка сайта, который необходимо загрузить, выберите его и нажмите Открыть.
В диалоговом окне Отправить элемент мультимедиа введите требуемый заголовок и альтернативный текст.
Если требуется опубликовать изображение сразу после отправки, установите флажок Опубликовать элементы мультимедиа после отправки.
Примечание
Если не установлен флажок Опубликовать элементы мультимедиа после отправки, необходимо вернуться на страницу Элементы мультимедиа и вручную опубликовать значок сайта позже.
Нажмите ОК.
На панели свойств в правой части скопируйте общедоступный URL-адрес значка сайта. Этот URL-адрес будет использоваться позже.

Создание кода HTML для значка сайта

Чтобы создать код HTML для значка сайта, используйте следующая строка HTML. Для атрибута href замените Public_URL_for_your_favicon на общедоступный URL-адрес, который был скопирован ранее.

<link rel="shortcut icon" href="Public_URL_for_your_favicon">

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

Перейдите к разделу Фрагменты, и выберите Создать.
В диалоговом окне Создание фрагмента выберите Метатеги в качестве модуля, на котором основан фрагмент.
Введите имя для фрагмента, затем выберите ОК.
В дереве иерархии фрагментов выберите дочерний элемент Метатеги по умолчанию .
В правой области в разделе Метатеги выберите Добавить, а затем введите HTML-строку, созданную ранее для значка сайта.
Выберите Завершить редактирование, а затем нажмите кнопку Опубликовать, чтобы опубликовать фрагмент.

Добавьте фрагмент метатега в раздел HTML head страниц

Чтобы добавить фрагмент метатега в раздел HTML head страниц, выполните следующие действия.

Перейдите к разделу Шаблоны и откройте шаблон для страниц, к которым необходимо добавить значок сайта, а затем выберите Изменить.
В дереве иерархии шаблонов нажмите кнопку с многоточием (…) справа от контейнера HTML head, а затем выберите Добавить фрагмент.
В диалоговом окне Выбор фрагмента выберите созданный ранее фрагмент метатега и нажмите
ОК.
Выберите Завершить редактирование, а затем нажмите кнопку Опубликовать, чтобы опубликовать шаблон.

Примечание

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

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

Дополнительные ресурсы

Добавление логотипа

Выбор темы сайта

Работа с переопределением файлов CSS

Добавление приветственного сообщения

Добавление уведомления об авторском праве

Добавление языков на сайт

Добавление кода скрипта на страницы сайта для поддержки телеметрии

КомпМышь: Фавикон

Доброго времени суток, уважаемые читатели и посетители блога!

В начале августа 2011 года Blogger добавил еще одно обновление — возможность вставки собственного фавикона.

На blogger.com поддерживаются изображения всех типов (JPEG, PNG, GIF и т.д.).

Фавикон (Favicon, сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками) — иконка (значок) для сайта или блога. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. По сути, favicon — это логотип Вашего блога.

Обычно размер изображения фавикона 16х16 пикселей в специальном формате ICO, который помещается в корень сайта под именем favicon.ico, размер файла не более 300кб.

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

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

2. Фавикон обязательно должен ассоциироваться с сайтом (блогом) – это его основная функция.

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

4. Желательно делать фавиконы запоминающимися, поэтому будет лучше использовать знакомые пользователю образы, которые он может назвать каким-то словом (фавиконом ЖЖ, к примеру, является «Карандашик»).

Правильно подобранный фавикон поможет Вам:

1. Усилить узнаваемость Вашего сайта (блога) при поиске.

2. Отобразить тематику Вашего сайта (блога).

3. Увеличить кликабельность сайта (блога) в закладках, в поиске, в каталогах ссылок.

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

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

2. Воспользоваться одним из онлайн генераторов:

1) Онлайн генератор favicon.

сс – самый простой и доступный способ – делает иконку для сайта из любого изображения. Естественно иконка получится красивее, если изображение-донор выполнить квадратным. При этом вы можете полностью с нуля нарисовать новую иконку или же переделать уже имеющуюся у вас картинку (которая вас устраивает) в формат иконки Фавикон. 2) Создать свой фавикон с помощью руссифицированного сервиса Dagondesign (http://www.favicon.ru/). 3) FaviconGenerator — очень простой онлайн генератор иконок Favicon ico из загруженных вами файлов. Практически аналог online generator под названием Favicon ru, но только зарубежный. 4) AntiFavicon. На нем вы можете создать иконку Favicon ico с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму будущей иконки фавикон можно настроить в области «Colors». Готовую иконку можно скачать по ссылке «Your generated favicon», расположенной вверху страницы генератора. Там же вы можете наблюдать превьюшку получающейся иконки Favicon.

5) FavIcon from Pics 2.0 — простой онлайн сервис, где можно создать иконки Favicon ico из любых графических файлов. Указываете путь до картинки на своем компьютере, создаете в генераторе Favicon и скачиваете архив с созданной иконкой фавикон в формате ICO и GIF. 6) Free — еще один простой онлайн генератор на GraphicsGuru: указали путь к картинке на своем компьютере, нажали на кнопку «Generate» и получили вашу иконку Favicon ico, скачать которую можно будет нажав на ссылку «Download». 7) Iconj — еще один простой онлайн генератор фавиконов. Здесь созданную иконку Favicon ico вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку. 8) DeGraeve — достаточно мощный ресурс по созданию Favicon ico. Здесь тоже можно сделать свою иконку Favicon (фавикон) либо с нуля, либо загрузить изображение, которое в последствии можно будет подкорректировать и скачать уже в формате ICO подходящего размера.

Вы можете воспользоваться и другими сервисами.

3. Можно воспользоваться готовыми галереями иконок:

1) audit4web — галерея с более, чем 15000 Favicon (фавикон) иконок.

2) Iconj — достаточно большая коллекция иконок Favicon на том же ресурсе, где находится и онлайн генератор фавиконов, описанный выше. 3) Favicon.cc — огромная коллекция и галерея на 55 тысяч различных фавиконов на все случаи жизни. Имеются так же анимированные Favicon ico, которые, правда, будут видны только в браузере FireFox. 4) Gallery — еще немного галерей в каталоге фавиконов.

Конечно, это не полный перечень галерей.

4. Можно воспользоваться специальными программами для изготовления фавиконов, которые специально «заточены» для изготовления иконок для сайта (блога).

О том, как создавать иконки, можете посмотреть обучающие ролики:

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

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

1. Левой кнопкой мышки нажимаете на «Изменить».

2. В открывшемся окне кликаете по кнопке «Обзор», указываете путь к иконке на своем ПК.

3. Щелкаете по кнопке «Сохранить».

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

Желаю удачи!

Используемые источники:

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

Фавикон – английское слово favicon, переводится «значок для избранного» (сокращено от FAVorites ICON), логотип сайта и одна из главных частей веб-страницы, графическая картинка с форматами 16х16 или 32х32 пикселей (размер должен быть кратким восьми). Для фавикона используют формат 16х16, другие размеры не будут выдаваться браузерами. Отображается в верхней строчке браузера, вблизи с адресом сайта. Если иконку не установить или сделать его не правильно, то в окне браузера будет виден не логотип сайта, а иконка используемого браузера.

Зачем нужен favicon?

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

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

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

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

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

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

<link rel="shortcut icon" href="ваш сайт/favicon.ico" type="image/x-icon" /> 
<link rel="icon" href="ваш сайт/favicon.ico" type="image/x-icon" />

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

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

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Обновлено 24 января 2021 Просмотров: 106 778 Автор: Дмитрий Петров

Что такое Фавикон и зачем он нужен для сайта
Как создать Favicon
Онлайн генераторы и галереи иконок
Как установить или поменять Favicon на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo. ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Что такое Фавикон и зачем он нужен для сайта

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

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

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

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать).

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

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

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

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

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

Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».
В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).
Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.
Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».
В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.
Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.
На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.
Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.
Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.
Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

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

Подборка онлайн генераторов, коллекции и галереи фавиконов

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

FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
Фавикон-генератор — простенько и со вкусом…

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

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

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант задания служебной гиперссылки link:

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

В общем, если хотите задать или поменять путь до вашего фавикона, который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon. ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

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

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Создание Favicon для сайта — рекомендации и пошаговое изготовление

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок этого движка сайта, ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

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

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта WebMasterMix. ru.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px, для этого пройдите в меню «Файл» >> «Новый…» или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px, но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ «W» с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента «Заливка» (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент «Текст» (Т) добавил символ «W» и задал ему следующее значение цвета #FAC31D.

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

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню «Слой» >> «Объединить видимые» или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню «Фильтр» >> «Размытие» >> «Размытие по Гауссу…» и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню «Изображение» >> «Размер изображения» и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение .ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате .ico. Поэтому сохраните его в формате .png, для этого пройдите в пункт меню «Файл» >> «Сохранить как. ..» и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат .ICO

После этого мы конвертируем его в формат .ico при помощи сервиса favicon.ru. Зайдите на данный сервис и при помощи кнопки «Обзор» выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку «Создать favicon.ico».

После этого на загрузившейся странице появится ссылка «Скачать favicon.ico!» кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется «public_html». Затем, в каждую страницу вашего сайта, перед закрывающим тегом </head> добавьте следующие строки:

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

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

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

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности: Опубликовано: 06 Январь 2011; Обновлено: 14 Октябрь 2013; Просмотров: 15159

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

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

Favicons — это маленькие значки 16×16, которые должны быть на каждом веб-сайте.

Но не все.

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

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

Другие говорят, что на них не стоит тратить время. Лично я считаю, что это вишенка на вершине.

Иллюстрация трех веб-сайтов Favicons. Да, ГРУ — это мое фоновое изображение.

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

Если вы хотите создать свой любимый значок в Photoshop, создайте новый документ размером 128×128.

Когда вы закончите дизайн, экспортируйте его как PNG с прозрачным фоном.

Теперь вам нужно только преобразовать ваш PNG в ICO, но, к сожалению, Photoshop не поддерживает формат .ico по умолчанию.

Вам нужен сторонний инструмент, и в этом вам помогут несколько инструментов:

Как реализовать Favicons

Для онлайн-публикаций, опубликованных в iPaper

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

Вы просто загружаете его в свою медиа-библиотеку, а затем переходите к настройкам своего iPaper, выбираете Settings – Design и прикрепляете его из медиа-библиотеки. Тебе хорошо идти.

Для сайта

Если у вас есть доступ к HTML-коду вашего сайта, вставьте следующий код в его элемент.

Не забудьте заменить «website.com» на свой веб-сайт и загрузить маленькое изображение в корневую папку.

Не забудьте либо назвать его favicon.ico, либо изменить имя в коде.

для WordPress

Загрузите значок на свой сервер, назовите его «favicon.ico» и скопируйте следующий код в файл «header.php» своей темы.

Нужно вдохновение?

Я знаю, дизайн — это круто. Создание дези

gns для большого экрана — это непросто, но создать что-то полезное, работающее в формате 16×16, — задача сама по себе.

Ниже вы можете найти несколько ссылок для вашего вдохновения:

Заключение

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

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

Показывает высокий профессионализм и внимание к деталям.

Генераторы и ресурсы Favicon | Онлайн генераторы

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

Генераторы Favicon

Генератор favicon.ico

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

Favicon Maker

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

256 пикселей

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

Favicon Editor

Favion Editor — простой редактор favicon. У вас есть возможность загружать локальные файлы в качестве базового дизайна и редактировать его при необходимости.

Favicon / Icon Generator и Online-Editor

Favicon / Icon Generator — это немецкое веб-приложение для создания значков.

Genfavicon

Genfavicon — трехступенчатый генератор значков.Добавьте ссылку на изображение или загрузите его, обрежьте и загрузите как файл .ico или .jpg.

ConvertIcon

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

FavIcon из фото

FavIcon из фото — это простой генератор фавиконов. Он предоставляет вам предварительный просмотр того, как значок выглядит в адресной строке.

Dynamic Drive — FavIcon Generator

Dynamic Drive FavIcon Generator создает значки из наиболее популярных типов файлов изображений. Он поддерживает изображения с прозрачностью. Вы также можете использовать его для создания значков на рабочем столе Windows.

Favicon Generator

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

Favicon Resources

Favicon Collector

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

Faviconize

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

fineicons Favicon Gallery

fineicons Favicon Gallery — это одностраничная витрина некоторых из самых красивых иконок в Интернете. Есть три категории: символ, типографика и прочее.

Создание хорошего фавикона

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

Вдохновите себя: 50 замечательных фавиконов

В журнале Smashing Magazine есть серия постов, связанных с вдохновением от дизайна фавиконов. Это серия из 6 частей, а вот еще пять:

Я надеюсь, что эта статья была вам полезна, и если она вдохновила вас на создание значка (или переделать текущий), продемонстрирует вашу работу, отбросив ссылка в разделе комментариев на ваше творение !

Фавикон Фабрика

Политика конфиденциальности

Компания

Beyondcow создала приложение Favicon Factory как коммерческое приложение. Данная УСЛУГА предоставляется Beyondcow и предназначена для использования «как есть».

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

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

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

Сбор и использование информации

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

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

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

Данные журнала

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

Файлы cookie

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

Этот Сервис не использует эти «куки» явно. Однако приложение может использовать сторонний код и библиотеки, которые используют файлы cookie для сбора информации и улучшения своих услуг. У вас есть возможность принять или отклонить эти файлы cookie и узнать, когда файл cookie отправляется на ваше устройство.Если вы решите отказаться от наших файлов cookie, возможно, вы не сможете использовать некоторые части этого Сервиса.

Поставщики услуг

Мы можем нанимать сторонние компании и частных лиц по следующим причинам:

Для облегчения нашего Сервиса;
Для предоставления Услуги от нашего имени;
Для оказания услуг, связанных с Сервисом; или
Чтобы помочь нам проанализировать, как используется наш Сервис.

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

Безопасность

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

Ссылки на другие сайты

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

Конфиденциальность детей

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

Изменения в Политике конфиденциальности

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

Свяжитесь с нами

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

ТОП-30 веб-генераторов значков

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

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

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

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

Значок — это изображение / символ, помогающий идентифицировать веб-сайт.Фавикон — это короткое слово для обозначения избранного значка.

Это маленький значок в адресной строке веб-сайта размером 16 × 16 пикселей. Другие размеры: 32 × 32, 48 × 48 и 64 × 64. У значка есть расширение файла .ico.

Favicons имеют разные размеры в зависимости от платформы, на которой вы их используете. По словам креативщиков Bloq, это размеры:

16 × 16 пикселей — обычный значок браузера
32 × 32 пикселей — панели задач рабочего стола
96 × 96 пикселей — значки ярлыков на рабочем столе
120 × 120 пикселей — Значок сенсорного экрана Retina для iPhone
180 × 180 пикселей — iOS и Android device
192 × 192 пикселей — рекомендации манифеста веб-приложения для разработки Google.

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

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

1.IONOS от 1 и 1

Ionos favicon maker — это веб-инструмент, который позволяет вам бесплатно создавать свои значки.

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

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

2.DeGraeve

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

3.Логастер

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

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

4.Favicon.CC

Инструмент-генератор

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

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

5. Веб-инструменты

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

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

6. Сайт Planet Favicon Generator

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

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

7. Генератор Favicon с динамическим приводом

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

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

8. Favicon.ico и генератор значков приложений

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

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

9.Генератор настоящих фавиконов

Инструмент

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

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

10. GenFavicon

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

Инструмент GenFavicon также имеет инструмент предварительного просмотра для проверки созданного значка перед его использованием на веб-сайте.

11.Преобразование ICO

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

С помощью инструмента генератора значков ConvertICO вы также можете загрузить изображение со своего веб-сайта.

12.Prodraw Генератор Favicon

Бесплатный онлайн-генератор Prodraw предоставляет вам различные значки на выбор и использование.Этот инструмент поддерживает несколько форматов файлов, таких как JPG, PNG, BMP, TIF, JPEG и TIFF.

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

13. Преобразователь ICO

Инструмент

ICO Converter принимает изображения с различными форматами файлов для преобразования их в значки веб-сайтов или приложения Windows.

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

14.Генератор значков

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

15.Fav от Zyro

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

16. Редактор значков X-Icon

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

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

17.

Генератор фавикона

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

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

18.Favic-O-Matic

Favic-O-Matic — это онлайн-инструмент для создания значков с расширениями файлов .ico и .png. Значки бывают разных размеров, поэтому вам нужно выбрать тот, который вам больше всего подходит.

Инструмент также имеет расширенные настройки, в которых вы можете настроить свой значок.

19.FavIco.com

Чтобы создать значок для своего веб-сайта, загрузите свой логотип или изображение в инструмент генератора значков и отрегулируйте его размер. Этот инструмент конвертирует изображения JPG, GIF и PNG в значки.

20.Favicon

Favicon r — это бесплатный онлайн-инструмент для создания значков, который конвертирует типы файлов JPG / PNG и GIF. Чтобы использовать этот инструмент, загрузите изображение или логотип, чтобы создать значок для вашего веб-сайта.

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

21. Фавикон

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

Вы можете загрузить значок .ico или .png.

22.Favicon бесплатно

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

23.Генератор значков от SearchEngineReports

Инструмент генератора значков — еще один бесплатный инструмент, который можно использовать при создании значков. Для создания значка необходимо загрузить изображение в формате JPG, GIF, PNG или JPEG.

Вы можете загрузить изображение со своего локального компьютера или Dropbox.

24.Генератор значков

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

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

25.Faviconit

Генератор

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

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

26. RedKetchup Favicon Generator

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

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

27. Генератор Favicon от Wizlogo

С помощью инструмента Wizlogo favicon вы загружаете изображения в форматах GIF, JPG и PNG. Программное обеспечение преобразует его в значок приложения или значок.

Значки приложений предназначены для веб-сайтов, iOS, Windows и Android. Создаваемые значки имеют формат .ico. Инструмент генератора значков Wizlogo можно использовать бесплатно.

28. Интернет-значок

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

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

Доступные размеры этого инструмента: 16 × 16 и 32 × 32. Он также использует стандартный формат файла, то есть .ico. Кроме того, если вам нужен прозрачный значок, загружаемые изображения должны иметь файл GIF или PNG и прозрачный фон.

29.ИКОНОГЕН

Генератор значков

ICONOGEN можно использовать бесплатно. Этот веб-инструмент позволяет загружать изображения в форматах JPG, GIF и PNG.

С помощью этого инструмента вы можете преобразовывать изображения для создания значков, плиток Windows 8, значков Apple Touch, значков Android и iOS.

30.FavIcon из фото

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

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

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

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

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

С другой стороны, если вы используете систему управления контентом, такую как WordPress, вы добавляете значок в разделе настройки. Вы также можете использовать плагин All In One Favicon для использования с готовым значком.

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

Ниже приведены некоторые примеры значков от различных компаний:

UPQODE

Upqode — отмеченная наградами компания в области цифрового маркетинга и веб-дизайна из Нэшвилла, штат Теннесси. Значок Upqode виден из адресной строки.

Google

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

Facebook

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

WordPress

WordPress — это система управления контентом, используемая для разработки веб-сайтов и блогов.

Amazon

Amazon — это онлайн-платформа для розничной торговли и поставщик облачных услуг.

Youtube

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

Yoast

Yoast — это плагин WordPress, используемый для оптимизации веб-сайтов и контента. Это помогает улучшить читаемость и рейтинг контента в поисковых системах.

Важность фавикона на сайте

Значок — важный элемент идентичности бренда.Вот некоторые из преимуществ наличия значка:

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

Таким образом, значок веб-сайта экономит время пользователя, которое в противном случае он бы потратил на поиск вашего веб-сайта в поисковой системе. Это помогает пользователям «запомнить» веб-сайт, глядя на значок.

Улучшает ли брендинг наличие значка на веб-сайте?

Наличие значка на веб-сайте помогает улучшить его бренд.

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

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

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

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

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

Добавить значок — Торговля | Динамика 365

Статья

31.03.2021
2 минуты на чтение

Эта страница полезна?

Оцените свой опыт

да Нет

Любой дополнительный отзыв?

Отзыв будет отправлен в Microsoft: при нажатии кнопки «Отправить» ваш отзыв будет использован для улучшения продуктов и услуг Microsoft.Политика конфиденциальности.

Представлять на рассмотрение

В этой статье

В этом разделе объясняется, как добавить значок на ваш сайт.

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

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

Загрузите значок в коллекцию активов вашего сайта

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

На левой навигационной панели выберите Медиа-библиотека .
На панели команд выберите Загрузить> Загрузить элементы мультимедиа .
В окне проводника перейдите к файлу изображения значка, который вы хотите загрузить, выберите его, а затем выберите Открыть .
В диалоговом окне Загрузить элемент мультимедиа введите требуемый заголовок и замещающий текст.
Если вы хотите опубликовать изображение сразу после загрузки, установите флажок Публиковать элементы мультимедиа после загрузки .
Примечание
Если вы не установите флажок Опубликовать элементы мультимедиа после загрузки , необходимо вернуться на страницу Элементы мультимедиа и позже вручную опубликовать значок.
Выбрать ОК .
На панели свойств справа скопируйте общедоступный URL-адрес значка. Вы будете использовать этот URL позже.

Создайте HTML для вашего значка

Чтобы создать HTML для значка, используйте следующую строку HTML. Для атрибута href замените Public_URL_for_your_favicon общедоступным URL-адресом, который вы скопировали ранее.

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

Перейдите к Fragments и выберите New .
В диалоговом окне Новый фрагмент выберите Метатеги в качестве модуля, на котором основан фрагмент.
Введите имя фрагмента, а затем выберите ОК .
В дереве иерархии фрагментов выберите Метатеги по умолчанию дочерний.
На правой панели в разделе Мета-теги выберите Добавить , а затем введите строку HTML, которую вы создали ранее для значка.
Выберите Завершить редактирование , а затем выберите Опубликовать , чтобы опубликовать фрагмент.

Добавьте фрагмент метатега в раздел заголовка HTML на своих страницах

Чтобы добавить фрагмент метатега в раздел HTML head ваших страниц, выполните следующие действия.

Перейдите к Templates , откройте шаблон для страниц, на которые вы хотите добавить свой значок, а затем выберите Edit .
В дереве иерархии шаблонов выберите многоточие (… ) справа от контейнера HTML head , а затем выберите Добавить фрагмент .
В диалоговом окне Выбрать фрагмент выберите фрагмент метатега, который вы создали ранее, а затем выберите OK .
Выберите Завершить редактирование , а затем выберите Опубликовать , чтобы опубликовать шаблон.

Примечание

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

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

Дополнительные ресурсы

Добавить логотип

Выберите тему сайта

Работа с файлами переопределения CSS

Добавить приветственное сообщение

Добавить уведомление об авторских правах

Добавьте языки на свой сайт

Добавить код сценария на страницы сайта для поддержки телеметрии

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

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

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

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках. Википедия включает статья о 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 очень похожа:

   0 Strict // EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

 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.

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

Ограничения

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

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

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

FAVICON-WIKIPEDIA: Favicon , Википедия, Доступно на http: // ru.wikipedia.org/wiki/Favicon.
ГРДДЛ: Собирать Ресурсные описания диалектов языков , 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).

Что такое Favicon? — Ellanyze

Фавиконы . Я обещаю, что после того, как я расскажу вам, что это такое, вы сразу захотите свои собственные, так что продолжайте читать.Чтобы увидеть, что такое значок, сначала откройте выбранный вами Интернет-браузер (Firefox, Chrome и т. Д.) И посмотрите на открытые вкладки (вкладки появляются, когда в одном окне браузера открыто несколько сайтов). Вверху каждой вкладки вы должны увидеть название просматриваемого веб-сайта, например: «Google» или «The New York Times». И слева от заголовка сайта вы должны увидеть очень маленькое изображение. Это значок. Создать и реализовать свой собственный значок не так уж сложно, и я собираюсь провести вас через процесс шаг за шагом.

Шаг 1. Создайте изображение Favicon

Вам нужно создать идеально квадратное изображение размером не менее 600 пикселей как по высоте, так и по ширине. Ваш значок может быть файлом PNG или JPG, но имейте в виду, что если вы хотите, чтобы ваш значок имел прозрачные области (например, чтобы ваш логотип отображался без цветного фона), это должен быть PNG. Вы можете использовать Photoshop, если он у вас есть, или Canva тоже отлично подойдет. Имейте в виду, что значки значков, когда они появляются на панели вашего браузера, имеют чрезвычайно малый размер , так что будьте проще.Здесь не так много места для деталей и нюансов. В основном вы хотите, чтобы это было легко увидеть и согласовать с вашим бизнесом и брендом.

Шаг 2. Установите Favicon

Если у вас есть веб-сайт WordPress, то, скорее всего, вы сможете установить свой значок с помощью вкладки «Внешний вид» -> «Настроить» в настройках темы. Однако, если вы не можете найти, где установить свой значок в своей теме, вы всегда можете установить подключаемый модуль Favicon от RealFaviconGenerator. Его очень легко использовать, а инструкции указаны на странице плагина.

Если у вас есть сайт Squarespace, Wix или Weebly, вы сможете установить свой значок (он также может называться «значок сайта») в настройках своего сайта. Вот инструкции для Squarespace, Wix и Weebly. Если у вас есть другой конструктор веб-сайтов, вы можете погуглить имя своего конструктора веб-сайтов и слово «favicon», чтобы найти то, что вы ищете.

Ручная установка

При желании вы также можете установить значок вручную на уровне сервера через FTP. Рекомендую RealFaviconGenerator.net для создания вашего пакета значков.

Процесс состоит в следующем: 1) Загрузите пакет favicon, 2) Загрузите пакет favicon на УРОВЕНЬ КОРНЕВОГО УРОВНЯ вашего веб-сайта на сервере и 3) Добавьте предоставленный спиннет кода в заголовок вашего веб-сайта.

На главной странице веб-сайта Real Favicon Generator нажмите «выберите изображение своего значка» и выберите на своем компьютере изображение, которое вы создали ранее. На следующей странице вы можете оставить все настройки как есть. Вы заметите, что вам нужно ввести что-то в текстовое поле после «Имя приложения.«Введите здесь что-нибудь, так как вы не собираетесь использовать это для приложения. Прокрутите вниз и нажмите« Создать свои значки и HTML-код ». На следующей странице нажмите кнопку с надписью« Пакет значков »и ZIP-файл. будет загружен на ваш компьютер. Распаковав этот файл, вы обнаружите набор файлов, которые вы загрузите на сервер своего веб-сайта, чтобы ваш значок появился рядом с заголовком вашего сайта в окне браузера.

Вам нужно будет получить доступ к своему веб-сайту на сервере через файловый менеджер в cPanel или с помощью клиентского приложения FTP, такого как Cyberduck или Filezilla.После того, как вы подключитесь к своему веб-сайту на сервере, вы хотите загрузить все файлы из вашего пакета значков на веб-сайт ROOT LEVEL (то есть не внутри каких-либо подпапок или каталогов).

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

Comments

Leave Comment