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

Содержание

Сделать стандартный значок favicon.ico для сайта онлайн

Обработка JPEG фотографий онлайн.

Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.

Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:

Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность — transparency) используя, например, функцию в Фотошопе «Сохранить для веб…» (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.

Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами <head>…</head> так: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»> где favicon.ico — это название созданного значка.

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

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

1) Укажите изображение в формате JPEG, BMP, PNG: 2) Настройки генерируемого значка favicon.ico

Размер favicon.ico для сайта: 16×16 (стандарт)32x3248x4864x64

(Стандартный размер favicon для сайта 16×16, а вот, например, favicon.ico на сайте wikipedia имеет размер 48×48 пикселей.)

3) Цветовая коррекция favicon.ico (по умолчанию всё отключено)

Повысить резкость: (0-10)
Насыщенность: (от -100 до 100)

Тон цвета: (0-180, 100=не изменять)
Яркость: (от -100 до 100)
Контрастность: (от -100 до 100)

www.imgonline.com.ua

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

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

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

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

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144.png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

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

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

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

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

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

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

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

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

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: https://mobiforge.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

webformyself.com

3 способа создать favicon для сайта бесплатно

Что такое Favicon? Как правильно создать favicon? Где создать favicon online? 3 простых правила успешного favicon, вы можете ответить на эти вопросы? Если да, то бежим в комментарии 😉 , если нет, то читаем статью, а перед этим подписываемся на бесплатную рассылку уроков от WpMen, я уверен, найдется еще много вопросов, на которые вам было бы интересно узнать ответ.

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

Замечали, когда ищете полезную информацию на Yandex, рядом с результатами поиска появляются маленькие картинки (Как оптимизировать изображения для сайта?), которые и отвечают на вопрос: Что такое Favicon? Правильно созданная мини-картинка позволяет выделиться из груды сайтов, с которыми вы конкурируете.

Как правильно создать Favicon?

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

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

Список сайтов с готовыми фавикон:

Iconj — На мой взгляд самая большая в интернете база с favicon изображениями.
Favicon.cc — Еще один не плохой сайт с солидной базой фавикон, где вы так же можете создать свой online.
audit4web — Русская база favicon (фавикон) иконок…

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

Создать Favicon онлайн:

Теперь самое интересное, для того, что бы самостоятельно создать favicon online, мы с вами должны перейти на сайт Favicon.ru Вы так же можете создать онлайн и на сайте Favicon.cc, который я описывал ранее, по функционалу он очень похож, но мне нравится наш сайт…

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

Еще в красной рамочке я указал список возможностей, вы можете перемещать нужные объекты в изображении, пользоваться заливкой, захватом цвета и так далее… Функционал понятен на интуитивном уровне, что бы скачать, необходимо нажать на соответствующую кнопку — Скачать Favicon.

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

Если после этого изображение не отображается, то необходимо в фале 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" />

Будьте внимательны, во многих современных темах, фавикон можно добавить в настройках темы, то есть шаблон (Как выбрать шаблон?) автоматически устанавливает загруженную вами тему, у меня например так На этом все дорогие друзья, надеюсь урок вам понравился, дальше будет еще интереснее. Подписывайтесь на меня в Twitter, что бы постоянно следить за новыми статьями До встречи, жду ваших комментариев, ваш Альберт и WpMen… 😉Чуть не забыл, сегодня в сети нашел клон WpMen. Недавно созданный сайт, тематика сайта — схожа на мою, давайте вместе наблюдать как он будет развиваться 😉

wpmen.ru

Как создать favicon ico для сайта. Делаем фавикон

Для того что бы узнать, как создать favicon.ico для сайта, нужно для начала узнать что это собственно такое и для чего оно нужно, тем кто этого не знает)

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

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

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

Есть несколько способов.

Можно нарисовать фавикон вручную, с помощью графического редактора (фотошоп не умеет сохранять файлы с расширением .ico поэтому нужен будет или специальный плагин, или другая программа) главное помните — размеры должны быть 16х16.
А можно из готовой картинки сделать фавикон, воспользовавшись одним из онлайн-сервисов которых сейчас довольно много. Я использовал вот этот при создании фавикона для ruskweb.ru. Раньше я пользовался другим сервисом, но там иконки получались размытыми, этот мне понравился гораздо больше, иконки более четкие.

Делов тут на пол минуты. Заходим на сайт, жмем кнопку Import Image

Выбираем наше изображение, из которого хотим сделать иконку

И скачиваем его к себе на компьютер

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

Для того что бы увидеть изменения нужно закрыть страницу нашего сайта и очистить кэш браузера. Затем заново загрузить страницу и наслаждаться красивой иконкой)

Как сделать еще более уникальным ваш блог на WordPress можно прочитать в других моих постах.

ruskweb.ru

как сделать и установить на сайт

С месяц назад для блога pervushin.com сделал я иконку, в простонародье favicon. Так вот после долгих размышлений, раздумываний и рассусоливаний я решил написать эпопею о создании своего favicon.ico. В этой статье Вы найдёте небольшие обзоры оказавшихся у меня на пути сервисов по созданию таких иконок, несколько ссылок где можно скачать уже готовые иконки и как эту самую готовую иконку установить на сайт. В конце поста как обычно Вас ждёт жирный бонус и сладкое. Спасибо за Ваши комментарии и RT pls.

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

Фишка это несомненно полезная, мало того что создаётся эдакий эффект бренда, узнаваемости, так она и внимание привлекает, картинка всё-таки, а о полезности картинок я уже писал как-то, почитайте. Вот например многими «любимый» Яндекс в результатах поиска иконки сайтов отображает:

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://pervushin.com/favicon.yandex.net/favicon/pervushin.com, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы :).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

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

Favicon.cc

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

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное :).

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

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, читаем здесь как, и присоединяемся ко мне :).

Итак, я указал свой логин в твиттере @pervushin_com и нажал заветную кнопку «Generate Favicon«. Попадаем на следующую страницу с дополнительными настройками. Там всё на английском, но разобраться будет не трудно. Во-первых к своей иконке я добавил анимацию в виде бегущей строки «Sergey Pervushin.com». Далее настроил цвет — зелёный (green). Цвет фона прозрачный (transparent). Здесь же можно добавить иконки для iphone, ipad и т.д., но не переусердствуйте, помните про размер.

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

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

* http://pervushin.com/www.cy-pr.com/tools/favicon/
* http://pervushin.com/genfavicon.com/
* http://pervushin.com/www.tools.dynamicdrive.com/favicon/
* http://pervushin.com/favicon-generator.org/
* http://pervushin.com/www.faviconfactory.com/
* http://pervushin.com/shaheeilyas.com/favicon/
* http://pervushin.com/www.degraeve.com/favicon/
* http://pervushin.com/michurin.com.ru/favicon-editor.shtml

Скачать готовый Favicon для сайта

Если Вам лень делать иконку, хотя чего уж тут лениться, дело 2-х минут, то можно скачать готовые, ниже несколько адресов, где этих favicon.ico завались:

1. http://pervushin.com/www.audit4web.ru/favicon/ — более 15000 иконок.
2. http://pervushin.com/www.iconj.com/ — более 18000 иконок, кто больше? Есть также и анимированные. Также и генератор favicon есть, причём очень даже не плохой.

Установка Favicon.ico

У меня движок на wordpress, будем исходить из него, но принципиально установка favicon на других движках или html страницах ничем не отличается и проходит она в два этапа: 1. Загрузка файла на сервер; 2. Прописываем специальные теги в движок. Всё на самом деле очень просто.

Все поисковые роботы ищут иконку в корне сайта, т.е. иконка должна, точнее желательно, хоть и не обязательно, находится по адресу, например, http://pervushin.com//favicon.ico. Но для движков, таких как wordpress, в сети много разных тем, вместе с этими темами в комплекте часто идут свои favicon и пути у них прописаны соответственно расположению этого favicon в папках темы, например адрес.ру/шаблоны/тема/изображения/favicon.ico. Вам необходимо либо просто заменить стандартный ico на свой, либо перепрописать пути, я поступаю именно так.

Закинул оба файла в корень pervushin.com, это favicon.ico и animated_favicon.gif и в файле своего шаблона header.php между тегом <head></head> прописал следующее:

<link rel="shortcut icon" href="http://pervushin.com//favicon.ico" >
 </link><link rel="icon" type="image/gif" href="http://pervushin.com//animated_favicon.gif" >
 </link>

Готово! Стильного Вам фавикона и удачной работы!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: Славная бабулька, с юморцом :).

Читаем дальше:

11 на запись «Favicon.ico: как сделать и установить на сайт»

pervushin.com

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

Быстрая навигация по этой странице:

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

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

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.

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

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

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

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

Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

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

Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

Для добавления favicon html код является следующим:


<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />

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

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

www.runcms.org

HTML: Фавикон (favicon) — создание, добавление, польза

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

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

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:


<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

	Google Chrome	Internet Explorer	Firefox	Opera	Safari
<link rel=»shortcut icon» href=»httр://mysite.ru/myicon.ico»>	Да	Да	Да	Да	Да
<link rel=»icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да

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

puzzleweb.ru

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

Сделать стандартный значок favicon.ico для сайта онлайн

favicon.ico и другие форматы, поддержка браузерами

Что такое favicon?

Что такое формат favicon .ico (ICO)?

Как подключить favicon?

Размещение favicon.ico в корне сайта

Подключение favicon через тег link

Подключение иконок через Web App Manifest: manifest.json

Подключение иконок через файл browserconfig.xml

Так много способов подключения иконки – какой использовать?

Почему столько много способов подключения favicon?

Какие размеры favicon использовать?

Рекомендации Chrome

Рекомендации Safari

Закрепленные вкладки в Safari

Плитки Microsoft Windows

Собираем все вместе

Разметка favicon

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

Нам действительно нужны все эти favicon?

Пусть браузер сам занимается уменьшением

Минимальный набор иконок

Будущее favicon

SVG favicon

Препроцессоры. Быстрый старт

3 способа создать favicon для сайта бесплатно

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

Как правильно создать Favicon?

Список сайтов с готовыми фавикон:

Создать Favicon онлайн:

Как создать favicon ico для сайта. Делаем фавикон

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

как сделать и установить на сайт

Favicon генераторы

Скачать готовый Favicon для сайта

Установка Favicon.ico

Читаем дальше:

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

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

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

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

HTML: Фавикон (favicon) — создание, добавление, польза

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

Создание

Добавление фавикона

Добавить комментарий Отменить ответ