Favicon (сокр. от англ. FAVorites ICON - "значок для избранного", от названия папки с закладками в MSIE) - значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.
Большинство профессиональных веб-сайтов, как правило имеют их, с одной стороны это не только поместит ваш сайт в ряд профессионалов, но и поможет вам отличаться от остальных сайтов.
Если Вы хотите такой, то это очень легко значок с нашим генеротором. Все что вам нужно это изображение (любого размера), передать его, используя форму ниже, и через несколько секунд вы получите обратно несколько сжатых изображений для использования в качестве фавиконки. Это действительно просто!
Большинство версий основных браузеров поддерживают фавиконки. Например Internet Explorer 5/6/7+, Firefox 1/2 +, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3 +, Safari и другие.
Исходное изображение (Максимальный размер: 150 Кб):
Favicon – лицо вашего ресурса в браузере
Очень часто, открывая сайт в браузере, пользователи видят небольшой значок рядом с URL ресурса - favicon (фавикон, фавинконка), который, по сути, является лицом интернет-проекта. Favicon – это сокращение от английского словосочетания "favorites ICON", обозначающего "значок для избранного". Если вы "укомплектовали" свой ресурс фавиконкой, то он сможет выгодно выделиться на фоне остальных сайтов, открытых пользователем во вкладках браузера. Очень часто фавикон является уменьшенной копией логотипа интернет-проекта или компании (например, как у Википедии, Google или Facebook), но можно увидеть и специально созданные значки, просто отображающие суть или тематику проекта. Первый значок favicon появился в 1999 году, когда поисковая корпорация Microsoft представила свой веб-обозреватель Internet Explorer 5: именно в этой версии браузера началась поддержка миниатюрных значков для сайтов. А в 2003 году формат favicon был официально зарегистрирован в Internet Assigned Numbers Authority (IANA). Сейчас Microsoft утратила монополию в этой нише, и все современные браузеры (как десктопные, так и мобильные) поддерживают фавиконки. Для чего предназначен инструмент "Генератор Favicon"? С помощью инструмента "Генератор Favicon" вы сможете создать уникальную фавиконку для своего сайта. Для этого необходимо лишь загрузить в специальном поле исходное изображение, размер которого не должен превышать 150 Кб, выбрать необходимый размер будущей иконки (16х16 или 32х32 пикселей) и нажать кнопку "Конвертировать". Полученный значок в формате ICO можно использовать для размещения в Сети: он будет совместим с большинством современных браузеров. Примите к сведению, что многие современные веб-обозреватели осуществляют автоматическую загрузку favicon.ico из корня ресурса, не требуя указания в кодах страниц. Однако, если веб-мастер хочет использовать отдельный фавикон для каждой страницы сайта, то он должен указать его положение внутри секции в HTML-коде ресурса. Также учтите, что значок не отобразится в браузере, если его Content-type в ответе веб-сервера не совпадет с указанным полем заголовка в коде страницы. Как должен выглядеть хороший фавикон? Несмотря на то, что размер фавикона очень мал (16х16 или 32х32 пикселей), этот значок несет в себе очень большую смысловую нагрузку, и его создание является достаточно сложным процессом, который занимает у веб-дизайнеров столько же времени, сколько и разработка полноценного логотипа. Очень часто бывает так, что логотип компании абсолютно не подходит на роль фавикона. В таком случае, вам придется пустить в ход все свое мастерство и фантазию. Будущий favicon должен врезаться в память пользователя так сильно, чтобы в будущем этот значок ассоциировался у него исключительно с вашим ресурсом. При создании фавикона у вас не будет возможности "разбрасываться" пикселями: каждый из 256 (или 1024) пикселей имеет значение. Подкорректируйте заранее вручную пиксели, которые имеют "туманный" цвет, потому как при сжатии рисунка значок может получиться размытым и потребует корректировки в графическом редакторе. Учтите, что фоторедактор Adobe Photoshop не сохраняет изображения в формате ICO, поэтому конвертировать изображение в этот формат вы сможете с помощью нашего сервиса "Генератор Favicon".
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон ). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон .
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока :
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc . Этот сервис по построению фавиконок выглядит так:
– Да, в этом сервисе тоже есть уже готовые фавиконки.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в
Легкое создание Favicon для сайта размером 16x16px. Онлайн редактор позволяет за пару минут создать свой собственный и уникальный фавикон для сайта.
Создать Favicon
Как добавить Favicon на сайт?
Добавить свой созданный фавикон на сайт, очень легко. Переименуйте иконку в favicon.ico , после чего загрузите ее в корень вашего сайта, чтобы иконка была доступна по адресу: www.mysite.ru/favicon.ico . После загрузки файла favicon.ico , необходимо добавить следующий код в шаблон вашего сайта:
Данный код необходимо поместить в верхней части страницы вашего шаблона, между тегами
....После этого необходимо обновить страницу в браузере. В некоторых случаях, если браузер не отображает иконку Favicon, может потребоваться обновить кэш браузера в настройках.
Функции и возможности редактора Favicon?
Наш онлайн редактор Favicon имеет довольно простой интерфейс, при этом позволяет очень качественно создать иконку фавикон для сайта.
Возможности:
- Выбор 1 из 8 предустановленных ярких и сочных цветов для кисти.
- Выбор любого цвета для рисования в формате Hex кода (пример: #ff5555).
- Удобный выбор любого цвета для рисования с использованием палитры и ползунков
- Инструмент «Кисть для рисования»
- Инструмент «Заливка фона» позволяет полностью закрашивать фон или отдельную часть иконки, если есть разделение.
- Инструмент «Стерка» позволяет стирать любые участки иконки
- Инструмент «Пипетка» позволяет определить любой цвет который использовался ранее. Данный инструмент работает только в области окна редактора.
- Возможность подключать/отключать сетку, для более точного рисования Favicon
- Возможность смены фона на белый или клетчатый
Для чего нужен Favicon на сайте?
В первую очередь отображение Favicon сайта, украшает вкладку открытия сайта в браузере и закладки браузера.
Также наличие на сайте иконки Favicon, придает сайту более красивое отображение в поисковой выдаче популярных поисковых систем.
Зачем мне рисовать Favicon?
Рисование своими руками на онлайн сервисе создания Favicon, даст вашей иконке полную уникальность. Вы можете полностью с нуля нарисовать фавикон для сайта используя для этого простые инструменты (кисть, стерку и заливку). При этом рисовать можно совершенно любыми цветами и в любом положении.
Как правильно нарисовать Favicon?
При рисовании favicon для сайта, важно знать что в сетке иконки 16x16px располагается 256 пикселей. При точечном рисовании фавикон кистью, она закрашивает 1px.
При создании Favicon, особое внимание уделите цветам на палитре. Если вы хотите сделать качественную иконку, которая не будет выглядеть как "пиксель", обязательно сделайте смягчение углов. Делается это очень просто. Достаточно выбрать в палитре цвет светлее основного и закрасить им необходимую область. В данном случае иконка получит мягкие углы. Таким приемом можно рисовать идеальные фигуры (круги, овалы и пр.). Примеры рисования Favicon можно посмотреть на странице
Структура : Фавикон — это маленький значок, который используется для визуальной идентификации вашего сайта в закладках, также его вы видите рядом с вашим сайтом или именем страницы на вкладках браузера. Как правило, фавикон представляет собой квадрат размером 16х16 пикселей в формате favicon.ico. В этой стате мы объясним какая “основа” вам нужна для начала работы, поможем вам создать фавикон с помощью графических редакторов и расскажем о способах добавления фавиконки на сайт. Что нужно для начала работы?
- Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
- .PNG формат изображения;
- Графический редактор Adobe Photoshop или GIMP.
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
1) Откройте логотип в формате PNG на прозрачном фоне в редакторе нажав: “Файл” — “Открыть” и выберите изображение на вашем компьютере. 2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
3) Теперь, измените размер логотипа на 16х16 пикселей нажав: “Изображение” — “Размер изображения”
. 
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть. 
5) Сохраните изображение нажав “Файл” — “Сохранить как”
и выберите тип файла “PNG”
. 
Если ваш логотип выглядит отлично, то переходите к шагу 4. Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом. 2) Удалите текст и оставьте только иконку: воспользуйтесь инструментом “Пипетка” , чтобы выбрать цвет в соответствии с фоном — цвет на палитре автоматически измениться на нужный. Теперь, кликните на инструмент “Кисть” и зарисуйте текст.
3) Измените размер нажав “Изображение” — “Изменить размер”
, и в соответствующем поле введите показатели 16х16 пикселей. Если изображение выглядит пропорционально — сохраните в формате.PNG и переходите к шагу 4. 
Создаем фавикон с помощью GIMP — GNU Image Manipulation Program
GIMP — это графический редактор, который позволяет пользователям работать с векторной графикой. Преимущество данной программы в том, что вы можете создать фавикон в формате.ICO и не придется, как в случае с Adobe Photosop, использовать конвертеры изображений. 1) Откройте файл в программе, нажав “Файл” — “Открыть” и выбрав нужное изображение с компьютера.
2) Теперь нужно удалить текст, чтобы осталась только иконка: кликните по цветовой палитре и укажите цветовой код корпоративного фона. Если он вам не известен, просто кликните на инструмент “Пипетка”
, наведите его на фон логотипа и кликните левой кнопкой мышки — цвет задастся автоматически. Теперь, используя инструмент “Кисть”
, зарисуйте ненужный текст. 
3) Уменьшите размер логотипа до стандартного размера фавиконки — 16х16 пикселей, нажав: “Изображение” — “Изменить размер изображения”
. 
4) Экспортируйте лого нажав “Файл” — “Экспортировать как …”
. 
5) И выберите тип файла для экспорта — Значок Microsoft Windows с расширением ICO. и кликните “Экспортировать”
. 
Готово! Теперь, вы можете использовать фавикон на сайте! Преимущества использования.ICO перед.PNG или.GIF
- Совместимость: все браузеры, включая IE 5.0, поддерживают формат.ico.
- Избежание ошибок сервера 404: все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать файл favicon.ico, поэтому лучше всегда иметь файл favicon.ico.
- Файл.ico может содержать более одного значка, поэтому не нужно создавать несколько файлов для значков размерамы 16×16 и 48×48 пикселей.
Конвертируйте.PNG в.ICO с помощью онлайн-конвертеров
Для того, чтобы конвертировать.PNG файл в.ICO вы можете использовать онлайн-конвертеры. Мы, для примера, выбрали online-convert.com, но вы можете выбрать любой другой из поисковой выдачи, принцип работы у них примерно одинаковый. Итак: 1) Войдите на сайт и в левом сайдбаре выберите: “Конвертер изображений” — “Конвертирование в ІСО”.
2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”
, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”. 
3) Теперь, нажмите “Загрузить”
, чтобы скачать ваш файл в формате.ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP. 
Как установить фавикон на WordPress?
Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php. 1) На WordPress откройте “Административную панель”.
2) Войдите в раздел 
3) Нажмите на 
4) Нажмите на файл, который называется “Header”
или, чтобы редактировать. 
5) Найдите строку кода, которая начинается с и заканчивается на /favicon.ico «/>
. Измените его, если он существует, или добавьте следующий код под HTML-тегом
. В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно. Код: /favicon.ico»/>
; 6) Сохраните изменения. Выводы
: При разработке вашего сайта вы должны быть уверенны, что не упустили важные детали, даже такие мелкие как фавикон. Добавить иконку действительно не сложно. Но эта крошечная вещь показывает, что вы продумали свой дизайн и позаботились о деталях. У вас остались вопросы, или вы хотите поделиться опытом создания фавикона для вашего сайта? Добро пожаловать в комментарии.
Favicon (англ. Favorite Icon) - это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).
favicon - это дополнительное украшение для Вашего сайта, Ваш мини логотип. Он также показывается при просмотре списка сайтов в поиске яндекса, гугла и выделяет Ваш сайт на фоне остальных.
Зачем нужен favicon для сайта?
favicon – товарный знак Вашего сайта. У многих компаний на сегодняшний день есть отличительный favicon значок, который выделяет их среди конкурентов. Чтобы иконка лучше запоминалась пользователями, компаниям следует отображать в ней свой логотип, который также должен быть одним из эллементов шапки сайта. Ещё одна положительная особенность использования favicon в том, что при просмотре большого количества сайтов в браузере, Вы не видите заголовка страниц полностью, а видите только иконку и вы сразу с легкостью можете определить ту вкладку, куда Вы хотели перейти.
Что лучше изобразить на фавикон?
- Иконка должна соответствовать тематике сайта.
- бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
- Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
- Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
- Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).
Как сделать анимированный favicon?
Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:
Естественно предварительно нужно поместить оба файла в корневую папку сайта.
Как быть, если запрещен показ изображений в браузере?
Если сделать favicon c внедренным изображением в код старницы:
То иконка будет показываться в браузере даже тогда, когда картинки будут отключены. .
Как получить favicon с сайта
Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:
]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) { $link_tag = $out; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) { $favicon = trim($out); if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/"); } } ?>
Поисковые системы Google, Яндекс и favicon
Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:
Кроме этого, Яндекс может сделать Вам "спрайт" из иконок разных сайтов:
Иконки для iPhone и iPad
Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57x57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:
Как динамически менять favicon?
Если Вы попробуете поменять значение свойства тега через DOM, то Вы не пролучите желаемый результат. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так: // Ссылка на файл новой иконки var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Найти и удалить старую иконку из тега HEAD var links = head.getElementsByTagName("link"); for (var i = 0; i < links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);HTML5 и favicon
В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Как объявить плитку для планшетов на Windows 8?
Объявление для Windows 8.0 выглядит как-то так:
Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:
Можно не объявлять, если имя файла не менять: