Создание favicon.ico

Fima Korolev

Создаем favicon

Инструкция по созданию и размещению фавикона

 

Приветствую всех!

При создании сайтов либо их SEO оптимизации, приходится общаться с людьми разного уровня компьютерной грамотности. Вот после одного такого общения я решил написать статью, подробно описывающую все этапы по созданию фавикона – “..картинки вверху, там, где названия пишутся..”.
Фавикон (favicon) – это маленькая пользовательская иконка, которая отображается во вкладках браузера и находится слева от заголовка (Title) страницы. В качестве фавикона, чаще всего, используют логотип сайта, уменьшенный до 16 x 16 пикселей. Ниже приведен пример сайта, который имеет фавикон и тот, который не имеет.

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

Руководство по созданию фавикона

 

Шаг 1: Создаем свой образ
Если у вас уже есть логотип или изображение, которое представляет ваш сайт, просто откройте этот файл с изображением в графическом редакторе, например Adobe Photoshop или Fireworks. Если у вас еще нет такого редактора на компьютере, есть и другие варианты, такие как онлайн редактор pixlr.com.
Если вокруг вашего логотипа есть много белого пространства, не забудьте обрезать его, а затем уже уменьшить до требуемого размера 16 х 16 пикселей (я как-то сделал размер 32 Х 32 и нормально прокатило). Если логотип очень сложный по дизайну, и не хочет отображаться в размере 16 X 16 пикселей, его можно упростить, или даже использовать другое изображение, подходящее о смыслу и дизайну, к вашему сайту в целом. В этом случае постарайтесь включить в фавикон основные цвета вашего сайта. Но все же, лучше использовать логотип сайта.
После того как вы уменьшили размер изображения до 16 X 16 пикселей, сохраните файл в формате JPG, PNG, GIF,BMP, или TIF.

Рекомендую к прочтению:  Мета теги

Шаг 2: преобразовать изображение
Теперь необходимо преобразовать изображение в файл ICO. Есть несколько интернет инструментов, которые можно использовать для достижения этой цели. Хороший, бесплатный генератор всевозможных иконок доступен по адресу prodraw.net . Просто загрузите ваше изображение, выделите размер значков, и все. Вы можете скачать ваш новый файл с расширением ICO. Но, естественно есть путь значительно легче:
Просто выделяем файл, кликаем правой кнопкой мыши, выбираем переименовать и меняем разрешение JPG, PNG, GIF, BMP, или TIF на ICO (для этого у вас должна быть активирована функция “Показывать расширения файлов ” Пуск ->> Панель управления ->> Параметры папок ->> Вид ->> снять галочку в пункте «Скрывать расширения для зарегистрированных типов файлов»).

Шаг 3: Загрузите изображения
Теперь, когда у вас есть свой файл favicon.ico, вам нужно загрузить его в корневой каталог вашего сайта. Изображение должно быть видимым, когда вы переходите по адресу http://ваш сайт/favicon.ico после его загрузки (конечно заменив “ваш сайт” действительным именем домена). Не загружайте фавикон в папку с изображениями, такую как: http://ваш сайт/images/favicon.ico !!!

Шаг 4: Добавление кода
Большинство современных браузеров автоматически определяют наличие фавикона в корневом каталоге и показывают его во вкладке браузера. Поэтому, особого смысла в добавлении кода на ваши страницы нету, но если очень хочется, то можно добавить простые строчки кода в раздел <head>, чтобы все, без исключения, браузеры отображали ваш фавикон должным образом. Ниже приведен код, который вам нужно добавить.

*< link href=”favicon.ico” rel=”shortcut” type=”image/vnd.microsoft.icon” data-mce-href=”favicon.ico” / >

* – При копировании кода не забываем удалять пробел после < и перед >

Имейте в виду, что в разделе <head> вашего веб-сайта будут и другие элементы, такие как заголовок и мета-описания, а также ссылки на файлы CSS. Приведенный выше код можно добавить в любом месте между < head> < /head>.

Рекомендую к прочтению:  Продвижение туристических услуг - инструкция

Ну, вот в принципе и все, что я хотел по этому поводу сказать.

P.S.

Лайкаем, оцениваем, твиттим-ретвиттим, репостим и т.д. Вообщем делаем все, что обычно не делаем )))) Всем спасибо и успехов  !


-->

14 комментариев »

  1. Ксения:

    Ага, на сервисах можно рисовать пикселами. Уметь бы еще.. (

  2. Жанна:

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

  3. Александр:

    Спасибо, очень полезно Создал иконку для своего сайта

  4. Алекс:

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

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

    И еще фавикон лучше заливать не в корень сайта, а в папку шаблона сайта.

  5. seo-coding:

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

  6. Дмитрий:

    Действительно, проще разместить иконку в корне, тогда не нужно ни кода, ни плагина (WordPress).

  7. Сергей Авдеев:

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

  8. Mily:

    Вроде ж есть даже специальные апдейты у Яндекса именно для favicon. Но с его то “скоростью” 2-3 недели, как они пишут, можно смело на 2 умножать.

  9. Александр Блуждающий:

    А как долго favicon обновляется?
    Заменил на свой, но до сих пор показывается старый.
    Почитал комментарии, у многих бывает месяцами обновляется..

    • Добрый день, Александр! На сайте сразу меняется, а вот в поисковой выдаче (например в Яндексе) через 2-3 недели, как показывает практика.
      Яндекс пишет – …”Если пиктограмма сайта размещена правильно, и хотя бы одна из страниц вашего сайта показывается в результатах поиска Яндекса, то после посещения сайта роботом она появится в поиске.”…
      P.S. У вас на сайте я не заметил фавикона, видимо что-то не так сделали.

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

  11. elimS:

    А чем не подойдет папка http:// ваш сайт/images/favicon.ico если в коде можно указать link href=”/images/favicon.ico”. И кавычки зачем каждый раз дважды писать?)

    • elimS – Я думаю, что если указать путь, то можно и из других папок подтягивать. Но если без добавления кода, то только из главной папки. Вы же у себя на сайте в корень положили ;). Что касается двойных кавычек, спасибо, дал маху, сейчас поправим..

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

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">